- uview官网:[https://www.uviewui.com/components/picker.html](https://www.uviewui.com/components/picker.html)
- 在[uview](https://www.uviewui.com/components/picker.html)的组件的基础上改造
- 使用了uview的picker组件和checkbox组件
- ![在这里插入图片描述](https://img-blog.csdnimg.cn/5772fb7a4afb4076b47dda0ae254c375.png)
### 效果如图
![在这里插入图片描述](https://img-blog.csdnimg.cn/1c91561479a142cba4674eb18d91a1ac.png)
### 复制一份uview的picker组件和checkbox组件的代码
1. origin-component/custom-checkbox/custom-checkbox.vue
- 注释掉了uni.$u.error('u-checkbox必须搭配u-checkbox-group组件使用'),避免为写在u-checkbox-group组件下控制台报错
```html
{{label}}
```
2. origin-component/custom-checkbox/props.js
- 完全复制uview-ui的代码
```html
export default {
props: {
// checkbox的名称
name: {
type: [String, Number, Boolean],
default: uni.$u.props.checkbox.name
},
// 形状,square为方形,circle为圆型
shape: {
type: String,
default: uni.$u.props.checkbox.shape
},
// 整体的大小
size: {
type: [String, Number],
default: uni.$u.props.checkbox.size
},
// 是否默认选中
checked: {
type: Boolean,
default: uni.$u.props.checkbox.checked
},
// 是否禁用
disabled: {
type: [String, Boolean],
default: uni.$u.props.checkbox.disabled
},
// 选中状态下的颜色,如设置此值,将会覆盖parent的activeColor值
activeColor: {
type: String,
default: uni.$u.props.checkbox.activeColor
},
// 未选中的颜色
inactiveColor: {
type: String,
default: uni.$u.props.checkbox.inactiveColor
},
// 图标的大小,单位px
iconSize: {
type: [String, Number],
default: uni.$u.props.checkbox.iconSize
},
// 图标颜色
iconColor: {
type: String,
default: uni.$u.props.checkbox.iconColor
},
// label提示文字,因为nvue下,直接slot进来的文字,由于特殊的结构,无法修改样式
label: {
type: [String, Number],
default: uni.$u.props.checkbox.label
},
// label的字体大小,px单位
labelSize: {
type: [String, Number],
default: uni.$u.props.checkbox.labelSize
},
// label的颜色
labelColor: {
type: String,
default: uni.$u.props.checkbox.labelColor
},
// 是否禁止点击提示语选中复选框
labelDisabled: {
type: [String, Boolean],
default: uni.$u.props.checkbox.labelDisabled
}
}
}
```
3. origin-component/custom-picker/custom-picker.vue
- 改造了picker-view-column标签下的代码,之前只是文字形式,现在让叶子节点也就是最后一集级以复选框的形式展示,leafLevel是外面传进来的叶子节点的层级
![在这里插入图片描述](https://img-blog.csdnimg.cn/18c2d045110447f4aa6a1de5ace486dd.png)
- 增加方法boxItemChange 监听checkbox的选择状态,并调用父组件的boxChange方法
![在这里插入图片描述](https://img-blog.csdnimg.cn/09204fe5bef24cb8b1f202c97005823a.png)
```html
{{ getItemText(item1) }}
```
4. origin-component/custom-picker/props.js
- 复制uview-ui的代码,加了一个leafLevel属性
```html
export default {
props: {
// 是否展示picker弹窗
show: {
type: Boolean,
default: uni.$u.props.picker.show
},
// 是否展示顶部的操作栏
showToolbar: {
type: Boolean,
default: uni.$u.props.picker.showToolbar
},
// 顶部标题
title: {
type: String,
default: uni.$u.props.picker.title
},
// 对象数组,设置每一列的数据
columns: {
type: Array,
default: uni.$u.props.picker.columns
},
titleColor: {
type: String,
default:"#1e1e1e"
},
// 是否显示加载中状态
loading: {
type: Boolean,
default: uni.$u.props.picker.loading
},
// 各列中,单个选项的高度
itemHeight: {
type: [String, Number],
default: uni.$u.props.picker.itemHeight
},
// 取消按钮的文字
cancelText: {
type: String,
default: uni.$u.props.picker.cancelText
},
// 确认按钮的文字
confirmText: {
type: String,
default: uni.$u.props.picker.confirmText
},
// 取消按钮的颜色
cancelColor: {
type: String,
default: uni.$u.props.picker.cancelColor
},
// 确认按钮的颜色
confirmColor: {
type: String,
default: uni.$u.props.picker.confirmColor
},
// 每列中可见选项的数量
visibleItemCount: {
type: [String, Number],
default: uni.$u.props.picker.visibleItemCount
},
// 选项对象中,需要展示的属性键名
keyName: {
type: String,
default: uni.$u.props.picker.keyName
},
// 是否允许点击遮罩关闭选择器
closeOnClickOverlay: {
type: Boolean,
default: uni.$u.props.picker.closeOnClickOverlay
},
// 各列的默认索引
defaultIndex: {
type: Array,
default: uni.$u.props.picker.defaultIndex
},
// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件,只在微信2.21.1及以上有效
immediateChange: {
type: Boolean,
default: uni.$u.props.picker.immediateChange
},
leafLevel:{
type: Number,
default: 0
}
}
}
```
5. origin-component/components.scss
- 完全复制uview-ui的代码
```html
@import "./mixin.scss";
/* #ifndef APP-NVUE */
// 由于uView是基于nvue环境进行开发的,此环境中普通元素默认为flex-direction: column;
// 所以在非nvue中,需要对元素进行重置为flex-direction: column; 否则可能会表现异常
view, scroll-view, swiper-item {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-items: stretch;
align-content: flex-start;
}
/* #endif */
```
6. origin-component/mixin.scss
- 完全复制uview-ui的代码
```html
// 通过scss的mixin功能,把原来需要写4行的css,变成一行
// 目的是保持代码干净整洁,不至于在nvue下,到处都要写display:flex的条件编译
@mixin flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: $direction;
}
```
7. constants.js
picker内容的一些数据
```html
const factorStructure1 = [
{
label: "基础参数",
value: 1,
level:0,
icon:'base_params.png',
children: [
{
label: "电量",
value: 1,
level:1,
children: [
{
label: "A相电流",
value: 12,
level:2
},
{
label: "B相电流",
value: 13,
level:2
},
{
label: "C相电流",
value: 14,
level:2
}
],
},
{
label: "电压",
value: 2,
level:1,
children: [
{
label: "A相电压",
value: 9,
level:2
},
{
label: "B相电压",
value: 10,
level:2
},
{
label: "C相电压",
value: 11,
level:2
}
],
},
{
label: "有功功率",
value: 3,
level:1,
children: [
{
label: "总有功功率",
value: 18
},
{
label: "有功功率1",
value: 19
},
{
label: "有功功率2",
value: 20
},
{
label: "有功功率3",
value: 21
}
],
},
{
label: "无功功率",
value: 4,
level:1,
children: [
{
label: "无有功功率",
value: 22,
level:2
},
{
label: "无功功率1",
value: 23,
level:2
},
{
label: "无功功率2",
value: 24,
level:2
},
{
label: "无功功率3",
value: 25,
level:2
}
],
},
{
label: "功率因素",
value: 5,
level:1,
children: [
{
label: "总功率因素",
value: 26,
level:2
},
{
label: "功率因素1",
value: 27,
level:2
},
{
label: "功率因素2",
value: 28,
level:2
},
{
label: "功率因素3",
value: 29,
level:2
}
],
},
{
label: "电网频率",
value: 6,
level:1,
children: [
{
label: "电网频率",
value: 15,
level:2
}
],
},
],
},
{
label: "电量",
value: 2,
level:0,
icon:'electricity.png',
children: [
{
label: "有功电量",
value: 1,
level:1,
children: [
{
label: "正向有功总电能",
value: 1,
level:2
},
{
label: "反向有功总电能",
value: 2,
level:2
}
],
},
{
label: "无功电量",
value: 2,
level:1,
children: [
{
label: "组合无功1总电能",
value: 3,
level:2
},
{
label: "组合无功2总电能",
value: 4,
level:2
},
{
label: "(当前)第一象限无功总电能",
value: 5,
level:2
},
{
label: "(当前)第二象限无功总电能",
value: 6,
level:2
},
{
label: "(当前)第三象限无功总电能",
value: 7,
level:2
},
{
label: "(当前)第四象限无功总电能",
value: 8,
level:2
},
],
},
{
label: "需量",
value: 3,
level:1,
children: [
{
label: "当前有功需量",
value: 16,
level:2
},
{
label: "当前无功需量",
value: 17,
level:2
},
],
},
],
},
]
export {
factorStructure1
}
```
8. index.vue
```html
```
10. example.vue
- 使用方法
```html
```