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 组件

树形数据选择器

以树形结构展示待选项目

分组树形数据选择器

多分组且每个分组可使用树形结构展示的选择器