|
|
@@ -9,13 +9,15 @@
|
|
|
<div class="vongi-all">
|
|
|
<h4 class="vongi-center">您可以将常用的应用添加到主页</h4>
|
|
|
<ul class="mui-table-view mui-grid-view mui-grid-9">
|
|
|
- <li draggable="true" v-for="(item,index) in menu_list" class="mui-table-view-cell mui-media mui-col-xs-3">
|
|
|
- <!-- <router-link :to="{name:item.iconRoute,query:item.iconParam}"> -->
|
|
|
- <img :src="requirePic(item.iconPic)" />
|
|
|
- <div class="mui-media-body" v-text="item.iconName"></div>
|
|
|
- <!-- </router-link> -->
|
|
|
- <span @click="del(item.id,index)" class="mui-icon mui-icon-closeempty vongi-close"></span>
|
|
|
- </li>
|
|
|
+ <draggable element="ul" v-model="menuList" :options="{draggable:'.mui-table-view-cell'}">
|
|
|
+ <li draggable="true" v-for="(item,index) in menuList" class="mui-table-view-cell mui-media mui-col-xs-3">
|
|
|
+ <!-- <router-link :to="{name:item.iconRoute,query:item.iconParam}"> -->
|
|
|
+ <img :src="requirePic(item.iconPic)" />
|
|
|
+ <div class="mui-media-body" v-text="item.iconName"></div>
|
|
|
+ <!-- </router-link> -->
|
|
|
+ <span @click="del(item.id,index)" class="mui-icon mui-icon-closeempty vongi-close"></span>
|
|
|
+ </li>
|
|
|
+ </draggable>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="vongi-all">
|
|
|
@@ -40,6 +42,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import draggable from 'vuedraggable'
|
|
|
import * as API_User from '$project/apis/user'
|
|
|
import Common from '$project/components/Common.vue'
|
|
|
import Loading from '$project/components/Loading.vue'
|
|
|
@@ -55,7 +58,8 @@
|
|
|
Common,
|
|
|
Loading,
|
|
|
TopHeader,
|
|
|
- NavMenu
|
|
|
+ NavMenu,
|
|
|
+ draggable,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -76,6 +80,7 @@
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
+ this.menuList = this.menu_list;
|
|
|
this.resetIdList();
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -117,23 +122,23 @@
|
|
|
},
|
|
|
resetIdList() {
|
|
|
var list = [];
|
|
|
- for (var i = 0; i < this.menu_list.length; i++) {
|
|
|
- list.push(this.menu_list[i]['id']);
|
|
|
+ for (var i = 0; i < this.menuList.length; i++) {
|
|
|
+ list.push(this.menuList[i]['id']);
|
|
|
}
|
|
|
this.idList = list;
|
|
|
},
|
|
|
//添加图标
|
|
|
add(indy, index) {
|
|
|
- this.menu_list.push(this.allFunList[indy]['list'][index])
|
|
|
+ this.menuList.push(this.allFunList[indy]['list'][index])
|
|
|
this.allFunList[indy]['list'][index]['is_show'] = 0;
|
|
|
this.allFunList[indy]['cun_num']--;
|
|
|
},
|
|
|
//减少图标
|
|
|
del(id, index) {
|
|
|
|
|
|
- for (var i = 0; i < this.menu_list.length; i++) {
|
|
|
- if (this.menu_list[i]['id'] == id) {
|
|
|
- this.menu_list.splice(i, 1);
|
|
|
+ for (var i = 0; i < this.menuList.length; i++) {
|
|
|
+ if (this.menuList[i]['id'] == id) {
|
|
|
+ this.menuList.splice(i, 1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -186,5 +191,8 @@
|
|
|
<style src="$project/assets/css/iconfont.css"></style>
|
|
|
<style scoped src="$project/assets/css/xpgj.css"></style>
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
-<style>
|
|
|
+<style scoped>
|
|
|
+ .mui-table-view ul {
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
</style>
|
