vue2.0 Element UI - Tag标签页

King十三

已于 2022-07-12 08:51:45 修改

阅读量1.1k

点赞数 1

文章标签： ui javascript vue.js

于 2022-07-08 17:30:32 首次发布

本文链接：https://blog.csdn.net/sqleiq/article/details/125682609

版权

这个博客介绍了如何使用Vue.js创建一个滚动标签视图组件scrollPane.vue，包括处理鼠标滚轮事件来平滑滚动。同时展示了tagsView.vue组件，它用于展示已访问的标签视图，并提供了关闭当前、其他和全部标签的功能。通过Vuex管理状态，保存并操作访问过的视图。

摘要由CSDN通过智能技术生成

1. 页面组件tagsView.vue、scrollPane.vue

在这里插入图片描述
2. scrollPane.vue页面

<template>
    <div
        class="scroll-container"
        ref="scrollContainer"
        @wheel.prevent="handleScroll"
    >
        <div
            class="scroll-wrapper"
            ref="scrollWrapper"
            :style="{left: left + 'px'}"
        >
            <slot></slot>
        </div>
    </div>
</template>
<script>
const padding = 15; // tag's padding
export default {
    name: "scrollPane",
    data() {
        return {
            left: 0
        };
    },
    methods: {
        handleScroll(e) {
            const eventDelta = e.wheelDelta || -e.deltaY * 3; //wheelDelta:-120;deltaY:-120
            const $container = this.$refs.scrollContainer; //外面的container
            const $containerWidth = $container.offsetWidth; //外面的container的宽度
            const $wrapper = this.$refs.scrollWrapper; //里面
            const $wrapperWidth = $wrapper.offsetWidth; //里面的宽度
            if (eventDelta > 0) {
                this.left = Math.min(0, this.left + eventDelta); //min() 方法可返回指定的数字中带有最低值的数字。
            } else {
                if ($containerWidth - padding < $wrapperWidth) {
                    if (
                        this.left < -($wrapperWidth - $containerWidth + padding)
                    ) {
                        this.left = this.left;
                    } else {
                        this.left = Math.max(
                            this.left + eventDelta,
                            $containerWidth - $wrapperWidth - padding
                        );
                    }
                } else {
                    this.left = 0;
                }
            }
        },
        moveToTarget($target) {
            const $container = this.$refs.scrollContainer;
            const $containerWidth = $container.offsetWidth;
            const $targetLeft = $target.offsetLeft;
            const $targetWidth = $target.offsetWidth;
            if ($targetLeft < -this.left) {
                // tag in the left
                this.left = -$targetLeft + padding;
            } else if (
                $targetLeft + padding > -this.left &&
                $targetLeft + $targetWidth <
                    -this.left + $containerWidth - padding
            ) {
                // tag in the current view
                // eslint-disable-line
            } else {
                // tag in the right
                this.left = -(
                    $targetLeft -
                    ($containerWidth - $targetWidth) +
                    padding
                );
            }
        }
    }
};
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
.scroll-container {
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    width: 100%;
    .scroll-wrapper {
        position: absolute;
    }
}
</style>

3. tagsView.vue页面

<template>
    <div class="tags-view-container">
        <scroll-pane
            class="tags-view-wrapper"
            ref="scrollPane"
        >
            <router-link
                ref="tag"
                class="tags-view-item"
                :class="isActive(tag)?'tagActive':''"
                :to="tag"
                @contextmenu.prevent.native="openMenu(tag,$event)"
                v-for="tag in Array.from(visitedViews)"
                :key="tag.path"
            >
                {{tag.meta.title}}
                <span
                    class="el-icon-close"
                    @click.prevent.stop='closeSelectedTag(tag)'
                ></span>
            </router-link>
        </scroll-pane>
        <ul
            class='contextmenu'
            v-show="visible"
            :style="{left:left+'px',top:top+'px'}"
        >
            <li @click="closeSelectedTag(selectedTag)">关闭</li>
            <li @click="closeOthersTags">关闭其他</li>
            <li @click="closeAllTags">关闭所有</li>
        </ul>
    </div>
</template>
 
<script>
import ScrollPane from "./scrollPane.vue";
export default {
    name: "tags-view",
    components: { ScrollPane },
    data() {
        return {
            visible: false,
            top: 0,
            left: 0,
            selectedTag: {}
        };
    },
    computed: {
        visitedViews() {
            console.log("tabView");
            console.log(this.$store.state.tagsView);
            console.log(this.$store.state);
            return this.$store.state.tagsView.visitedViews;
        }
    },
    watch: {
        $route() {
            this.addViewTags();
            this.moveToCurrentTag();
        },
        visible(value) {
            if (value) {
                document.body.addEventListener("click", this.closeMenu);
            } else {
                document.body.removeEventListener("click", this.closeMenu);
            }
        }
    },
    mounted() {
        this.addViewTags();
    },
    methods: {
        generateRoute() {
            if (this.$route.name) {
                return this.$route;
            }
            return false;
        },
        isActive(route) {
            return route.path === this.$route.path;
        },
        addViewTags() {
            const route = this.generateRoute();
            if (!route) {
                return false;
            }
            this.$store.dispatch("addVisitedViews", route);
        },
        moveToCurrentTag() {
            const tags = this.$refs.tag;
            this.$nextTick(() => {
                for (const tag of tags) {
                    if (tag.to.path === this.$route.path) {
                        this.$refs.scrollPane.moveToTarget(tag.$el);
                        break;
                    }
                }
            });
        },
        closeSelectedTag(view) {
            this.$store.dispatch("delVisitedViews", view).then(views => {
                if (this.isActive(view)) {
                    const latestView = views.slice(-1)[0];
                    if (latestView) {
                        this.$router.push(latestView);
                    } else {
                        this.$router.push("/");
                    }
                }
            });
        },
        closeOthersTags() {
            this.$router.push(this.selectedTag);
            this.$store
                .dispatch("delOthersViews", this.selectedTag)
                .then(() => {
                    this.moveToCurrentTag();
                });
        },
        closeAllTags() {
            this.$store.dispatch("delAllViews");
            this.$router.push("/");
        },
        openMenu(tag, e) {
            this.visible = true;
            this.selectedTag = tag;
            const offsetLeft = this.$el.getBoundingClientRect().left;
            this.left = e.clientX;
            this.top = e.clientY;
        },
        closeMenu() {
            this.visible = false;
        }
    }
};
</script>
 
