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 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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
模仿OSO的论坛(三)
2006/10/09 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
对于Python中RawString的理解介绍
2016/07/07 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
在职研究生自我鉴定
2013/10/16 职场文书
外贸采购员求职的自我评价
2013/11/26 职场文书
广播体操比赛口号
2014/06/10 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
用python实现监控视频人数统计
2021/05/21 Python
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Win11开始菜单添加休眠选项
2022/04/19 数码科技