更新记录

1.0.3(2023-11-30)

修复已知的回显问题;

1.0.2(2023-07-05)

说明:自用。请谨慎使用。

1.0.1(2023-04-06)

修改文件目录

查看更多

平台兼容性

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

nx-data-picker

基于长江长江大佬自定义多级选择、省市区地址选择、三级联动地址选择、多级联动地址选择、地址选择器、多级选择器 插件进行的魔改,可以支持懒加载。

属性说明

名称 类型 默认值 描述
disabled Boolean false 是否禁用输入框
disabledColor String #f5f7fa 禁用状态时的背景色
clearable Boolean false 是否显示清除控件
placeholder String 输入框为空时的占位符
placeholderClass String input-placeholder 指定placeholder的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/
placeholderStyle [String, Object] color: #c0c4cc 指定placeholder的样式
inputAlign String #left 输入框内容对齐方式,可选值为:left、center、right
fontSize [String, Number] #15px 输入框字体的大小
color String #303133 输入框字体颜色
prefixIcon String 输入框前置图标
prefixIconStyle [String, Object] 前置图标样式,对象或字符串
suffixIcon String 输入框后置图标
suffixIconStyle String, Object 后置图标样式,对象或字符串
border String surround 边框类型,surround-四周边框,bottom-底部边框,none-无边框
readonly Boolean false 是否只读,与disabled不同之处在于disabled会置灰组件,而readonly则不会
shape String square 输入框形状,circle-圆形,square-方形
animation Boolean true 是否开启动画
safeArea Boolean false 是否开启安全条
model Object {} 表单数据
url String '' 异步数据源地址
localdata Array cityList 本地数据
map Object text: 'title', value: 'value','0': ['provinceName', '选择所在省'],'1': ['districtName', '选择所在市'],'2': ['streetName', '选择所在区县'],} 自定义键名、值名和多级选择的值名
<u--form labelPosition="top" labelWidth="auto" :model="addressModel" ref="uForm3"
         class="readonlyAddressAll">
    <u-form-item label="所住区域" prop="area" borderBottom required labelWidth="auto" labelPosition="top">
        <nx-data-picker ref="nexDataPicker" placeholder="请选择所住区域" border="none" disabled
                        disabledColor="#ffffff" :model.sync="addressModel" :map="{
                                text: 'label',
                                value: 'value',
                                '0': ['provinceName', '选择所在省'],
                                '1': ['districtName', '选择所在市'],
                                '2': ['streetName', '选择所在区县'],
                            }">
        </nx-data-picker>
    </u-form-item>
</u--form>
 export default {
    data() {
        return {
            addressModel: {
                "districtName": "110100",
                "districtNameText": "北京市",
                "streetName": "110101",
                "streetNameText": "东城区",
                "villageName": "1522386002295541762",
                "villageNameText": "柏山村",
                "areaName": "1522386002366844930",
                "areaNameText": "一组",
                "id": 12,
                "provinceName": "110000",
                "provinceNameText": "北京市"
            }
        }
    }
}

text和value是对应的数据源中的名称和id(这个是不是id具体看你),下面的代表一共几个层级。[0]代表model对应的字段,[1]是默认显示提示语

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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