vue3+typeScript穿梭框的实现示例


Posted in Vue.js onDecember 29, 2020

前言

实现功能:模仿element穿梭框的简单功能
每周分享一个vue3+typeScript的小组件,我只想分享下自己的实现思路,楼主是个菜鸡前端,记录下实现过程,说不定对你有帮助。

效果展示

预览地址

github地址

vue3+typeScript穿梭框的实现示例

开发过程

思路:用两个数组分别记录左右框框里面的值,根据复选框选中状态来实现删除增加即可

html部分

<div class="shuttle">
  <!-- 左边列表 -->
  <div class="shuttle-box">
    <div class="shuttle-box-title">
      <div>列表一</div>
      <div class="index-num">{{itemLeft.length}}</div>
    </div>
    <div class="shuttle-box-list">
      <div class="shuttle-box-item" v-for="(vo,inx) in itemLeft" :key="inx">
        <input type="checkbox" :value="inx" v-model="checkLeft" :disabled="vo.disabled" /> {{vo.label}}
      </div>
    </div>
  </div>
  <!-- 左右操作按钮 -->
  <div class="shuttle-click">
    <span @click="goLeft">←</span>
    <span @click="goRight">→</span>
  </div>
  <!-- 右边列表 -->
  <div class="shuttle-box">
    <div class="shuttle-box-title">
      <div>列表二</div>
      <div class="index-num">{{itemRight.length}}</div>
    </div>
    <div class="shuttle-box-list">
      <div class="shuttle-box-item" v-for="(vo,inx) in itemRight" :key="inx">
        <input type="checkbox" :value="inx" v-model="checkRight" :disabled="vo.disabled" /> {{vo.label}}
      </div>
    </div>
  </div>
</div>

ts部分

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs
} from 'vue'

export default defineComponent({
  setup() {

    const data = reactive({
      itemLeft: [{
        label: '列表1的第一条数据',
        disabled: true,
      }, {
        label: '列表1的第二条数据',
        disabled: false,
      }],
      itemRight: [{
        label: '列表2的第一条数据',
        disabled: false,
      }, {
        label: '列表2的第二条数据',
        disabled: false,
      }],
      checkLeft: [],
      checkRight: [],
      goLeft: () => {
        //数组排序
        data.checkRight.sort(data.sortIndex);
        data.checkRight.forEach((item) => {
          //将itemRight对应索引的数据移动到左边去
          data.itemLeft.push(data.itemRight[item]);
          //移除
          data.itemRight.splice(item, 1);
        });
        //清空
        data.checkLeft = [];
        data.checkRight = [];
      },
      goRight: () => {
        //数组排序
        data.checkLeft.sort(data.sortIndex);
        data.checkLeft.forEach((item) => {
          //将itemLeft对应索引的数据移动到右边去
          data.itemRight.push(data.itemLeft[item]);
          //移除
          data.itemLeft.splice(item, 1);
        });
        //清空
        data.checkLeft = [];
        data.checkRight = [];
      },
      //checkbox是绑定的是的数组的索引,所以checkbox的点击的顺序不同的话索引的顺序是不同的,这样删除有可能找不到会报错,排个序从大到小删除就可以
      //这个是排序参数
      sortIndex: (a, b) => {
        return b - a;
      }
    })
    return {
      ...toRefs(data),
    }
  }
})
</script>

css部分

.shuttle {
  width: 800px;
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
  //整个穿梭框
  .shuttle-box {
    width: 300px;
    height: 500px;
    border: 1px solid #ddd;
    //标题
    .shuttle-box-title {
      background: #f5f7fa;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      .index-num {
        color: #909399;
        font-size: 12px;
        font-weight: 400;
      }
    }
    //列表
    .shuttle-box-list {
      padding: 20px;
      //一个列表item
      .shuttle-box-item {
        line-height: 2.0;
      }
    }
  }
  //左右穿梭按钮
  .shuttle-click {
    padding-top: 60px;
    cursor: pointer;
    span {
      padding: 5px 10px;
      display: inline-block;
      background: #409eff;
      color: #ffffff;
      margin: 0 5px;
      text-align: center;
    }
  }
}

到此这篇关于vue3+typeScript穿梭框的实现示例的文章就介绍到这了,更多相关vue3+typeScript穿梭框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 #Vue.js
vue实现简易的双向数据绑定
Dec 29 #Vue.js
vue中配置scss全局变量的步骤
Dec 28 #Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 #Vue.js
Vue仿百度搜索功能
Dec 28 #Vue.js
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
You might like
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python中私有函数调用方法解密
2016/04/29 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python数据结构之图的应用示例
2018/05/11 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
岗位廉洁从政承诺书
2014/03/27 职场文书
公司授权委托书
2014/04/04 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
个人授权委托书
2014/09/15 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书