hookehuyr

选择器组件,多行输入框组件调整

...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
15 v-model="item.value" 15 v-model="item.value"
16 :name="item.name" 16 :name="item.name"
17 :placeholder="item.component_props.placeholder" 17 :placeholder="item.component_props.placeholder"
18 - :rules="rules" 18 + :rules="item.rules"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 readonly 20 readonly
21 @touchstart.stop="showKeyboard" 21 @touchstart.stop="showKeyboard"
......
...@@ -7,27 +7,51 @@ ...@@ -7,27 +7,51 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="picker-field-page"> 9 <div class="picker-field-page">
10 - <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required" 11 + {{ item.component_props.label
12 - :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" /> 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
14 + <van-field
15 + v-model="item.value"
16 + is-link
17 + readonly
18 + :name="item.key"
19 + :required="item.component_props.required"
20 + :placeholder="item.component_props.placeholder"
21 + :rules="item.rules"
22 + @click="showPicker = true"
23 + />
13 <van-popup v-model:show="showPicker" position="bottom"> 24 <van-popup v-model:show="showPicker" position="bottom">
14 - <van-picker :columns="item.options" @confirm="onConfirm" @cancel="showPicker = false" /> 25 + <van-picker
26 + :columns="item.component_props.options"
27 + @confirm="onConfirm"
28 + @cancel="showPicker = false"
29 + />
15 </van-popup> 30 </van-popup>
16 </div> 31 </div>
17 </template> 32 </template>
18 33
19 <script setup> 34 <script setup>
20 const props = defineProps({ 35 const props = defineProps({
21 - item: Object 36 + item: Object,
22 -}) 37 +});
23 -const selectedValues = ref(''); 38 +
39 +onMounted(() => {
40 + props.item.component_props.options = props.item.component_props.options.map((opt) => {
41 + return {
42 + text: opt,
43 + value: opt,
44 + };
45 + });
46 +});
47 +
48 +const selectedValues = ref("");
24 const showPicker = ref(false); 49 const showPicker = ref(false);
25 50
26 const onConfirm = ({ selectedOptions }) => { 51 const onConfirm = ({ selectedOptions }) => {
27 props.item.value = selectedOptions[0]?.value; 52 props.item.value = selectedOptions[0]?.value;
28 showPicker.value = false; 53 showPicker.value = false;
29 }; 54 };
30 -
31 </script> 55 </script>
32 56
33 <style lang="less" scoped> 57 <style lang="less" scoped>
......
...@@ -7,28 +7,40 @@ ...@@ -7,28 +7,40 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="textarea-field-page"> 9 <div class="textarea-field-page">
10 - <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder" 11 + {{ item.component_props.label
12 - :rules="item.rules" :required="item.required" :rows="item.component_props.rows" 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 - autosize :maxlength="item.component_props.maxlength" show-word-limit /> 13 + </div>
14 + <van-field
15 + v-model="item.value"
16 + :name="item.name"
17 + :type="item.type"
18 + :placeholder="item.component_props.placeholder"
19 + :rules="item.rules"
20 + :required="item.component_props.required"
21 + :rows="item.component_props.rows"
22 + autosize
23 + :maxlength="item.component_props.maxlength"
24 + show-word-limit
25 + />
14 </div> 26 </div>
15 </template> 27 </template>
16 28
17 <script setup> 29 <script setup>
18 const props = defineProps({ 30 const props = defineProps({
19 - item: Object 31 + item: Object,
20 -}) 32 +});
21 </script> 33 </script>
22 34
23 <style lang="less" scoped> 35 <style lang="less" scoped>
24 - .textarea-field-page { 36 +.textarea-field-page {
25 - .label { 37 + .label {
26 - padding: 1rem 1rem 0 1rem; 38 + padding: 1rem 1rem 0 1rem;
27 - font-size: 0.9rem; 39 + font-size: 0.9rem;
28 - font-weight: bold; 40 + font-weight: bold;
29 - span { 41 + span {
30 - color: red; 42 + color: red;
31 - }
32 } 43 }
33 } 44 }
45 +}
34 </style> 46 </style>
......