Skip to content

Commit b223757

Browse files
a241978181a241978181
committed
新增组件展示页面
1 parent b82e293 commit b223757

File tree

3 files changed

+281
-0
lines changed

3 files changed

+281
-0
lines changed

‎src/components/Function/plugShow.vue

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<template>
2+
<div>
3+
<Modal width="900" id="modalView" :fullscreen="fullscreen" v-model="isViewBool" footer-hide
4+
:draggable="draggable" :closable="false">
5+
<!-- 头-->
6+
<FuctionHeader slot="header" @mini="mini" @big="big" @small="small" @closeView="closeView"
7+
:fullscreen="fullscreen" :menu="menu"></FuctionHeader>
8+
9+
<!-- 主体 -->
10+
<div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
11+
<div style="width: 100%;display: flex;align-items: center;">
12+
<el-tooltip class="item" effect="dark" content="刷新" placement="bottom">
13+
<a> <Icon @click="refresh" style="margin-right: 5px" size="25" type="md-aperture" /></a>
14+
</el-tooltip>
15+
<!--标题栏-->
16+
<FuctionTitle @openMenu="openMenu" :permissionsList="permissionsList"
17+
:indexButton="indexButton"></FuctionTitle>
18+
</div>
19+
<component @routerTo="openMenu2(arguments)" :is="allComps[permissionsItem.permissionsenglish]"
20+
:menu="permissionsItem"></component>
21+
</div>
22+
</Modal>
23+
</div>
24+
</template>
25+
26+
<script>
27+
//有了页面之后记得修改一下这里的导入路径哦！！！
28+
import allComps from '../Menu/plugShow/index.js'
29+
import {getPermissionsList} from '@/utils/permissions.js'
30+
import FuctionHeader from "@/components/util/FuctionHeader";
31+
import FuctionTitle from "@/components/util/FuctionTitle";
32+
33+
export default {
34+
name: "plugShow",
35+
props: {
36+
menu: '',
37+
},
38+
components: {
39+
FuctionHeader,
40+
FuctionTitle
41+
},
42+
data() {
43+
return {
44+
//该属性为权限属性，需要修改为自己的权限英文名称，一般和当前页面name对应
45+
ItemName: 'plugShow',
46+
// 组件集合
47+
allComps: allComps,
48+
//当前组件
49+
permissionsItem: '',
50+
//全屏
51+
fullscreen: true,
52+
//移动
53+
draggable: false,
54+
//当前菜单按钮
55+
indexButton: null,
56+
//菜单
57+
permissionsList: getPermissionsList(2, this.menu.id),
58+
}
59+
},
60+
computed: {
61+
//判断是否展示该面板
62+
isViewBool: {
63+
get() {
64+
return this.$store.state.control[this.ItemName];
65+
},
66+
set(v) {
67+
this.$store.commit("setFalseVB", this.ItemName);
68+
}
69+
},
70+
},
71+
methods: {
72+
//刷新
73+
refresh(){
74+
let oldIndex=this.indexButton;
75+
let oldPermissionsItem=this.permissionsItem;
76+
this.openMenu({},-1)
77+
this.timer = setTimeout(()=>{ //设置延迟执行,刷新必须，0毫秒为无延迟
78+
this.openMenu(oldPermissionsItem,oldIndex)
79+
},0);
80+
},
81+
//子组件调用打开菜单
82+
openMenu2(values) {
83+
this.indexButton = values[1];
84+
this.permissionsItem = values[0];
85+
},
86+
//打开菜单
87+
openMenu(item, index) {
88+
this.indexButton = index;
89+
this.permissionsItem = item;
90+
},
91+
//关闭对话框
92+
closeView() {
93+
this.$store.commit("setFalseVB", this.ItemName);
94+
this.$store.commit("deleteTaskList", this.menu);
95+
},
96+
//缩小对话框
97+
small() {
98+
this.fullscreen = false
99+
this.draggable = true
100+
},
101+
//放大对话框
102+
big() {
103+
this.fullscreen = true
104+
this.draggable = false
105+
},
106+
//最小化
107+
mini() {
108+
this.$store.commit("setFalseVB", this.ItemName);
109+
},
110+
},
111+
mounted() {
112+
}
113+
}
114+
</script>
115+
116+
<style scoped="scoped">
117+
.BTL {
118+
width: 100%;
119+
display: flex;
120+
align-items: center;
121+
justify-content: space-between;
122+
}
123+
</style>
124+
<style>
125+
#modalView .ivu-modal-header {
126+
background-color: #348DC1;
127+
padding: 5px;
128+
}
129+
</style>

