手写可拖动穿梭框组件CustormTransfer vue实现示例

目录

• 本文内容
• 最终效果图
• 组件html布局
• 穿梭框左侧内容
• 穿梭框右侧内容
• 穿梭框中间向左、向右按钮
• 把排序好的穿梭数据传给父组件
• 整体代码
• 小结

本文内容

需求是实现类似 el-transfer的组件，右侧框内容可以拖动排序；

手写div样式 + vuedraggable组件实现。

最终效果图

组件html布局

新建一个组件文件 CustormTransfer.vue，穿梭框 html 分为左中右三部分，使用flex布局使其横向布局，此时代码如下

此时页面上看不到组件内容。

穿梭框左侧内容

左侧内容是个列表，列表的每一项是多选框checkbox加文字标题，列表最上面是标题；所以.left-side的代码如下：

  
  
{{ titles[0] }}
  
  

    
    {{ left.label }}
  
  
  
{{ emptypText }}

解析：

• 列表标题使用h4标签，titles是组件使用者传入props的标题数组的第一项；
• 列表数据 leftData是组件使用者传入的数据处理之后的，因为我们默认el-checkbox不勾选，所以在生命周期mounted时，checked设为false;
• el-checkbox触发change事件时，执行函数leftCheckChange(left)，去改变leftData数组对应项的checked设为取反；
• 当leftData数据为空时，显示数据为空的文本，此文本组件使用者可通过 属性 emptypText 传入，默认'数据为空'；
• 列表的每一项的样式在 .item-cls 定义，内容过长时显示省略号，在 title 属性中显示全部内容；
• 列表整体内容多时，显示滚动条，滚动条样式重写；

以上内容加上样式、函数后如下：

穿梭框右侧内容

右侧的列表需要具有可拖动排序的功能，我使用的使 vuedraggable组件，所以首先需要先安装npm install vuedraggable -S, 再引入 import draggable from 'vuedraggable'，使用时配合 增加过渡效果；代码如下：

  
{{ titles[1] }}
  
    
      

        
        {{ index + 1 + '.' }}
        {{ right.label }}
      
    
  
  
{{ emptypText }}

解析：

• 右侧的列表样式和左侧一样；
• 只是多了一个组件的使用

此时整体的代码如下：

穿梭框中间向左、向右按钮

穿梭框的向左、向右按钮，使用实现，代码如下：

解析：

• 按钮的禁用disabled逻辑，在computed中定义toRightDisable、toLeftDisable；
• 按钮的点击事件 toRight、toLeft，是对左右两侧列表数组的运算；

此部分的代码如下：

把排序好的穿梭数据传给父组件

即把rightData: []数据通过$emit()传递出去，父组件监听dragedData事件之后获取； 定义函数 transferData()，在拖动完成时的@end事件调用，在向左向右更新了右侧列表数据之后调用；

代码如下：

methods: {
  // 传递数据
  transferData () {
    this.$emit('dragedData', this.rightData)
  }
}

整体代码

小结

本文主要写了一个可拖动排序的穿梭框组件，更多关于拖动穿梭框CustormTransfer vue的资料请关注脚本之家其它相关文章！