hookehuyr

✨ feat: 地址输入模块新增详细地址录入功能

<!--
* @Date: 2022-08-30 14:32:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-08-30 17:56:04
* @LastEditTime: 2022-09-06 15:53:10
* @FilePath: /data-table/src/components/AreaPickerField/index.vue
* @Description: 文件描述
-->
......@@ -10,8 +10,10 @@
<div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
<van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required"
:placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" />
<van-field name="address" v-model="item.address" placeholder="详细地址" />
<van-popup v-model:show="showPicker" position="bottom">
<van-area v-model="item.code" title="" :area-list="areaList" @confirm="onConfirm" @cancel="showPicker = false" />
<van-area name="city_code" v-model="item.city_code" title="" :area-list="areaList" @confirm="onConfirm"
@cancel="showPicker = false" />
</van-popup>
</div>
</template>
......@@ -21,7 +23,9 @@ import { areaList } from '@vant/area-data';
const props = defineProps({
item: Object
})
});
const address = ref('')
const showPicker = ref(false);
const fieldValue = ref('');
......
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-06 15:24:52
* @LastEditTime: 2022-09-06 15:53:40
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -55,17 +55,17 @@ onMounted(() => {
},
required: true,
},
{
key: 'email',
value: '',
label: '邮箱',
placeholder: '请输入邮箱',
component: '',
component_props: {
name: 'email'
},
required: true,
},
// {
// key: 'email',
// value: '',
// label: '邮箱',
// placeholder: '请输入邮箱',
// component: '',
// component_props: {
// name: 'email'
// },
// required: true,
// },
// {
// key: 'age',
// value: '',
......@@ -141,7 +141,8 @@ onMounted(() => {
key: 'city',
value: '天津市/天津市/和平区',
city_code: '120101',
label: '省市区',
label: '地址',
address: '',
placeholder: '请选择省市区',
component_props: {
name: 'area_picker'
......@@ -176,7 +177,7 @@ onMounted(() => {
const onSubmit = (values) => {
console.log('submit', values);
// console.warn(mockData.value);
console.warn(mockData.value);
};
</script>
......