Vant picker 设置选中值

最新推荐文章于 2024-03-12 13:53:20 发布

gaolei_eit

最新推荐文章于 2024-03-12 13:53:20 发布

阅读量2.4k

点赞数 1

分类专栏： Vue3 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_39428080/article/details/125768327

版权

Vue3 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

<template>
    <div v-if="show" @click="showPicker = true">
        {{ prov }}
        <van-icon name="arrow-down" />
    </div>
    <!-- 省份选择 -->
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker title="请选择省份" ref="picker" value-key="name" :default-index="defaultIndex" :columns="columns"
            @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const emit = defineEmits(['on-confirm'])

const prov = ref('全国')
const picker = ref<any>(null);
let defaultIndex = ref(0);

const info = defineProps({
    provinces: {
        type: String,
        default: () => {
            return {}
        },
    },
    provinceValue: {
        type: Object,
        default: () => {
            return {}
        },
    },
})

const show = ref(true)
const showPicker = ref(false);

onMounted(() => {
    if (info.provinceValue) {
        defaultIndex.value = info.provinceValue.value  //设置选中第几个
        prov.value = info.provinceValue.name
    }

    if (info.provinces == '线路统计') {
        show.value = true
    } else {
        show.value = false
    }
})

const columns = [
    { name: '全国', value: 0, postalCode: '', code: '' },
    // 23个省
    { name: '青海', value: 1, postalCode: '630000', code: 63, },
    { name: '四川', value: 2, postalCode: '510000', code: 51 },
    { name: '海南', value: 3, postalCode: '460000', code: 46 },
    { name: '陕西', value: 4, postalCode: '610000', code: 61 },
    { name: '甘肃', value: 5, postalCode: '620000', code: 62 },
    { name: '云南', value: 6, postalCode: '530000', code: 53 },
    { name: '湖南', value: 7, postalCode: '430000', code: 43 },
    { name: '湖北', value: 8, postalCode: '420000', code: 42 },
    { name: '黑龙江', value: 9, postalCode: '230000', code: 23 },
    { name: '贵州', value: 10, postalCode: '520000', code: 52 },
    { name: '山东', value: 11, postalCode: '370000', code: 37 },
    { name: '江西', value: 12, postalCode: '360000', code: 36 },
    { name: '河南', value: 13, postalCode: '410000', code: 41 },
    { name: '河北', value: 14, postalCode: '130000', code: 13 },
    { name: '山西', value: 15, postalCode: '140000', code: 14 },
    { name: '安徽', value: 16, postalCode: '340000', code: 34 },
    { name: '福建', value: 17, postalCode: '350000', code: 35 },
    { name: '浙江', value: 18, postalCode: '330000', code: 33 },
    { name: '江苏', value: 19, postalCode: '320000', code: 32 },
    { name: '吉林', value: 20, postalCode: '220000', code: 22 },
    { name: '辽宁', value: 21, postalCode: '210000', code: 21 },
    { name: '台湾', value: 22, postalCode: '830000', code: 71 },
    // 5个自治区
    { name: '新疆', value: 23, postalCode: '650000', code: 65 },
    { name: '广西', value: 24, postalCode: '450000', code: 45 },
    { name: '宁夏', value: 25, postalCode: '640000', code: 64 },
    { name: '内蒙古', value: 26, postalCode: '150000', code: 15 },
    { name: '西藏', value: 27, postalCode: '540000', code: 54 },
    // 4个直辖市
    { name: '北京', value: 28, postalCode: '110000', code: 11 },
    { name: '天津', value: 29, postalCode: '120000', code: 12 },
    { name: '上海', value: 30, postalCode: '310000', code: 31 },
    { name: '重庆', value: 31, postalCode: '500000', code: 50 },
    // 2个特别行政区
    { name: '香港', value: 32, postalCode: '810000', code: 81 },
    { name: '澳门', value: 33, postalCode: '820000', code: 82 }
]

const onConfirm = (value: any, index) => {
    showPicker.value = false;
    const provinceId = `${value.postalCode}`
    prov.value = `${value.name}`
    emit('on-confirm', value)
};


</script>

<style lang="scss" scoped>
.right-arrow {
    transform: rotate(180deg);
}
</style>