Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
dd23c1d5 1 parent 19b0dba2

✨ feat(单选/多选控件): 样式和默认值调整优化

Inline Side-by-side
Showing 3 changed files with 49 additions and 21 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: 2023-02-01 11:06:05 4 + * @LastEditTime: 2023-02-01 11:18:31
5 * @FilePath: /data-table/src/components/GenderField/index.vue 5 * @FilePath: /data-table/src/components/GenderField/index.vue
6 * @Description: 性别选择控件 6 * @Description: 性别选择控件
7 --> 7 -->
8 <template> 8 <template>
9 - <div v-if="HideShow" class="radio-field-page"> 9 + <div v-if="HideShow" class="gender-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
13 </div> 13 </div>
14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> 14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
15 - <van-field :name="item.name" :rules="item.rules"> 15 + <van-field
16 + :name="item.name"
17 + :rules="item.rules"
18 + :required="item.component_props.required"
19 + :disabled="item.component_props.disabled"
20 + >
16 <template #input> 21 <template #input>
17 <van-radio-group v-model="item.value" direction="horizontal"> 22 <van-radio-group v-model="item.value" direction="horizontal">
18 - <van-radio name="男">男</van-radio> 23 + <van-radio name="男" :checked-color="themeVars.radioColor">男</van-radio>
19 - <van-radio name="女">女</van-radio> 24 + <van-radio name="女" :checked-color="themeVars.radioColor">女</van-radio>
20 </van-radio-group> 25 </van-radio-group>
21 </template> 26 </template>
22 </van-field> 27 </van-field>
...@@ -40,11 +45,12 @@ const HideShow = computed(() => { ...@@ -40,11 +45,12 @@ const HideShow = computed(() => {
40 }) 45 })
41 46
42 onMounted(() => { 47 onMounted(() => {
48 + props.item.value = props.item.component_props.default;
43 }) 49 })
44 </script> 50 </script>
45 51
46 <style lang="less" scoped> 52 <style lang="less" scoped>
47 -.radio-field-page { 53 +.gender-field-page {
48 .label { 54 .label {
49 padding: 1rem 1rem 0 1rem; 55 padding: 1rem 1rem 0 1rem;
50 font-size: 0.9rem; 56 font-size: 0.9rem;
...@@ -61,11 +67,4 @@ onMounted(() => { ...@@ -61,11 +67,4 @@ onMounted(() => {
61 white-space: pre; 67 white-space: pre;
62 } 68 }
63 } 69 }
64 -
65 -:deep(.van-radio) {
66 - border: 1px solid #eaeaea;
67 - border-radius: 0.25rem;
68 - padding: 0.25rem 0.5rem;
69 - // width: 100vw;
70 -}
71 </style> 70 </style>
......
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: 2023-02-01 10:53:53 4 + * @LastEditTime: 2023-02-01 11:21:00
5 * @FilePath: /data-table/src/components/NameField/index.vue 5 * @FilePath: /data-table/src/components/NameField/index.vue
6 * @Description: 姓名输入框 6 * @Description: 姓名输入框
7 --> 7 -->
8 <template> 8 <template>
9 - <div v-if="HideShow" class="text-field-page"> 9 + <div v-if="HideShow" class="name-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -33,10 +33,13 @@ const props = defineProps({ ...@@ -33,10 +33,13 @@ const props = defineProps({
33 const HideShow = computed(() => { 33 const HideShow = computed(() => {
34 return !props.item.component_props.disabled 34 return !props.item.component_props.disabled
35 }) 35 })
36 +onMounted(() => {
37 + props.item.value = props.item.component_props.default;
38 +})
36 </script> 39 </script>
37 40
38 <style lang="less" scoped> 41 <style lang="less" scoped>
39 -.text-field-page { 42 +.name-field-page {
40 .label { 43 .label {
41 padding: 1rem 1rem 0 1rem; 44 padding: 1rem 1rem 0 1rem;
42 font-size: 0.9rem; 45 font-size: 0.9rem;
......
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: 2023-02-01 00:19:00 4 + * @LastEditTime: 2023-02-01 11:22:51
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -50,6 +50,22 @@ ...@@ -50,6 +50,22 @@
50 {{ PCommit.text ? PCommit.text : '提交' }} 50 {{ PCommit.text ? PCommit.text : '提交' }}
51 </van-button> 51 </van-button>
52 </div> 52 </div>
53 + <!-- <van-cell-group :border="false">
54 + <component
55 + v-for="(item, index) in mockData"
56 + :id="item.key"
57 + :ref="(el) => setRefMap(el, item)"
58 + :key="index"
59 + :is="item.component"
60 + :item="item"
61 + @active="onActive"
62 + />
63 + </van-cell-group>
64 + <div v-if="mockData.length && PCommit.visible" style="margin: 16px">
65 + <van-button round block type="primary" native-type="submit">
66 + {{ PCommit.text ? PCommit.text : '提交' }}
67 + </van-button>
68 + </div> -->
53 </van-form> 69 </van-form>
54 </van-config-provider> 70 </van-config-provider>
55 </div> 71 </div>
...@@ -223,10 +239,20 @@ onMounted(async () => { ...@@ -223,10 +239,20 @@ onMounted(async () => {
223 value: "", 239 value: "",
224 component: "", 240 component: "",
225 component_props: { 241 component_props: {
226 - name: "datetime", 242 + name: "name",
227 - tag: "datetime", 243 + tag: "name",
228 - label: "时间日期", 244 + label: "姓名",
229 - data_dateformat: "YYYY-MM-DD HH:mm:ss", 245 + required: true,
246 + },
247 + },
248 + {
249 + key: "222",
250 + value: "",
251 + component: "",
252 + component_props: {
253 + name: "gender",
254 + tag: "gender",
255 + label: "性别",
230 required: true, 256 required: true,
231 }, 257 },
232 }, 258 },
......