<style rel="scss" lang="scss" scoped>
.tags-view-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    .tags-view-wrapper {
        background: #fff;
        height: 40px;
        border-bottom: 1px solid #d8dce5;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12),
            0 0 3px 0 rgba(0, 0, 0, 0.04);
        .tags-view-item {
            display: inline-block;
            position: relative;
            height: 26px;
            line-height: 26px;
            border: 1px solid #d8dce5;
            color: #495060;
            background: #fff;
            padding: 0 8px;
            font-size: 12px;
            margin-left: 5px;
            margin-top: 4px;
            &.tagActive {
                // background-color: rgba(26, 188, 156, 0.1);
                background-color: rgb(26, 29, 33);
                color: #1ABC9C;
                // border-color: #1ABC9C;
                &::before {
                    content: "";
                    background: #1ABC9C;
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    position: relative;
                    margin-right: 2px;
                }
            }
        }
    }
    .contextmenu {
        position: absolute;
        width: 120px;
        margin:  -60px -50px -100px -280px;
        background: #fff;
        z-index: 100;
        list-style-type: none;
        padding: 5px 0;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
        li {
            margin: 0;
            padding: 7px 16px;
            cursor: pointer;
            &:hover {
                background: #eee;
            }
        }
    }
}
</style>
 
<style rel="scss" lang="scss">
//reset element css of el-icon-close
.tags-view-wrapper {
    .tags-view-item {
        .el-icon-close {
            width: 16px;
            height: 16px;
            vertical-align: 2px;
            border-radius: 50%;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            transform-origin: 100% 50%;
            &:before {
                transform: scale(0.6);
                display: inline-block;
                vertical-align: -3px;
            }
            &:hover {
                background-color: #b4bccc;
                color: #fff;
            }
        }
    }
}
</style>

4 .vuex中tagsView.js

在这里插入图片描述

const tagsView = {
    state: {
        visitedViews: [],
        cachedViews: []
    },
    mutations: {
        ADD_VISITED_VIEWS: (state, view) => {
            if (state.visitedViews.some(v => v.path === view.path)) return
            state.visitedViews.push(Object.assign({}, view, {
                title: view.meta.title || 'no-name'
            }))
            if (!view.meta.noCache) {
                state.cachedViews.push(view.name)
            }
        },
        DEL_VISITED_VIEWS: (state, view) => {
            for (const [i, v] of state.visitedViews.entries()) {
                if (v.path === view.path) {
                    state.visitedViews.splice(i, 1)
                    break
                }
            }
            for (const i of state.cachedViews) {
                if (i === view.name) {
                    const index = state.cachedViews.indexOf(i)
                    state.cachedViews.splice(index, 1)
                    break
                }
            }
        },
        DEL_OTHERS_VIEWS: (state, view) => {
            for (const [i, v] of state.visitedViews.entries()) {
                if (v.path === view.path) {
                    state.visitedViews = state.visitedViews.slice(i, i + 1)
                    break
                }
            }
            for (const i of state.cachedViews) {
                if (i === view.name) {
                    const index = state.cachedViews.indexOf(i)
                    state.cachedViews = state.cachedViews.slice(index, i + 1)
                    break
                }
            }
        },
        DEL_ALL_VIEWS: (state) => {
            state.visitedViews = []
            state.cachedViews = []
        }
    },
    actions: {
        addVisitedViews({
            commit
        }, view) {
            commit('ADD_VISITED_VIEWS', view)
        },
        delVisitedViews({
            commit,
            state
        }, view) {
            return new Promise((resolve) => {
                commit('DEL_VISITED_VIEWS', view)
                resolve([...state.visitedViews])
            })
        },
        delOthersViews({
            commit,
            state
        }, view) {
            return new Promise((resolve) => {
                commit('DEL_OTHERS_VIEWS', view)
                resolve([...state.visitedViews])
            })
        },
        delAllViews({
            commit,
            state
        }) {
            return new Promise((resolve) => {
                commit('DEL_ALL_VIEWS')
                resolve([...state.visitedViews])
            })
        }
    }
}
 
export default tagsView

5. 在store中的index.js中引入哦

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import tagsView from './modules/tagsView'
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    getters,
    actions,
    modules: {
        tagsView
    }
});