本文小編為大家詳細(xì)介紹“vue怎么實現(xiàn)管理系統(tǒng)頂部tags瀏覽歷史”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue怎么實現(xiàn)管理系統(tǒng)頂部tags瀏覽歷史”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)公司專注網(wǎng)站定制,經(jīng)驗豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計體驗!已為火鍋店設(shè)計等企業(yè)提供專業(yè)服務(wù)。
不用任何vuex,亂七八糟的方法,全在一個文件,粘貼即用
放到你想要的位置即可(此demo,放在了面包屑上面)
先安裝 (監(jiān)聽某dom元素大小的包)
npm install element-resize-detector
tags.vue
class="arrow arrow_left"
v-show="arrowVisible"
@click="handleClickToLeft"
>
v-for="(tag, index) in tags" :key="tag.name" :class="[active == index ? 'active top_tags' : 'top_tags']" effect="dark" :closable="tag.name != 'Firstpage1'" @close="handleClose(index, tag)" @click="clickTag(index, tag)" @contextmenu.native.prevent="handleClickContextMenu(index, tag)" > {{ $t("router." + tag.name) }}
class="arrow arrow_right"
v-show="arrowVisible"
@click="handleClickToRight"
>
v-show="contextMenu.isShow"
:style="{ left: contextMenu.menuLeft, top: '96px' }"
class="el-dropdown-menu el-popper"
x-placement="bottom-end"
>
v-if="this.active == this.contextMenu.index"
class="el-dropdown-menu__item"
@click="refresh"
>
刷新
import elementResizeDetectorMaker from "element-resize-detector";
export default {
data() {
return {
// 是否有箭頭
arrowVisible: true,
// 點擊次數(shù)
num: 0,
active: 0,
tags: [],
// 右鍵的元素
contextMenu: {
index: 0,
tag: {},
menuLeft: 0,
isShow: false
}
};
},
watch: {
$route() {
this.getThisPage();
},
tags() {
this.listenFun(this.$refs.tags, "tags");
}
},
mounted() {
this.listenFun(this.$refs.box, "box");
var that = this;
document.addEventListener("click", function(e) {
that.contextMenu.isShow = false;
});
},
methods: {
// 監(jiān)聽可視區(qū)域?qū)挘瑸g覽器窗口大小改變執(zhí)行
listenFun(monitor, dom) {
let boxWidth = this.$refs.box.offsetWidth,
tagsWidth = this.$refs.tags.offsetWidth,
erd = elementResizeDetectorMaker();
erd.listenTo(monitor, ele => {
this.$nextTick(() => {
if (
(dom == "box" && ele.offsetWidth >= tagsWidth) ||
(dom == "tags" && ele.offsetWidth <= boxWidth)
) {
this.arrowVisible = false;
this.$refs.box.style.paddingLeft = "16px";
this.$refs.box.style.paddingRight = "16px";
this.$refs.box.style.transform = "TranslateX(0px)";
this.num = 0;
} else {
this.arrowVisible = true;
this.$refs.box.style.paddingLeft = "56px";
this.$refs.box.style.paddingRight = "56px";
}
});
});
},
// 判斷當(dāng)前頁
getThisPage() {
let currentPgae = this.$route;
// 判斷tags里是否有當(dāng)前頁面
var index = this.tags.findIndex(tag => tag.name == currentPgae.name);
if (index == -1) {
this.tags.push({
name: currentPgae.name,
path: currentPgae.path
});
}
// 當(dāng)前選擇頁
this.active = this.tags.findIndex(tag => tag.name == currentPgae.name);
},
// 關(guān)閉標(biāo)簽
handleClose(index, tag) {
this.tags.splice(this.tags.indexOf(tag), 1);
if (index == this.tags.length) {
this.active = index - 1;
this.$router.push(this.tags[index - 1].path);
} else {
this.$router.push(this.tags[index].path);
}
},
// 點擊標(biāo)簽
clickTag(index, tag) {
this.active = index;
this.$router.push(tag.path);
},
// 左側(cè)按鈕
handleClickToLeft() {
if (this.num > 0) {
this.num--;
this.$refs.box.style.transform = ——TranslateX(-${this.num * 200}px)——;
}
},
// 右側(cè)按鈕
handleClickToRight() {
// 最后一個標(biāo)簽右測距離瀏覽器左側(cè)距離
let lastChild = document
.querySelectorAll(".top_tags")
[this.tags.length - 1].getBoundingClientRect()。right;
// 可視窗口的寬
let bodyWidth = document.body.offsetWidth;
// 右側(cè)箭頭48+右側(cè)邊距16
if (bodyWidth - lastChild <= 64) {
this.num++;
this.$refs.box.style.transform = ——TranslateX(-${this.num * 200}px)——;
}
},
// 右鍵
handleClickContextMenu(index, tag) {
this.contextMenu.isShow = true;
this.contextMenu.index = index;
this.contextMenu.tag = tag;
let isTag = document
.querySelectorAll(".top_tags")
[index].getBoundingClientRect();
this.contextMenu.menuLeft = isTag.left - 48 + isTag.width / 2 + "px";
},
// 刷新
refresh() {
this.$router.go(0);
},
// 關(guān)閉其他
closeOtherTag() {
let tagsLin = this.tags.length,
{ index, tag, menuLeft } = this.contextMenu;
if (index != 0) {
this.tags = [
{
name: "Firstpage1",
path: "/First/page1"
},
{
name: tag.name,
path: tag.path
}
];
} else {
this.tags = [
{
name: "Firstpage1",
path: "/First/page1"
}
];
}
this.active = index;
this.$router.push(tag.path);
},
// 關(guān)閉右側(cè)
closeRightTag() {
let tagsLin = this.tags.length,
{ index, tag, menuLeft } = this.contextMenu;
this.tags.splice(index + 1, tagsLin - index);
this.active = index;
this.$router.push(tag.path);
}
},
created() {
// 監(jiān)聽頁面刷新
window.addEventListener("beforeunload", e => {
localStorage.setItem(
"tagInfo",
JSON.stringify({
active: this.active,
tags: this.tags
})
);
});
let tagInfo = localStorage.getItem("tagInfo")
? JSON.parse(localStorage.getItem("tagInfo"))
: {
active: 0,
tags: [
{
name: "Firstpage1",
path: "/First/page1"
}
]
};
this.active = tagInfo.active;
this.tags = tagInfo.tags;
}
};
/deep/.el-tag--dark {
border-color: transparent;
}
/deep/.el-tag--dark .el-tag__close {
color: #86909c;
font-size: 16px;
}
/deep/.el-tag--dark .el-tag__close:hover {
background: #e7eaf0;
}
.tags {
position: relative;
overflow: hidden;
.arrow {
width: 48px;
text-align: center;
cursor: pointer;
background: #fff;
position: absolute;
z-index: 1;
&_left {
left: 0;
top: 0;
}
&_right {
right: 0;
top: 0;
}
}
&_content {
transition: 0.3s;
white-space: nowrap;
// padding: 0 16px;
}
.top_tags {
margin-right: 8px;
cursor: pointer;
background: #fff;
font-size: 12px;
font-weight: 400;
color: #1d2129;
}
.top_tags:hover,
.active,
.arrow:hover {
background: #e7eaf0;
}
}
重點
需要修改的地方
currentPgae.name 是路由結(jié)構(gòu)的name,判斷有無存在,沒有就添加,有就定位到上面,根據(jù)項目修改
監(jiān)聽刷新時,去本地存儲 tags 和 當(dāng)前頁面的active,F(xiàn)tistpage1 改成自己的首頁即可
讀到這里,這篇“vue怎么實現(xiàn)管理系統(tǒng)頂部tags瀏覽歷史”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。