分类选择
分类选择组件，支持单选、多选、搜索、默认选中值、禁用项，建议搭配弹出层uni-popup使用
注意事项
组件需要依赖 scss 插件, 或自己去手动修改css样式（很简单）
属性 Props
| 属性名 |
类型 |
默认值 |
说明 |
| showNav |
Boolean |
false |
是否显示标题栏，为true时，activeIds数据单向绑定，请通过 @clickConfirm 操作 |
| title |
String |
标题 |
标题文字 |
| cancelText |
String |
取消 |
取消按钮文字 |
| confirmText |
String |
确认 |
确认按钮文字 |
| activeIndex |
Number |
0 |
左侧选中的索引 |
| items |
Array |
[ ] |
为分类显示所需的数据，数据格式见下方示例 |
| activeIds |
Array |
[ ] |
表示右侧高亮选项的id，默认数据双向绑定，showNva为true时，数据单向绑定， 请通过 @clickConfirm 操作 |
| max |
Number |
0 |
表示右侧项最大选中个数, 为1时表示单选 |
| selectedIcon |
String |
'' |
自定义右侧栏选中状态的图标,暂只支持相对路径 |
| selectAll |
Boolean |
false |
是否支持全选，默认为false |
| defaultActiveColor |
String |
#FC2A57 |
默认重点颜色 |
| isSearch |
Boolean |
false |
是否支持搜索，默认为false |
| searchText |
String |
搜索 |
搜索按钮文字 |
| searchPlaceholder |
String |
请输入关键词 |
搜索框placeholder |
item
| 属性名 |
类型 |
默认值 |
说明 |
| dot |
Boolean |
false |
圆点徽标 |
| badge |
Number |
'' |
带数字的徽标 |
| disabled |
String |
false |
是否禁用选项 |
方法 Events
| 属性名 |
返回值 |
说明 |
| clickConfirm |
所有选中的数据Array |
showNav 为true时有效， 点击确认按钮时触发 |
| clickCancel |
|
showNav 为true时有效，点击取消按钮时触发 |
| clickNav |
被点击的导航的索引 Number |
点击左侧导航时触发 |
| clickItem |
该点击项的数据 Object |
点击右侧选择项时触发 |
代码示例
<template>
<view class="test">
<view class="title">
1、单选 -- {{city_ids1}}
</view>
<view class="val">
{{city_name1}}
</view>
<wyh-tree-select :items="items" :activeIds="city_ids1" :max="1" @clickItem="onItem"/>
<view class="title">
2、多选 -- {{city_ids2}}
</view>
<view class="val">
{{city_name2}}
</view>
<wyh-tree-select :items="items" :activeIds="city_ids2" :max="2"/>
<view class="title">
3、全选 -- {{city_ids5}}
</view>
<view class="val">
{{city_name5}}
</view>
<wyh-tree-select :items="items" :activeIds="city_ids5" :selectAll="true"/>
<view class="title">
4、搭配弹出层 -- {{city_ids3}}
</view>
<view class="select" @click="$refs.popup_citys.open()">
<view class="title">选择城市</view>
<view class="val">{{city_name3}}</view>
</view>
<uni-popup class="citys_win popup_win" ref="popup_citys" type="bottom">
<wyh-tree-select :items="items" :activeIds="city_ids3" :title="'选择地区'"/>
</uni-popup>
<view class="title">
5、搭配弹出层(showNav) -- {{city_ids4}}
</view>
<view class="select" @click="$refs.popup_citys2.open()">
<view class="title">选择城市</view>
<view class="val">{{city_name4}}</view>
</view>
<uni-popup class="citys_win popup_win" ref="popup_citys2" type="bottom">
<wyh-tree-select :items="items" :activeIds="city_ids4" :title="'选择地区'" :showNav="true" @clickCancel="onCancel" @clickConfirm='onConfirm'/>
</uni-popup>
<view class="title">
6、搭配弹出层-全选(showNav) -- {{city_ids6}}
</view>
<view class="select" @click="$refs.popup_citys3.open()">
<view class="title">选择城市</view>
<view class="val">{{city_name6}}</view>
</view>
<uni-popup class="citys_win popup_win" ref="popup_citys3" type="bottom">
<wyh-tree-select :items="items" :activeIds="city_ids6" :title="'选择地区'" :showNav="true" :selectAll="true" @clickCancel="onCancel2" @clickConfirm='onConfirm2'/>
</uni-popup>
<view class="title">
7、搭配弹出层-搜索、全选(showNav) -- {{city_ids7}}
</view>
<view class="select" @click="$refs.popup_citys4.open()">
<view class="title">选择城市</view>
<view class="val">{{city_name7}}</view>
</view>
<uni-popup class="citys_win popup_win" ref="popup_citys4" type="bottom">
<wyh-tree-select :items="items" :activeIds="city_ids7" :title="'选择地区'" :defaultActiveColor="'red'" :showNav="true" :selectAll="true" :isSearch="true" @clickCancel="onCancel3" @clickConfirm='onConfirm3'/>
</uni-popup>
</view>
</template>
<script>
export default {
computed: {
city_name1() {
return this.getCityNames(this.city_ids1);
},
city_name2() {
return this.getCityNames(this.city_ids2);
},
city_name3() {
return this.getCityNames(this.city_ids3);
},
city_name4() {
return this.getCityNames(this.city_ids4);
},
city_name5() {
return this.getCityNames(this.city_ids5);
},
city_name6() {
return this.getCityNames(this.city_ids6);
},
city_name7() {
return this.getCityNames(this.city_ids7);
}
},
data() {
return {
items: [{
text: '浙江',
children: [
{
// 名称
text: '温州',
// id，作为匹配选中状态的标识符
id: 1,
// 禁用选项
disabled: true,
},
{
text: '杭州',
id: 2,
},{
text: '宁波',
id: 3
}
],
dot: false
},
{
text: '江苏',
children: [
{
// 名称
text: '南京',
id: 4,
// 禁用选项
disabled: true,
},
{
text: '无锡',
id: 5,
},
{
text: '九江',
id: 6,
},
{
text: '常州',
id: 7,
}
],
badge: 1
},
{
text: '福建',
disabled: true,
children: [
{
// 名称
text: '厦门',
id: 8,
},
{
// 名称
text: '泉州',
id: 9,
}
]
}
],
city_ids1: [5],
city_ids2: [3],
city_ids3: [2],
city_ids4: [],
city_ids5: [2,3],
city_ids6: [2],
city_ids7: [7]
}
},
methods: {
onItem(res) {
console.log(res);
},
getCityNames(ids) {
if(!ids) return;
if(ids.length == 0) {
return '';
}
let city_name = [];
this.items.map(function (item, index) {
item.children.map(function (city, ind) {
ids.map(function (id, i) {
if(id == city.id) {
city_name.push(city.text);
}
})
})
})
return city_name.join(',');
},
onCancel() {
this.$refs.popup_citys2.close();
},
onConfirm(res) {
let ids = [];
res.map(function (item, ind) {
ids.push(item.id);
})
this.city_ids4 = ids;
this.$refs.popup_citys2.close();
},
onCancel2() {
this.$refs.popup_citys3.close();
},
onConfirm2(res) {
let ids = [];
res.map(function (item, ind) {
ids.push(item.id);
})
this.city_ids6 = ids;
this.$refs.popup_citys3.close();
},
onCancel3() {
this.$refs.popup_citys4.close();
},
onConfirm3(res) {
let ids = [];
res.map(function (item, ind) {
ids.push(item.id);
})
this.city_ids7 = ids;
this.$refs.popup_citys4.close();
}
},
created() {
}
}
</script>
<style lang="scss" scoped>
page {
background: #F4F4F4 !important;
}
.test {
padding-bottom: 800rpx;
.title {
padding: 20rpx;
font-weight: 700;
}
.val {
display: flex;
align-items: center;
height: 80rpx;
padding: 0 20rpx;
background: #ffffff;
margin-bottom: 20rpx;
}
}
</style>
