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+iview实现文件上传
Nov 17 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
关于vue-router-link选择样式设置
Apr 30 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 5.0创建图形的巧妙方法
2010/10/12 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue实现购物车列表
2020/06/30 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
Python中的Numpy入门教程
2014/04/26 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
python实现控制台输出颜色
2021/03/02 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
销售高级职员求职信
2013/10/29 职场文书
应届生护士求职信
2013/11/01 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Python进程池与进程锁之语法学习
2022/04/11 Python