vue3+ts+ant-vue:手把手教你实现穿梭框简易版，配源码

效果

通过脚手架创建项目（@vue/cli 4.5.11）

vue create 项目名
配置需要注意
选择Ts（空格选中）
选择vue3.x
然后一路回车

到这了就完成vue3+ts配置

需要用到ant-vue需要安装，注意安装2.x版本，安装官网直接安装是1.x版本

安装
npm install ant-design-vue@next --save

如果安装错误版本就卸载重装

卸载
npm uninstall ant-design-vue

配置ant
在main.ts引入

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';  //+
import 'ant-design-vue/dist/antd.css'; //+
//插入 .use(Antd)
createApp(App).use(Antd).mount('#app')

穿梭框的实现思路：
首先在temlate写左右两列，两个按钮
通过改变左右两列的数据，vue自动响应式地改变对应内容，然后通过按钮触发即可。
通过shuttle 函数实现过滤选中和未选择，分别赋予左右列，并合并原来的内容。
注意，由于改变了原来的数据，所以要先处理好先后顺序，否则会由于原数据被改而后续操作出现问题。

完整App.vue源码如下

<template><div class="content"><a-card style="width: 300px" title="左侧"><ul><li v-for="item in leftData" :key="item.title"><input type="checkbox" v-model="item.isCheck" /><label>{{ item.title }}</label></li></ul></a-card><div class="btn-group"><button @click="shuttle(0)">→</button><button @click="shuttle(1)">←</button></div><a-card style="width: 300px" title="右侧"><ul><li v-for="item in rightData" :key="item.title"><input type="checkbox" v-model="item.isCheck" /><label>{{ item.title }}</label></li></ul></a-card></div>
</template><script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({name: "App",components: {},setup() {const state = reactive({leftData: [{title: "furfur-jiang-left",isCheck: true,},{title: "fur-left",isCheck: true,},{title: "furfur-left",isCheck: false,},{title: "furfurJiang-left",isCheck: false,},],rightData: [{title: "furfur-jiang-right",isCheck: true,},],});const shuttle = (flag: number) => {if (flag === 0) {state.rightData = [...state.rightData,...state.leftData.filter((item) => item.isCheck),];state.leftData = state.leftData.filter((item) => !item.isCheck);}else{state.leftData = [...state.leftData,...state.rightData.filter((item) => item.isCheck),];state.rightData = state.rightData.filter((item) => !item.isCheck);}};return {...toRefs(state),shuttle,};},
});
</script><style scoped>
.content {display: flex;justify-content: center;align-items: center;margin-top: 15px;
}
.btn-group {display: flex;flex-direction: column;margin: 15px;
}
ul {list-style: none;margin: 0;padding: 0;
}
</style>

github地址

vue3+ts+ant-vue:手把手教你实现穿梭框简易版，配源码相关推荐

从零开始，手把手教你如何在Ubuntu下编译VLC-Android源码
前言公司项目中使用的libvlcjni.so库文件,有点老,对Android 6.0+系统兼容性太差了,当程序运行在Android6.0+系统上时,回弹出警告框,提示libvlcjni.so:tex ...
【朝花夕拾】Android自定义View之（一）手把手教你看懂View绘制流程——向源码要答案
前言原文:Android自定义View之(一)手把手教你看懂View绘制流程--向源码要答案 View作为整个app的颜值担当,在Android体系中占有重要的地位.深入理解Android View ...
手把手教你开发enc424j600+Lwip以太网-送全部源码
每个单片机爱好者以及嵌入式软件开发人员,都希望能够将设计的产品连入网络,在众多的网络通讯方式中,以太网是最经典,跨度最广的一种方式,它具备带宽大[100Mbps~1000Mbps],延时小[局域网达到 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
Vue 手把手教你使用 kindeditor
Vue 手把手教你使用 kindeditor 第一步: npm install kindeditor 第二步:创建富文本组件建立以.vue结尾的单文件 <template><!-- ...
怎么用python自制计算公式_手把手教你用python制作简易计算器，能够记录你使用的情况...
话不多说,首先先看效果图,它能够记录你在使用过程中的历史,方便你查看是否有错: 接下来就仔细分析一下是如何制作的: 简易计算器第一步:导入资源库在过程中使用到了tkinter这个资源库,win+R ...
一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
java计算机毕业设计vue基层社区管理服务网MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue基层社区管理服务网MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue基层社区管理服务网MyBatis+系统+LW文档+源码+调试部署本源码技术栈 ...
vue鼠标悬停出现悬浮框（简易版实现）
vue鼠标悬停出现悬浮框(简易版实现) 使用一个变量来控制悬浮框显示和隐藏,注意:这是简易版实现,其他功能需自行开发: 代码如下: <template><div><div ...

vue3+ts+ant-vue:手把手教你实现穿梭框简易版，配源码

vue3+ts+ant-vue:手把手教你实现穿梭框简易版，配源码相关推荐

最新文章

热门文章