zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP 标签 支持拖拽排序

This commit is contained in:
sc 2021-07-05 13:47:53 +08:00
parent f81019fcd1
commit ac7eafbaad
2 changed files with 57 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/layout/components/tags.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="adminui-tags"> <div class="adminui-tags">
<ul> <ul ref="tags">
<li v-for="tag in tagList" v-bind:key="tag" :class="isActive(tag) ? 'active' : '' " @contextmenu.prevent="openContextMenu($event, tag)"> <li v-for="tag in tagList" v-bind:key="tag" :class="[isActive(tag)?'active':'',tag.meta.affix?'affix':'' ]" @contextmenu.prevent="openContextMenu($event, tag)">
<router-link :to="tag"> <router-link :to="tag">
{{ tag.meta.title }} {{ tag.meta.title }}
<i v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop='closeSelectedTag(tag)'></i> <i v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop='closeSelectedTag(tag)'></i>
@ -23,49 +23,9 @@
</transition> </transition>
</template> </template>
<style>
.contextmenu {
position: fixed;
margin:0;
border-radius: 0px;
background: #fff;
border: 1px solid #e4e7ed;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
z-index: 3000;
list-style-type: none;
padding: 10px 0;
}
.contextmenu hr {
margin:5px 0;
border: none;
height: 1px;
font-size: 0px;
background-color: #ebeef5;
}
.contextmenu li {
margin:0;
cursor: pointer;
line-height: 30px;
padding: 0 17px;
color: #606266;
}
.contextmenu li i {
font-size: 14px;
margin-right: 10px;
}
.contextmenu li:hover {
background-color: #ecf5ff;
color: #66b1ff;
}
.contextmenu li.disabled {
cursor: not-allowed;
color: #bbb;
background: transparent;
}
</style>
<script> <script>
import Sortable from 'sortablejs'
export default { export default {
name: "tags", name: "tags",
data() { data() {
@ -78,9 +38,6 @@
} }
}, },
props: {}, props: {},
setup() {
},
watch: { watch: {
$route(e) { $route(e) {
this.addViewTags(e); this.addViewTags(e);
@ -104,7 +61,18 @@
this.addViewTags(this.$router.options.routes[0].children[0].children[0]); this.addViewTags(this.$router.options.routes[0].children[0].children[0]);
this.addViewTags(this.$route); this.addViewTags(this.$route);
}, },
mounted() {
this.tagDrop();
},
methods: { methods: {
//标签拖拽排序
tagDrop(){
const target = this.$refs.tags
Sortable.create(target, {
draggable: 'li',
animation: 300
})
},
//增加tag //增加tag
addViewTags(route) { addViewTags(route) {
if(route.name){ if(route.name){
@ -210,3 +178,44 @@
} }
} }
</script> </script>
<style>
.contextmenu {
position: fixed;
margin:0;
border-radius: 0px;
background: #fff;
border: 1px solid #e4e7ed;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
z-index: 3000;
list-style-type: none;
padding: 10px 0;
}
.contextmenu hr {
margin:5px 0;
border: none;
height: 1px;
font-size: 0px;
background-color: #ebeef5;
}
.contextmenu li {
margin:0;
cursor: pointer;
line-height: 30px;
padding: 0 17px;
color: #606266;
}
.contextmenu li i {
font-size: 14px;
margin-right: 10px;
}
.contextmenu li:hover {
background-color: #ecf5ff;
color: #66b1ff;
}
.contextmenu li.disabled {
cursor: not-allowed;
color: #bbb;
background: transparent;
}
</style>

1
src/style/app.less
View File

@ -79,5 +79,6 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
.adminui-tags li:hover {background: #ecf5ff;} .adminui-tags li:hover {background: #ecf5ff;}
.adminui-tags li.active {background: @--color-primary;} .adminui-tags li.active {background: @--color-primary;}
.adminui-tags li.active a {color: #fff;} .adminui-tags li.active a {color: #fff;}
.adminui-tags li.sortable-ghost {opacity: 0;}
.adminui-main {overflow: auto;background-color: @--color-background;flex: 1;} .adminui-main {overflow: auto;background-color: @--color-background;flex: 1;}