From d33eacc1f85ac3a736b33ba4713a19aae466d711 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 05 八月 2022 16:42:53 +0800
Subject: [PATCH] 1.做适应平板显示的内容大小
---
src/layout/components/TagsView/index.vue | 97 +++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 87 insertions(+), 10 deletions(-)
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 18d4a2c..e029ba7 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -16,18 +16,37 @@
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
</scroll-pane>
- <!-- <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">-->
- <!-- <li @click="refreshSelectedTag(selectedTag)">鍒锋柊</li>-->
- <!-- <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">鍏抽棴</li>-->
- <!-- <li @click="closeOthersTags">鍏抽棴鍏朵粬</li>-->
- <!-- <li @click="closeAllTags(selectedTag)">鍏抽棴鎵�鏈�</li>-->
- <!-- </ul>-->
+ <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+ <li @click="refreshSelectedTag(selectedTag)">鍒锋柊</li>
+ <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">鍏抽棴</li>
+ <li @click="closeOthersTags">鍏抽棴鍏朵粬</li>
+ <li @click="closeAllTags(selectedTag)">鍏抽棴鎵�鏈�</li>
+ </ul>
+
+ <el-dialog
+ title="鎻愮ず"
+ :visible.sync="dialogVisible"
+ width="500px"
+ :close-on-click-modal="false"
+ >
+ <div>
+ 鐜伴〉绛炬墦寮�瓒呰繃10涓紝璇峰叧闂叾瀹冩爣绛�
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <div class="footerButton">
+ <el-button @click="dialogVisibleCancel">杩斿洖</el-button>
+ </div>
+ </span>
+ </el-dialog>
+
</div>
</template>
<script>
import ScrollPane from './ScrollPane'
import path from 'path'
+import { getCookie } from '@/utils/auth'
+import $ from 'jquery'
export default {
components: { ScrollPane },
@@ -37,11 +56,17 @@
top: 0,
left: 0,
selectedTag: {},
- affixTags: []
+ affixTags: [],
+ dialogVisible: false
}
},
computed: {
visitedViews() {
+ // 鏆傛椂鍙栨秷鍗佷釜鏍囩椤甸檺鍒舵彁绀�
+ // if (this.$store.state.tagsView.visitedViews.length > 10) {
+ // // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+ // this.dialogVisible = true
+ // }
return this.$store.state.tagsView.visitedViews
},
routes() {
@@ -64,9 +89,51 @@
mounted() {
this.initTags()
this.addTags()
+ this.beforeUnload()
},
methods: {
+ // 瑙ｅ喅 vue-admin-template 鍒锋柊椤甸潰 TagsView 涓㈠け闂
+ beforeUnload() {
+ // 鐩戝惉椤甸潰鍒锋柊
+ window.addEventListener('beforeunload', () => {
+ // visitedViews鏁版嵁缁撴瀯澶鏉傛棤娉曠洿鎺SON.stringify澶勭悊锛屽厛杞崲闇�瑕佺殑鏁版嵁
+ const tabViews = this.visitedViews.map(item => {
+ return {
+ fullPath: item.fullPath,
+ hash: item.hash,
+ meta: { ...item.meta },
+ name: item.name,
+ params: { ...item.params },
+ path: item.path,
+ query: { ...item.query },
+ title: item.title
+ }
+ })
+ sessionStorage.setItem('tabViews', JSON.stringify(tabViews))
+ })
+
+ // 椤甸潰鍒濆鍖栧姞杞藉垽鏂紦瀛樹腑鏄惁鏈夋暟鎹�
+ const oldViews = JSON.parse(sessionStorage.getItem('tabViews')) || []
+ if (oldViews.length > 0) {
+ this.$store.state.tagsView.visitedViews = oldViews
+ }
+ },
+
+ // 瀵硅瘽妗嗚繑鍥�
+ dialogVisibleCancel() {
+ this.dialogVisible = false
+ },
+
isActive(route) {
+ // if (this.$route.path === '/scgl/sckbg') {
+ // const time = setInterval(() => {
+ // this.$nextTick(() => {
+ // $("input[name='produceCode']")[0].focus()
+ // $("input[name='WXproduceCode']")[0].focus()
+ // clearInterval(time)
+ // })
+ // })
+ // }
return route.path === this.$route.path
},
isAffix(tag) {
@@ -198,13 +265,14 @@
</script>
<style lang="scss" scoped>
-$main_color :#42b983;
+$main_color: #42b983;
.tags-view-container {
height: 34px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
@@ -219,16 +287,20 @@
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
+
&:first-of-type {
margin-left: 15px;
}
+
&:last-of-type {
margin-right: 15px;
}
+
&.active {
- background-color:$main_color;
+ background-color: $main_color;
color: #fff;
- border-color:$main_color;
+ border-color: $main_color;
+
&::before {
content: '';
background: #fff;
@@ -242,6 +314,7 @@
}
}
}
+
.contextmenu {
margin: 0;
background: #fff;
@@ -254,10 +327,12 @@
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
+
&:hover {
background: #eee;
}
@@ -278,11 +353,13 @@
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
+
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
+
&:hover {
background-color: #b4bccc;
color: #fff;
--
Gitblit v1.9.3