更新记录

0.0.1(2024-10-11) 下载此版本

完成地市级选择。


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.28 × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

一.重要说明:

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"

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问