一、引入uview-plus
npm install uview-plus
二、全局应用（main.js）
import uviewPlus from 'uview-plus'
三、page.json配置全局组件模式
"custom": {
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
}四、使用（使用uview-plus实现省市选择器）
<view class="main">
<view class="xiugai">
<label for="province" class="damn">更改地区:</label>
<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="cancel"></u-picker>
<button @click="show=true" class="diqu">点击选择</button>
<view class="huixian">
{{abc}}
</view>
</view>
<view class="xiugai">
<label for="province" class="damn">更改年龄:</label>
<u-number-box v-model="nianji" @change="valChange" :min="16" :max="100" class="bujin"></u-number-box>
</view>
<view class="xiugai">
<label for="gender" class="damn">选择性别:</label>
<u-picker :show="show1" :columns="columnss" @confirm="ddd" @cancel="ccc"></u-picker>
<u-button @click="show1 = true" class="btn1" type="primary">打开</u-button>
<view class="huiming">
{{xingbie}}
</view>
<u-button type="primary" class="btn" size="mini" @click="baocun">保存</u-button>
</view>
</view>const columns = reactive([
["北京", "天津", "上海", "重庆", "新疆","西藏", "宁夏", "内蒙古",
"广西", "黑龙江", "吉林", "辽宁", "河北", "山东", "江苏", "安徽",
"浙江", "福建", "广东", "海南", "云南", "贵州", "四川", "湖南",
"湖北", "河南", "山西", "陕西", "甘肃", "青海", "江西", "台湾", "香港", "澳门"],
["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云区","延庆区"],
]);
const columnData = reactive([
["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云区","延庆区"],
["和平区","河东区","河西区","南开区","河北区","红桥区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","滨海新区","宁河区","静海区","蓟州区"],
["黄浦区","徐汇区","长宁区","静安区","普陀区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","奉贤区","崇明区"],
["万州区","涪陵区","渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","綦江区","大足区","渝北区","巴南区","黔江区","长寿区","江津区","合川区","永川区","南川区","璧山区","铜梁区","潼南区","荣昌区","开州区","梁平县","城口县","丰都县","垫江县","武隆县","忠县","云阳县","奉节县","巫山县","巫溪县","石柱土家族自治县","秀山土家族苗族自治县","酉阳土家族苗族自治县","彭水苗族土家族自治县"],
['乌鲁木齐市', '克拉玛依市', '吐鲁番地区', '哈密地区', '昌吉', '博尔塔拉', '巴音郭楞', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁','塔城地区', '阿勒泰地区', '石河子市', '阿拉尔地区', '图木舒克市', '五家渠市',],
['拉萨市', '日喀则市', '昌都市', '林芝市', '阿里地区', '那曲地区', '昌都地区', '山南地区'],
['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市',],
['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'],
['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市', '防城港市'],
['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'],
['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延吉市'],
['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'],
['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'],
['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市', '聊城市', '滨州市', '荷泽市'],
['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市',
'巢湖市', '池州市', '宣城市'],
['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市',
'阳江市', '清远市', '东莞市', '中山市', '东沙群岛', '潮州市', '揭阳市', '云浮市'],
['海口市', '三亚市', '三沙市', '五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '安定县', '屯昌县', '澄迈县', '临高县', '白沙',
'昌江', '乐东', '陵水', '保亭', '琼中'],
['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄', '文山', '西双版纳', '大理', '德宏', '怒江', '迪庆'],
['贵阳市', '六盘水市', '遵义市', '安顺市', '铜仁市', '黔西南', '毕节市', '黔东南', '黔南'],
['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市',
'达州市', '雅安市', '巴中市', '资阳市', '阿坝', '甘孜', '凉山',],
['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '吉首市', '湘西'],
['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '荆州市', '荆门市', '鄂州市', '孝感市', '黄冈市', '咸宁市', '随州市', '恩施市', '仙桃市',
'天门市', '潜江市', '神农架林区'],
['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '济源市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市',
'商丘市', '信阳市', '周口市', '驻马店市'],
['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'],
['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'],
['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏', '甘南'],
['西宁市', '海乐市', '海北', '黄南', '海南', '果洛', '玉树', '海西'],
['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'],
['台北市', '高雄市', '台南市', '台中市', '金门县', '南投县', '基隆市', '新竹市', '嘉义市', '新北市', '宜兰县', '新竹县', '桃园县', '苗粟县',
'彰化县', '嘉义县', '云林县', '屏东县', '台东县', '花莲县', '澎湖县', '连江县'],
['香港岛', '新界'],
['澳门', '离岛']
]);
const changeHandler = (e) => {
const {
columnIndex,
value,
values,
index,
picker
} = e;
if (columnIndex === 0) {
picker.setColumnValues(1, columnData[index]);
}
};
const confirm = (e) => {
console.log('confirm', e.value);ps：columns 里面写的是初始化列表，如果再添加一组数据，就会有三列（省市区），columnData 里面写的是每个省对应的市，要做到位置一一对应
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
