Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3ab96b6f 1 parent a7e4727a

✨ feat: 输入框属性新增可读/禁用/文本方向属性

Inline Side-by-side
Showing 2 changed files with 33 additions and 26 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-07 16:01:42 4 + * @LastEditTime: 2022-09-13 18:13:21
5 * @FilePath: /data-table/src/components/TextField/index.vue 5 * @FilePath: /data-table/src/components/TextField/index.vue
6 * @Description: 单行文本输入框 6 * @Description: 单行文本输入框
7 --> 7 -->
8 <template> 8 <template>
9 <div class="text-field-page"> 9 <div class="text-field-page">
10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
11 - <van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder" 11 + <van-field v-model="item.value"
12 - :rules="item.rules" :required="item.required" clearable :border="false" /> 12 + :name="item.name" :type="item.type" :placeholder="item.placeholder"
13 + :rules="item.rules" :required="item.required"
14 + :readonly="item.component_props.readonly" :disabled="item.component_props.disabled"
15 + :input-align="item.component_props.align"
16 + clearable :border="false" />
13 </div> 17 </div>
14 </template> 18 </template>
15 19
......
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 17:50:25 4 + * @LastEditTime: 2022-09-13 17:46:30
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,20 @@ onMounted(() => { ...@@ -46,17 +46,20 @@ 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 + // readonly: true,
58 - // required: true, 58 + // disabled: true,
59 - // }, 59 + // align: 'left',
60 + },
61 + required: true,
62 + },
60 // { 63 // {
61 // key: 'email', 64 // key: 'email',
62 // value: '', 65 // value: '',
...@@ -217,17 +220,17 @@ onMounted(() => { ...@@ -217,17 +220,17 @@ onMounted(() => {
217 // }, 220 // },
218 // required: true, 221 // required: true,
219 // }, 222 // },
220 - { 223 + // {
221 - key: 'rate', 224 + // key: 'rate',
222 - value: '', 225 + // value: '',
223 - label: '评分', 226 + // label: '评分',
224 - placeholder: '请选择评分', 227 + // placeholder: '请选择评分',
225 - component_props: { 228 + // component_props: {
226 - name: 'rate_picker', 229 + // name: 'rate_picker',
227 - count: 10 230 + // count: 10
228 - }, 231 + // },
229 - required: true, 232 + // required: true,
230 - } 233 + // }
231 ]; 234 ];
232 // 生成自定义组件 235 // 生成自定义组件
233 createComponentType(mockData.value) 236 createComponentType(mockData.value)
......