hookehuyr

地址选择器默认值和可读显示

1 +<!--
2 + * @Date: 2023-03-29 15:27:02
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-06-06 16:01:31
5 + * @FilePath: /data-table/src/components/AreaPickerField/MyComponent.vue
6 + * @Description: 文件描述
7 +-->
1 <template> 8 <template>
2 <div style="width: 100%;"> 9 <div style="width: 100%;">
3 <van-field 10 <van-field
...@@ -6,7 +13,7 @@ ...@@ -6,7 +13,7 @@
6 readonly 13 readonly
7 :required="props.component_props.required" 14 :required="props.component_props.required"
8 placeholder="请选择省市区" 15 placeholder="请选择省市区"
9 - @click="showPicker = true" 16 + @click="onClick"
10 :border="show_address ? true : false" 17 :border="show_address ? true : false"
11 /> 18 />
12 <van-field 19 <van-field
...@@ -14,6 +21,7 @@ ...@@ -14,6 +21,7 @@
14 v-model="address" 21 v-model="address"
15 placeholder="请填写详细地址" 22 placeholder="请填写详细地址"
16 :border="false" 23 :border="false"
24 + :readonly="props.component_props.readonly"
17 /> 25 />
18 <van-divider /> 26 <van-divider />
19 27
...@@ -38,10 +46,17 @@ import { useCustomFieldValue } from '@vant/use'; ...@@ -38,10 +46,17 @@ import { useCustomFieldValue } from '@vant/use';
38 const props = inject('props'); 46 const props = inject('props');
39 const show_address = ref(!props.component_props.no_street) 47 const show_address = ref(!props.component_props.no_street)
40 48
41 -const address = ref(""); 49 +const address = ref(props.component_props.default.input_value);
42 const city_code = ref(""); 50 const city_code = ref("");
43 const showPicker = ref(false); 51 const showPicker = ref(false);
44 -let fieldValue = ref(""); 52 +let fieldValue = ref(props.component_props.default.picker_value);
53 +
54 +const onClick = () => {
55 + if (!props.component_props.readonly) { // 非只读状态下可以点击弹出
56 + showPicker.value = true;
57 + }
58 +};
59 +
45 const result_value = computed(() => { 60 const result_value = computed(() => {
46 return { 61 return {
47 address: fieldValue.value + ' ' + address.value, 62 address: fieldValue.value + ' ' + address.value,
......