Vue——使用vuedraggable实现拖拽
vuedraggable拖拽第一步:安装vuedraggable依赖npm i vuedraggable第二步:在需要的组件中引入vuedraggableimport draggable from "vuedraggable";第三步:注册组件components: {draggable}<template><div>...
·
Vue.Draggable使用文档总结地址:https://juejin.cn/post/6844904150350692366
vuedraggable拖拽
第一步:安装vuedraggable依赖
npm i vuedraggable
第二步:在需要的组件中引入vuedraggable
import draggable from "vuedraggable";
第三步:注册组件
components: {
draggable
}
<template>
<div>
<draggable group="A" :list="expApplications" handle=".mover">
<div
class="white lighten-2 my-6 px-4 d-flex flex-column"
style="width: 100%; margin: 0 auto"
v-for="item in expApplications"
:key="item.name"
>
<div
class="d-inline-flex flex-row align-center justify-space-between"
style="border-bottom: 1px dotted grey; line-height: 48px"
>
<div class="text-h6">
<v-btn icon class="mover">
<v-icon>mdi-format-line-spacing</v-icon>
</v-btn>
{{ item.name || "门户站点" }}
</div>
<div class="text-h6">
<v-btn class="my-1" color="success" @click="addSonSite"
>新增子站点</v-btn
>
<v-btn
class="mx-4 my-1"
color="success"
@click="editGroupSite(item)"
>编辑</v-btn
>
<v-btn class="my-1" color="success" @click="deleteGroupSite(item)"
>删除</v-btn
>
</div>
</div>
<draggable group="B" :list="item.links" handle=".mover">
<div class="white" v-for="itm in item.links" :key="itm.id">
<div
class="text-caption d-flex flex-row align-center justify-space-between pl-2"
style="
border-bottom: 1px solid #bdbdbd;
height: 48px;
line-height: 48px;
"
>
<div class="black--text">
<v-btn icon class="mover">
<v-icon>mdi-menu</v-icon>
</v-btn>
{{ itm.name }}
</div>
<div>
<div class="text-h6">
<v-btn
class="mx-4 my-1"
color="cyan"
@click="editSonSite(itm)"
>编辑</v-btn
>
<v-btn class="my-1" color="cyan" @click="deleteSonSite(itm)"
>删除</v-btn
>
</div>
</div>
</div>
</div>
</draggable>
</div>
</draggable>
<Component :is="sheet_editor" :type="type" />
</div>
</template>
<script>
import draggable from "vuedraggable";
import { api_request } from "@/util/network";
import bus from "@/util/eventBus";
import GroupSiteEditor from "@/views/application/compEditor/GroupSite";
import SonSiteEditor from "@/views/application/compEditor/SonSite";
const EDITORS = {
GROUPSITE: GroupSiteEditor,
SONSITE: SonSiteEditor
};
export default {
name: "SiteManage",
props: ["allDatas"],
data() {
return {
sheet_editor: null,
drawer: false,
type: null,
expApplications: [
{
name: "group_1",
id: 1,
links: [
{
name: "site1",
id: 1
},
{
name: "site2",
id: 2
}
]
},
{
name: "group_2",
order: 2,
links: [
{
name: "site11",
order: 1
},
{
name: "site22",
id: 2
}
]
}
]
};
},
created() {
},
methods: {
// 保存排序
saveSort() {
console.log("保存排序");
},
// 新增组站点
addGroupSite(item) {
console.log("新增组", item);
},
// 编辑组站点
editGroupSite(item) {
console.log("编辑组站点", item);
this.type = "edit";
},
// 删除组站点
deleteGroupSite(item) {
console.log("删除组站点", item);
},
// 新增子站点
addSonSite() {
console.log("新增子站点");
},
// 编辑组站点
editSonSite(itm) {
console.log("编辑组站点", itm);
},
// 删除子站点
deleteSonSite(itm) {
console.log("删除子站点", itm);
}
},
components: {
draggable,
GroupSiteEditor,
SonSiteEditor
}
};
</script>
更多推荐
已为社区贡献10条内容
所有评论(0)