更新记录

1.0.0（2022-10-27）

兼容性处理

0.0.5（2022-10-27）

微信小程序动态绑定class兼容问题处理

0.0.4（2022-10-27）

兼容vue2处理

平台兼容性

介绍

仿淘宝地址选择组件，三级四级可选。

icon图标可以替换，我直接使用了 X 和 >

注意

• 插件使用了uni-popup组件，需要自己下载
• 三级（省市区）四级（省市区镇）可选通过props中的address是否有street属性决定

关于数据

数据是从Administrative-divisions-of-China这个库中下载的 json文件放到了cos，可以修改srcipt顶部区域的地址，换成自己的地址

<script>
    // 替换json文件地址
    const provinvialUrl = 'https://cos.wkea.cn/static/provinces.json';
    const cityUrl = 'https://cos.wkea.cn/static/cities.json';
    const areaUrl = 'https://cos.wkea.cn/static/areas.json';
    const streetsUrl = 'https://cos.wkea.cn/static/streets.json';

props

{
    address: {  // 地址数据 必须包含 province、city、area
        type: Object,
        require: true,
        default: () => ({
            province: '',
            city: '',
            area: '',
            street: '' // 可选 传递表示需要4级
        })
    }
}

事件

demo

vue3

<template>
    <view>
        <view class="">{{ JSON.stringify(address) }}</view>
        <button @tap="setSelectAddress">选择地址</button>
        <lcw-select-address
            ref="lcwAddressRef"
            :address="address"
            @change="change"
        ></lcw-select-address>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const address = ref({
    province: '',
    city: '',
    area: ''
});

function change(value) {
    console.log(value);
    address.value = value;
}

const lcwAddressRef = ref();

function setSelectAddress() {
    lcwAddressRef.value.open();
}

function pageBack() {
    uni.navigateBack({
        delta: 1
    });
}
</script>

<style></style>

vue2

<template>
    <view>
        <view class="">{{ JSON.stringify(address) }}</view>
        <button @tap="setSelectAddress">选择地址</button>
        <lcw-select-address
            ref="lcwAddressRef"
            :address="address"
            @change="change"
        ></lcw-select-address>
    </view>
</template>

<script >
export default {
    data() {
        return {
            address: { province: '', city: '', area: '' }
        };
    },
    methods: {
        change(value) {
            console.log(value);
            this.address = value;
        },
        setSelectAddress() {
            this.$refs.lcwAddressRef.open();
        },
        pageBack() {
            uni.navigateBack({
                delta: 1
            });
        }
    }
};
</script>

<style></style>