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 19 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
如何使用PHP往windows中添加用户
2006/12/06 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
python实现socket端口重定向示例
2014/02/10 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python求解汉诺塔游戏
2020/07/09 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
如何使用PHP session
2015/04/21 面试题
测试工程师岗位职责
2013/11/28 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
社区科普工作方案
2014/06/03 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
假期安全教育广播稿
2014/10/04 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
2015年共青团工作总结
2015/05/15 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
平凡的世界读书笔记
2015/06/25 职场文书