Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
828f3ac0 1 parent 68f12d25

✨ feat: 多项选择控件新增排列方向属性和最大可选数属性

Inline Side-by-side
Showing 2 changed files with 50 additions and 40 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-07 16:06:06 4 + * @LastEditTime: 2022-09-08 13:35:49
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="checkbox-field-page"> 9 <div class="checkbox-field-page">
10 - <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field :name="item.key" :border="false"> 11 + {{ item.label }}
12 + <span v-if="item.required" style="color: red;">&nbsp;*</span>
13 + <span v-if="item.component_props.max" style="color: gray;">(最多可选数:&nbsp;{{ item.component_props.max }})</span>
14 + </div>
15 + <van-field :name=" item.key" :border="false">
12 <template #input> 16 <template #input>
13 - <van-checkbox-group v-model="item.value"> 17 + <van-checkbox-group v-model="item.value" :direction="item.component_props.direction"
18 + :max="item.component_props.max">
14 <van-checkbox v-for="x in item.options" :key="index" :name="x.key" icon-size="1rem" shape="square" 19 <van-checkbox v-for="x in item.options" :key="index" :name="x.key" icon-size="1rem" shape="square"
15 style="margin-bottom: 0.25rem;">{{ x.value }}</van-checkbox> 20 style="margin-bottom: 0.25rem;">{{ x.value }}</van-checkbox>
16 </van-checkbox-group> 21 </van-checkbox-group>
...@@ -31,9 +36,6 @@ const props = defineProps({ ...@@ -31,9 +36,6 @@ const props = defineProps({
31 padding: 1rem 1rem 0 1rem; 36 padding: 1rem 1rem 0 1rem;
32 font-size: 0.9rem; 37 font-size: 0.9rem;
33 font-weight: bold; 38 font-weight: bold;
34 - span {
35 - color: red;
36 - }
37 } 39 }
38 } 40 }
39 </style> 41 </style>
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-08 11:35:17 4 + * @LastEditTime: 2022-09-08 13:38:52
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -46,17 +46,17 @@ onMounted(() => { ...@@ -46,17 +46,17 @@ onMounted(() => {
46 // }, 46 // },
47 // required: true, 47 // required: true,
48 // }, 48 // },
49 - { 49 + // {
50 - key: 'username', 50 + // key: 'username',
51 - value: 'test', 51 + // value: 'test',
52 - label: '用户名', 52 + // label: '用户名',
53 - placeholder: '请输入用户名', 53 + // placeholder: '请输入用户名',
54 - component: '', 54 + // component: '',
55 - component_props: { 55 + // component_props: {
56 - name: 'text' 56 + // name: 'text'
57 - }, 57 + // },
58 - required: true, 58 + // required: true,
59 - }, 59 + // },
60 // { 60 // {
61 // key: 'email', 61 // key: 'email',
62 // value: '', 62 // value: '',
...@@ -77,33 +77,35 @@ onMounted(() => { ...@@ -77,33 +77,35 @@ onMounted(() => {
77 // component_props: { 77 // component_props: {
78 // name: 'number' 78 // name: 'number'
79 // }, 79 // },
80 - // required: false, 80 + // required: true,
81 - // }, 81 + // },
82 - { 82 + // {
83 - key: 'gender', 83 + // key: 'gender',
84 - value: '', 84 + // value: '',
85 - label: '性别', 85 + // label: '性别',
86 - placeholder: '', 86 + // placeholder: '',
87 - component: '', 87 + // component: '',
88 - component_props: { 88 + // component_props: {
89 - name: 'radio', 89 + // name: 'radio',
90 - direction: 'horizontal' 90 + // direction: 'horizontal'
91 - }, 91 + // },
92 - options: [{ 92 + // options: [{
93 - key: '男', 93 + // key: '男',
94 - value: '男' 94 + // value: '男'
95 - }, { 95 + // }, {
96 - key: '女', 96 + // key: '女',
97 - value: '女' 97 + // value: '女'
98 - }] 98 + // }]
99 - }, 99 + // },
100 // { 100 // {
101 // key: 'hobby', 101 // key: 'hobby',
102 // value: [], 102 // value: [],
103 // label: '兴趣爱好', 103 // label: '兴趣爱好',
104 // component: '', 104 // component: '',
105 // component_props: { 105 // component_props: {
106 - // name: 'checkbox' 106 + // name: 'checkbox',
107 + // direction: 'horizontal',
108 + // max: '3'
107 // }, 109 // },
108 // options: [{ 110 // options: [{
109 // key: '足球', 111 // key: '足球',
...@@ -111,6 +113,12 @@ onMounted(() => { ...@@ -111,6 +113,12 @@ onMounted(() => {
111 // }, { 113 // }, {
112 // key: '篮球', 114 // key: '篮球',
113 // value: '篮球' 115 // value: '篮球'
116 + // }, {
117 + // key: '羽毛球',
118 + // value: '羽毛球'
119 + // }, {
120 + // key: '乒乓球',
121 + // value: '乒乓球'
114 // }] 122 // }]
115 // }, 123 // },
116 // { 124 // {
......