From 23dbefdd91a2afb128109ecca08c06634d663476 Mon Sep 17 00:00:00 2001
From: WangHao <43278047@qq.com>
Date: Sat, 6 Nov 2021 23:03:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E6=8B=96=E6=8B=BD=E6=A1=86?=
=?UTF-8?q?=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/package.json | 2 +-
ruoyi-ui/src/main.js | 4 ++
ruoyi-ui/src/router/index.js | 8 +++
ruoyi-ui/src/views/bookmark/infra/nested.vue | 37 ++++++++++++++
.../views/bookmark/vuedraggable/index2.vue | 51 +++++++++++++++++++
5 files changed, 101 insertions(+), 1 deletion(-)
create mode 100644 ruoyi-ui/src/views/bookmark/infra/nested.vue
create mode 100644 ruoyi-ui/src/views/bookmark/vuedraggable/index2.vue
diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 27f7069e5..e265b7cdb 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -67,7 +67,7 @@
"vue-router": "3.0.2",
"vue-splitpane": "1.0.4",
"vue-timeago": "^5.1.2",
- "vuedraggable": "2.20.0",
+ "vuedraggable": "^2.20.0",
"vuex": "3.1.0"
},
"devDependencies": {
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index 4782d7f52..70d363e2b 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -27,6 +27,9 @@ import 'element-ui/lib/theme-chalk/index.css'
//媒体查詢
import '@/assets/styles/base.css'
+// 引入
+import draggable from "vuedraggable";
+
// 全局引入VueMaterial组件库 https://vuematerial.io/
// import VueMaterial from 'vue-material'
// import 'vue-material/dist/vue-material.min.css'
@@ -90,3 +93,4 @@ new Vue({
store,
render: h => h(App)
})
+
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 81d0aeaf2..c8c7a2c8f 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -127,6 +127,14 @@ export const constantRoutes = [
path: '/daohang',
component: resolve => require(['../views/bookmark/menu/index.vue'], resolve),
hidden: true,
+ },{
+ path: '/draggable',
+ component: resolve => require(['../views/bookmark/vuedraggable/index.vue'], resolve),
+ hidden: true,
+ },{
+ path: '/draggable2',
+ component: resolve => require(['../views/bookmark/vuedraggable/index2.vue'], resolve),
+ hidden: true,
},
{
path: '/login',
diff --git a/ruoyi-ui/src/views/bookmark/infra/nested.vue b/ruoyi-ui/src/views/bookmark/infra/nested.vue
new file mode 100644
index 000000000..7a876b3b7
--- /dev/null
+++ b/ruoyi-ui/src/views/bookmark/infra/nested.vue
@@ -0,0 +1,37 @@
+<template>
+ <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
+ <li v-for="el in tasks" :key="el.name">
+ <p>{{ el.name }}</p>
+<!-- <nested-draggable :tasks="el.tasks" />-->
+
+ <draggable :list="el.tasks" tag="ul" group="g2">
+ <li v-for="el in el.tasks" :key="el.name">
+ <p>{{ el.name }}</p>
+ </li>
+ </draggable>
+
+
+ </li>
+ </draggable>
+</template>
+<script>
+ import draggable from "vuedraggable";
+ export default {
+ props: {
+ tasks: {
+ required: true,
+ type: Array
+ }
+ },
+ components: {
+ draggable
+ },
+ name: "nested-draggable"
+ };
+</script>
+<style scoped>
+ .dragArea {
+ min-height: 50px;
+ outline: 1px dashed;
+ }
+</style>
diff --git a/ruoyi-ui/src/views/bookmark/vuedraggable/index2.vue b/ruoyi-ui/src/views/bookmark/vuedraggable/index2.vue
new file mode 100644
index 000000000..41d9320ea
--- /dev/null
+++ b/ruoyi-ui/src/views/bookmark/vuedraggable/index2.vue
@@ -0,0 +1,51 @@
+<template>
+ <div class="row">
+ <div class="col-8">
+ <h3>Nested draggable</h3>
+ <nested-draggable :tasks="list" />
+ </div>
+
+ <rawDisplayer class="col-3" :value="list" title="List" />
+ </div>
+</template>
+
+<script>
+ import nestedDraggable from "../infra/nested";
+ export default {
+ name: "nested-example",
+ display: "Nested",
+ order: 15,
+ components: {
+ nestedDraggable
+ },
+ data() {
+ return {
+ list: [
+ {
+ name: "task 1",
+ tasks: [
+ {
+ name: "task 2",
+ tasks: []
+ }
+ ]
+ },
+ {
+ name: "task 3",
+ tasks: [
+ {
+ name: "task 4",
+ tasks: []
+ }
+ ]
+ },
+ {
+ name: "task 5",
+ tasks: []
+ }
+ ]
+ };
+ }
+ };
+</script>
+<style scoped></style>