refactor Transfer component

[zmm-fe]

Existing Component

是

Component Name

transfer

Description

Tasking

• 阅读Vue 组合式 API文档

• 阅读【element3-开发日记】手摸手教你重写 Button 组件

• 穿梭框

  • Attributes:
  • 改造成TypeScript
  • 通过 <el-transfer v-model="value" :data="data"></el-transfer> 定义一个默认的 Transfer 组件
    • 只有data情况的渲染
    • data和v-model都有的渲染
    • 点击左右按钮列表内容变化
  • 通过 props.targetOrder 控制 Transfer 组件右侧列表元素的排序策略：original（与数据源相同的顺序）/push（新加入的元素排在最后）/unshift （新加入的元素排在最前）
  • 通过 props.filterable 控制 Transfer 组件开启搜索模式
  • 通过 props.filterPlaceHolder 控制 Transfer 组件搜索框占位符
  • 通过 props.filterMethod 控制 Transfer 组件自定义搜索
  • 通过 props.titles 控制 Transfer 组件自定义标题
  • 通过 props.buttonTexts 控制 Transfer 组件按钮自定义文案
  • 通过 props.renderContent 控制 Transfer 组件自定义数据项渲染函数
  • Transfer组件列表顶部勾选状态文案 默认是 { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }
  • 通过 props.format 控制 Transfer 组件列表顶部勾选状态文案 { noChecked: '${total}', hasChecked: '${checked}/${total}' }
  • 通过 props.props 控制 Transfer 组件数据源的字段别名
  • 通过 props.leftDefaultChecked 控制 Transfer 组件初始状态下左侧列表的已勾选项的 key 数组
  • 通过 props.rightDefaultChecked 控制 Transfer 组件初始状态下右侧列表的已勾选项的 key 数组
  • slot:
  • left-footer 左侧列表底部内容
  • right-footer右侧列表底部内容
  • Scoped Slot:
  • 自定义数据项的内容，参数为 { option }
  • Methods:
  • clearQuery 清空某个面板的搜索关键词 参数：'left' / 'right'，指定需要清空的面板
  • Events:
  • change 右侧列表元素变化时触发 回调参数：当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组
  • left-check-change 左侧列表元素被用户选中 / 取消选中时触发 回调参数：当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
  • right-check-change 右侧列表元素被用户选中 / 取消选中时触发 回调参数：当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组