更新记录
1.0.3(2023-11-30) 下载此版本
修复已知的回显问题;
1.0.2(2023-07-05) 下载此版本
说明:自用。请谨慎使用。
1.0.1(2023-04-06) 下载此版本
修改文件目录
查看更多平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| × | × | √ |
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]是默认显示提示语

收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 57
赞赏 0
下载 10632748
赞赏 1792
赞赏
京公网安备:11010802035340号