# selector 选择器
用于挑选数据的选择器
# 选择器基本规则说明
所有选择器类型的组件应包含以下三个基本行为,作为基础交互框架
- 右上角
X
关闭按钮,点击后仅关闭选择器,不触发事件响应 清空
按钮,清空选择器已选择项目,但不关闭窗口确定
按钮,触发回调事件,响应数据变更并关闭选择器窗口
选择器基本构成元素图例
# 选择器基础模型工具类
选择器的基础模型 Selector
维护于 @plugins/core
功能库中,大致内容如下
export default {
props: {
// 选择器显示/隐藏开关
value: {
type: Boolean,
default: false
},
// 选择器标题文本
title: String,
// 选择器初始化已选中项目数据集
val: Array
},
data () {
// 组件内部应用的数据
return {
// 控制弹窗的显示与关闭,例如应用于弹窗
// <el-dialog :visible.sync="show"></el-dialog>
show: false,
picked: []
}
},
watch: {
// 将开关的值同步至 show 变量
value (val) {
this.show = val
},
show (val) {
// show 的值变化后,会反馈到宿主组件 v-model 指令绑定变量
this.$emit('input', val)
/**
* 回调接口定义
*
* 在组件内部定义 prepare 函数,在 show 值为 true 时会自动调用该函数
* 在组件内部定义 cleanup 函数,在 show 值为 false 时会自动调用
*/
if (val) typeof this.prepare === 'function' && this.prepare()
else typeof this.cleanup === 'function' && this.cleanup()
}
},
methods: {
// 清除已选中的数据
clear () {
this.picked = []
}
}
}
应用该基础模型,组件具备了以下能力
v-model
能力- 设置初始选中项目的入参接口
- 显示/打开时预处理的回调函数钩子
- 隐藏/关闭时预处理的回调函数钩子
# 应用于组件
将 Selector
模型混入组件以应用相关功能,在混入后,组件将直接拥有上文中描述的基本功能
import { Selector } from '@plugins/core'
export default {
...
mixins: [Selector]
}
# 应用实例
# 单列数据穿梭框
以数据列表形式展现,提供数据可以左右穿梭直观效果,应用了 element-ui
的 Dialog
和 Transfer
组件
# 树形数据选择器
以树形结构展示待选项目
# 分组树形数据选择器
多分组且每个分组可使用树形结构展示的选择器