更新记录

0.0.1（2024-10-11） 下载此版本

完成地市级选择。

平台兼容性

uni-app

一.重要说明：

1.本插件基于uni-data-picker进行封装

★所以使用本插件前需要先安装uni-data-picker插件

地址：https://ext.dcloud.net.cn/plugin?name=uni-data-picker

2.采用静态文件记录了全国各省会地级市，县级市名称，不需数据库查询操作。

二.使用方法

1.通过hBuilder导入或下载zip文件，将 tk-cityPicker 文件夹，放入根目录的components文件夹下，目录结构可看右侧图片展示。

2.在需要引入的界面引入插件，示例如下：

复制代码<template>
    <view class="content">
        <tk-cityPicker ref="child"></tk-cityPicker>
        <button @click="confirm">确定</button>
    </view>
</template>

这里定义了个ref属性，是为了后续在本页面调用子组件中的方法，从而获取选择好的城市信息。

3.通过插件选择好城市后，调用插件方法，获取选择的城市。示例如下：

复制代码<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            confirm() {
                //这里调用子组件中的方法，获取选择好的城市信息
                let city = this.$refs.child.getSelectedCity()
                //这里会输出一个数组，开发者可自行根据需求处理获取后的逻辑
                console.log(city)
            }
        }
    }
</script>

4.插件方法

插件中，定义了一个方法，用于返回选择好的城市信息getSelectedCity()

例如上面实例中，通过console.log()打印后得到如下信息：

复制代码(2) [{…}, {…}]
0:
text: "陕西省"
value: "120000"
1:
text: "延安市"
value: "120600"

开发者可通过处理这个数组中的数据，自行完善更多代码。