您现在的位置是:首页 > Javascript
当前栏目
Vue 中使用拖拽排序插件 Awe-dnd
2023-03-14 22:31:32 时间
1. 安装插件
npm install awe-dnd --save
2. 引入插件
import VueDND from 'awe-dnd'
Vue.use(VueDND)
3. 使用插件
<template>
<div class="title-list">
<div
v-dragging="{item: item, list:list}"
v-for="item in list"
:key="item.id"
class="title-item">
<div class="title-child">
<span>{{item.id +"--"+ item.name }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "titleList",
data() {
return {
list: [
{id:1,name:"这是第一个标题名称"},
{id:2,name:"这是第二个标题名称"},
{id:3,name:"这是第三个标题名称"},
{id:4,name:"这是第四个标题名称"},
{id:5,name:"这是第五个标题名称"},
],
};
},
mounted() {
// 拖拽事件
this.$dragging.$on("dragged", (result) => {
// 将排序后的结果重新赋值
this.list = result.value.list;
});
},
};
</script>
<style lang="scss" scoped>
.title-list {
width: 350px;
background:#fff;
margin:100px auto 0;
border: 1px solid red;
.title-item {
width: 350px;
cursor: pointer;
border: 1px solid #ededed;
.title-child {
width: 330px;
height: 60px;
margin: 0 auto;
position: relative;
span {
width: 100%;
font-size: 14px;
color: red;
line-height: 30px;
// 只显示两行,多余的以省略号显示
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
// 无论一行还是两行均居中显示
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
}
}
}
</style>
相关文章
- HarmonyOS 自定义组件之可拖拽圆形进度条
- 基于ArkUI框架的舒尔特方格游戏
- HarmonyOS自定义组件之图层的使用
- 微软 Windows 11 天气小组件将重新出现在任务栏中:实时显示动态天气
- HarmonyOS 自定义组件之上拉抽屉
- ArkUI转场动画的使用—学习笔记
- Firefox 火狐浏览器 2021 最受欢迎扩展公布,中国用户访问量排第一
- OpenHarmony 源码解析之图形子系统(UI)
- 从HarmonyOS SDK根本上解决TextInput(输入框)不识别飘红的问题
- 基于ArkUI的渐变色盘—容器组件的学习分享(中)
- 基于ArkUI的渐变色盘—容器组件的学习分享(下)
- 基于ArkUI的渐变色盘—容器组件的学习分享(上)
- 经典Windows组件大翻新!Windows 11新版记事本官宣
- 浏览器和 Node.js 的 EventLoop 事件循环机制知多少?
- Windows11这鸡肋功能太烦人?教你关闭系统小组件
- Windows 11小组件:你需要知道的一切
- HarmonyOS ArkUI之自定义组件侧滑菜单(JS)
- HarmonyOS自定义组件之分页功能组件封装实例
- 微软:2022年将重点解决Windows性能低下的问题
- HarmonyOS ArkUI之仿微信朋友圈图片预览