| | |
|---|
| | | <template>
|
|---|
| | | <div class="_tag">
|
|---|
| | | <el-scrollbar style="margin-right: 6px;">
|
|---|
| | | <div class="left">
|
|---|
| | | <el-tag
|
|---|
| | | v-for="tag in tagsList"
|
|---|
| | | :key="tag.title"
|
|---|
| | | :closable="!tag.hideclose"
|
|---|
| | | :type="isActive(tag)"
|
|---|
| | | @close="removeTag(tag)"
|
|---|
| | | @click="handleTagClick(tag)"
|
|---|
| | | >
|
|---|
| | | <router-link :to="tag.path" class="tag-title">{{ tag.title }}</router-link>
|
|---|
| | | </el-tag>
|
|---|
| | | </div>
|
|---|
| | | </el-scrollbar>
|
|---|
| | | |
|---|
| | | <el-dropdown @command="handleCloseBtn" class="_dropdown">
|
|---|
| | | <el-button type="primary" size="small">
|
|---|
| | | 标签选项
|
|---|
| | | <i class="el-icon-arrow-down el-icon--right"></i>
|
|---|
| | | </el-button>
|
|---|
| | | <el-dropdown-menu slot="dropdown">
|
|---|
| | | <el-dropdown-item command="closeOther">关闭其它</el-dropdown-item>
|
|---|
| | | <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
|
|---|
| | | </el-dropdown-menu>
|
|---|
| | | </el-dropdown>
|
|---|
| | | <keep-alive>
|
|---|
| | | <div |
|---|
| | | class="tag" |
|---|
| | | :class="{ active: isActive }" |
|---|
| | | @click="switchTag(tag)">
|
|---|
| | | <span>{{ tag }}</span>
|
|---|
| | | <i class="el-icon-close" @click.stop="removeTag(tag)"></i>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | | |
|---|
| | | <script>
|
|---|
| | | import { mapState, mapMutations } from "vuex";
|
|---|
| | | |
|---|
| | | export default {
|
|---|
| | | computed: {
|
|---|
| | | ...mapState("tags", ["tagsList"]),
|
|---|
| | | activeTag() {
|
|---|
| | | return this.tagsList.find(tag => tag.path === this.$route.fullPath);
|
|---|
| | | }
|
|---|
| | | </keep-alive>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | export default {
|
|---|
| | | props: {
|
|---|
| | | tag: {
|
|---|
| | | type: String,
|
|---|
| | | required: true
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | ...mapMutations("tags", ["removeTag"]),
|
|---|
| | | handleCloseBtn(command) {
|
|---|
| | | if (command === "closeOther") {
|
|---|
| | | const activeTag = this.activeTag;
|
|---|
| | | if (!activeTag || activeTag.hideclose) return;
|
|---|
| | | this.$store.commit("tags/removeOtherTags", activeTag);
|
|---|
| | | } else if (command === "closeAll") {
|
|---|
| | | this.$store.commit("tags/removeAllTags");
|
|---|
| | | this.$router.push({ name: "sadmasMain" });
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | isActive(tag) {
|
|---|
| | | return tag.path === this.$route.fullPath ? "" : "info";
|
|---|
| | | },
|
|---|
| | | handleTagClick(tag) {
|
|---|
| | | this.$router.push(tag.path);
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | | $route(newValue) {
|
|---|
| | | const isExist = this.tagsList.some(item => item.path === newValue.fullPath);
|
|---|
| | | if (!isExist) {
|
|---|
| | | this.$store.commit("tags/addTag", {
|
|---|
| | | title: newValue.meta.title || "",
|
|---|
| | | path: newValue.fullPath,
|
|---|
| | | hideclose: newValue.meta.hideclose || false
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | activeTag: {
|
|---|
| | | type: String,
|
|---|
| | | required: true
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | | </script>
|
|---|
| | | |
|---|
| | | <style scoped>
|
|---|
| | | ._tag {
|
|---|
| | | display: flex;
|
|---|
| | | align-items: center;
|
|---|
| | | padding: 10px;
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | isActive() {
|
|---|
| | | return this.tag === this.activeTag;
|
|---|
| | | },
|
|---|
| | | tagData() {
|
|---|
| | | return this.$store.getters.getTagData(this.tag);
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | removeTag(tag) {
|
|---|
| | | this.$emit('removeTag', tag);
|
|---|
| | | },
|
|---|
| | | switchTag(tag) {
|
|---|
| | | this.$emit('switchTag', tag);
|
|---|
| | | this.$router.push('/' + tag); // 切换到指定路由
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | }
|
|---|
| | | |
|---|
| | | .left {
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | .tag-title {
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | |
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style scoped>
|
|---|
| | | .tag {
|
|---|
| | | display: inline-block;
|
|---|
| | | margin-right: 10px;
|
|---|
| | | padding: 4px 10px;
|
|---|
| | | border-radius: 4px;
|
|---|
| | | background-color: #f0f0f0;
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tag.active {
|
|---|
| | | background-color: #409eff;
|
|---|
| | | color: #fff;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tag span {
|
|---|
| | | margin-right: 5px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tag i {
|
|---|
| | | margin-left: 5px;
|
|---|
| | | font-size: 5px;
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | | </style> |
|---|
