hookehuyr

单列选择数据结构调整,多行输入最长文字属性调整

1 <!-- 1 <!--
2 * @Date: 2022-08-30 13:46:51 2 * @Date: 2022-08-30 13:46:51
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-08-30 14:23:32 4 + * @LastEditTime: 2022-12-21 11:25:55
5 * @FilePath: /data-table/src/components/PickerField/index.vue 5 * @FilePath: /data-table/src/components/PickerField/index.vue
6 * @Description: 单列选择器组件 6 * @Description: 单列选择器组件
7 --> 7 -->
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
20 :placeholder="item.component_props.placeholder" 20 :placeholder="item.component_props.placeholder"
21 :rules="item.rules" 21 :rules="item.rules"
22 @click="showPicker = true" 22 @click="showPicker = true"
23 + :border="false"
23 /> 24 />
24 <van-popup v-model:show="showPicker" position="bottom"> 25 <van-popup v-model:show="showPicker" position="bottom">
25 <van-picker 26 <van-picker
...@@ -37,12 +38,12 @@ const props = defineProps({ ...@@ -37,12 +38,12 @@ const props = defineProps({
37 }); 38 });
38 39
39 onMounted(() => { 40 onMounted(() => {
40 - props.item.component_props.options = props.item.component_props.options.map((opt) => { 41 + // props.item.component_props.options = props.item.component_props.options.map((opt) => {
41 - return { 42 + // return {
42 - text: opt, 43 + // text: opt,
43 - value: opt, 44 + // value: opt,
44 - }; 45 + // };
45 - }); 46 + // });
46 }); 47 });
47 48
48 const selectedValues = ref(""); 49 const selectedValues = ref("");
...@@ -56,8 +57,9 @@ const onConfirm = ({ selectedOptions }) => { ...@@ -56,8 +57,9 @@ const onConfirm = ({ selectedOptions }) => {
56 57
57 <style lang="less" scoped> 58 <style lang="less" scoped>
58 .picker-field-page { 59 .picker-field-page {
60 + margin: 1rem;
59 .label { 61 .label {
60 - padding: 1rem 1rem 0 1rem; 62 + // padding: 1rem 1rem 0 0;
61 font-size: 0.9rem; 63 font-size: 0.9rem;
62 font-weight: bold; 64 font-weight: bold;
63 65
...@@ -66,4 +68,11 @@ const onConfirm = ({ selectedOptions }) => { ...@@ -66,4 +68,11 @@ const onConfirm = ({ selectedOptions }) => {
66 } 68 }
67 } 69 }
68 } 70 }
71 +
72 +:deep(.van-cell--clickable) {
73 + border: 1px solid #eaeaea;
74 + border-radius: 0.25rem;
75 + padding: 0.25rem 0.5rem;
76 + margin-top: 0.5rem;
77 +}
69 </style> 78 </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: 2022-12-09 15:37:59 4 + * @LastEditTime: 2022-12-21 12:15:58
5 * @FilePath: /data-table/src/components/TextareaField/index.vue 5 * @FilePath: /data-table/src/components/TextareaField/index.vue
6 * @Description: 多行文本输入框 6 * @Description: 多行文本输入框
7 --> 7 -->
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
20 :required="item.component_props.required" 20 :required="item.component_props.required"
21 :rows="item.component_props.rows" 21 :rows="item.component_props.rows"
22 autosize 22 autosize
23 - :maxlength="item.component_props.maxlength" 23 + :maxlength="item.component_props.maxlength ? item.component_props.maxlength : null"
24 - show-word-limit 24 + :show-word-limit="item.component_props.maxlength"
25 /> 25 />
26 </div> 26 </div>
27 </template> 27 </template>
......
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-12-19 15:27:22 4 + * @LastEditTime: 2022-12-19 18:09:55
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
......