‎src/components/Menu/plugShow/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const resultComps = {}
2+
let requireComponent = require.context(
3+
'./', // 在当前目录下查找
4+
false, // 不遍历子文件夹
5+
/\.vue$/ // 正则匹配 以 .vue结尾的文件
6+
)
7+
requireComponent.keys().forEach(fileName => {
8+
let comp = requireComponent(fileName)
9+
resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
10+
})
11+
export default resultComps

‎src/components/Menu/plugShow/slidingList.vue

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<template>
2+
<div id="view">
3+
<div style="width: 100%;display: flex;align-items: center;justify-content: center"><h2>vue-draggable组件展示</h2></div>
4+
<div style="width: 100%;display: flex;align-items: flex-start;justify-content: space-between">
5+
<!--使用draggable组件-->
6+
<div class="col">
7+
<div class="title" >蜀国</div>
8+
<draggable v-model="arr1" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
9+
<transition-group>
10+
<div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
11+
</transition-group>
12+
</draggable>
13+
</div>
14+
<div class="col">
15+
<div class="title" >吴国</div>
16+
<draggable v-model="arr2" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
17+
<transition-group>
18+
<div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
19+
</transition-group>
20+
</draggable>
21+
</div>
22+
<div class="col">
23+
<div class="title" >魏国</div>
24+
<draggable v-model="arr3" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
25+
<transition-group>
26+
<div class="item" v-for="item in arr3" :key="item.id">{{item.name}}</div>
27+
</transition-group>
28+
</draggable>
29+
</div>
30+
</div>
31+
32+
</div>
33+
</template>
34+
35+
<script>
36+
import draggable from "vuedraggable"
37+
export default {
38+
name: "slidingList",
39+
components: {
40+
draggable
41+
},
42+
props: {
43+
menu: '',
44+
},
45+
data() {
46+
return {
47+
drag:false,
48+
//定义要被拖拽对象的数组
49+
arr1:[
50+
{id:1,name:'张飞'},
51+
{id:2,name:'诸葛亮'},
52+
{id:3,name:'刘备'},
53+
{id:4,name:'关羽'}
54+
],
55+
arr2:[
56+
{id:5,name:'曹操'},
57+
{id:6,name:'曹丕'},
58+
{id:7,name:'张辽'},
59+
{id:8,name:'郭嘉'}
60+
],
61+
arr3:[
62+
{id:9,name:'孙权'},
63+
{id:10,name:'周瑜'},
64+
{id:11,name:'鲁肃'},
65+
{id:12,name:'陆逊'}
66+
]
67+
}
68+
},
69+
methods: {
70+
//开始拖拽事件
71+
onStart(){
72+
this.drag=true;
73+
},
74+
//拖拽结束事件
75+
onEnd() {
76+
this.drag=false;
77+
},
78+
},
79+
mounted() {
80+
}
81+
}
82+
</script>
83+
84+
<style scoped>
85+
#view {
86+
width: 100%;
87+
height: 100%;
88+
padding: 0px;
89+
margin: 0px;
90+
margin-top: 0.9375rem;
91+
}
92+
93+
/*定义要拖拽元素的样式*/
94+
.ghostClass{
95+
background-color: blue !important;
96+
}
97+
.chosenClass{
98+
background-color: red !important;
99+
opacity: 1!important;
100+
}
101+
.dragClass{
102+
background-color: blueviolet !important;
103+
opacity: 1 !important;
104+
box-shadow:none !important;
105+
outline:none !important;
106+
background-image:none !important;
107+
}
108+
.itxst{
109+
margin: 10px;
110+
111+
}
112+
.title{
113+
padding: 6px 12px;
114+
}
115+
.col{
116+
width: 40%;
117+
flex: 1;
118+
padding: 10px;
119+
border: solid 1px #eee;
120+
border-radius:5px ;
121+
float: left;
122+
}
123+
.col+.col{
124+
margin-left: 10px;
125+
}
126+
127+
.item{
128+
padding: 6px 12px;
129+
margin: 0px 10px 0px 10px;
130+
border: solid 1px #eee;
131+
background-color: #f1f1f1;
132+
}
133+
.item:hover{
134+
background-color: #fdfdfd;
135+
cursor: move;
136+
}
137+
.item+.item{
138+
border-top:none ;
139+
margin-top: 6px;
140+
}
141+
</style>

0 commit comments

Comments
 (0)