更新记录
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]是默认显示提示语