Showing
3 changed files
with
59 additions
and
23 deletions
| ... | @@ -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"> *</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"> *</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"> *</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"> *</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> | ... | ... |
-
Please register or login to post a comment