一个后台管理常常需要一个标签页来管理已经打开的页面，这里我们单独写一个组件来展示标签页数组。
该标签页组件只做展示不涉及操作数据。标签页数组可记录已打开的数组，还能定义什么页面需要缓存，是一个重要的功能呢。
首先，建立一个TagList.vue组件，里面代码如下
```js
<template>
<div
? ? class="tag-list-cp-container"
? ? ref="TagListRef">
? ? <div
? ? ? ? class="left"
? ? ? ? @wheel="handleScroll">
? ? ? ? <el-scrollbar
? ? ? ? ? ? ref="ElScrollbarRef"
? ? ? ? ? ? height="100%">
? ? ? ? ? ? <draggable
? ? ? ? ? ? ? ? class="scrollbar-container"
? ? ? ? ? ? ? ? item-key="sign"
? ? ? ? ? ? ? ? v-model="tagListTrans">
? ? ? ? ? ? ? ? <template #item="{element}">
? ? ? ? ? ? ? ? ? ? <div
? ? ? ? ? ? ? ? ? ? ? ? :class="{
? ? ? ? ? ? ? ? ? ? ? ? ? ? 'item':true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? 'active':dataContainer.activeSign==element.sign,
? ? ? ? ? ? ? ? ? ? ? ? }"
? ? ? ? ? ? ? ? ? ? ? ? @click="handleClick(element)"
? ? ? ? ? ? ? ? ? ? ? ? @contextmenu.prevent="e=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? handleClickContext(e,element);
? ? ? ? ? ? ? ? ? ? ? ? }">
? ? ? ? ? ? ? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? ? ? ? ? ? ? class="sign icon-sign"
? ? ? ? ? ? ? ? ? ? ? ? ? ? v-if="element.showTagIcon && element.iconName"
? ? ? ? ? ? ? ? ? ? ? ? ? ? :style="'width: 15px;min-width:15px;height: 15px;'"
? ? ? ? ? ? ? ? ? ? ? ? ? ? :name="element.iconName"></SvgIcon>
? ? ? ? ? ? ? ? ? ? ? ? <div
? ? ? ? ? ? ? ? ? ? ? ? ? ? class="sign"
? ? ? ? ? ? ? ? ? ? ? ? ? ? v-else-if="dataContainer.activeSign==element.sign">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? {{element.title}}
? ? ? ? ? ? ? ? ? ? ? ? <div
? ? ? ? ? ? ? ? ? ? ? ? ? ? v-if="!element.fixed"
? ? ? ? ? ? ? ? ? ? ? ? ? ? @click.stop="handleRemove(element)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? class="bt">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :style="'width:12px;height:12px;'"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name="times"></SvgIcon>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div
? ? ? ? ? ? ? ? ? ? ? ? ? ? v-if="element.isCache"
? ? ? ? ? ? ? ? ? ? ? ? ? ? class="cache"></div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </draggable>
? ? ? ? </el-scrollbar>
? ? </div>
? ? <div class="bt-list">
? ? ? ? <div
? ? ? ? ? ? class="bt"
? ? ? ? ? ? @click="handleOptionClick(5)">
? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? :style="'width:15px;height:15px;'"
? ? ? ? ? ? ? ? name="redo"></SvgIcon>
? ? ? ? </div>
? ? ? ? <div
? ? ? ? ? ? class="bt"
? ? ? ? ? ? @click="handleToLeft()">
? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? :style="'width:15px;height:15px;'"
? ? ? ? ? ? ? ? name="arrow-left"></SvgIcon>
? ? ? ? </div>
? ? ? ? <div
? ? ? ? ? ? class="bt"
? ? ? ? ? ? @click="handleToRight()">
? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? :style="'width:15px;height:15px;'"
? ? ? ? ? ? ? ? name="arrow-right"></SvgIcon>
? ? ? ? </div>
? ? </div>
? ? <div
? ? ? ? ref="RightOptionRef"
? ? ? ? class="right">
? ? ? ? <div
? ? ? ? ? ? @click="()=>{
? ? ? ? ? ? ? ? dataContainer.show_1 = !dataContainer.show_1;
? ? ? ? ? ? }"
? ? ? ? ? ? class="bt">
? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? :style="'width:20px;height:20px;'"
? ? ? ? ? ? ? ? name="icon-drag"></SvgIcon>
? ? ? ? </div>
? ? ? ? <div
? ? ? ? ? ? v-if="dataContainer.show_1"
? ? ? ? ? ? class="bt-list-container">
? ? ? ? ? ? <div
? ? ? ? ? ? ? ? v-if="dataContainer.tagList.length>1"
? ? ? ? ? ? ? ? class="item"
? ? ? ? ? ? ? ? @click="handleOptionClick(1)">
? ? ? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? ? ? :style="'width:16px;height:16px;color:#f86464;'"
? ? ? ? ? ? ? ? ? ? name="times"></SvgIcon>
? ? ? ? ? ? ? ? 关闭当前标签页
? ? ? ? ? ? </div>
? ? ? ? ? ? <div
? ? ? ? ? ? ? ? v-if="dataContainer.tagList.length>1"
? ? ? ? ? ? ? ? class="item"
? ? ? ? ? ? ? ? @click="handleOptionClick(2)">
? ? ? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? ? ? :style="'width:16px;height:16px;color:#f86464;'"
? ? ? ? ? ? ? ? ? ? name="borderverticle-fill"></SvgIcon>
? ? ? ? ? ? ? ? 关闭其他标签页
? ? ? ? ? ? </div>
? ? ? ? ? ? <div
? ? ? ? ? ? ? ? v-if="dataContainer.tagList.length>1"
? ? ? ? ? ? ? ? class="item"
? ? ? ? ? ? ? ? @click="handleOptionClick(3)">
? ? ? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? ? ? :style="'width:16px;height:16px;color:#f86464;'"
? ? ? ? ? ? ? ? ? ? name="arrow-left"></SvgIcon>
? ? ? ? ? ? ? ? 关闭左边标签页
? ? ? ? ? ? </div>
? ? ? ? ? ? <div
? ? ? ? ? ? ? ? v-if="dataContainer.tagList.length>1"
? ? ? ? ? ? ? ? class="item"
? ? ? ? ? ? ? ? @click="handleOptionClick(4)">
? ? ? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? ? ? :style="'width:16px;height:16px;color:#f86464;'"
? ? ? ? ? ? ? ? ? ? name="arrow-right"></SvgIcon>
? ? ? ? ? ? ? ? 关闭右边标签页
? ? ? ? ? ? </div>
? ? ? ? ? ? <div
? ? ? ? ? ? ? ? class="item re-bt"
? ? ? ? ? ? ? ? @click="handleOptionClick(5)">
? ? ? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? ? ? :style="'width:16px;height:16px;color:#0072E5;'"
? ? ? ? ? ? ? ? ? ? name="redo"></SvgIcon>
? ? ? ? ? ? ? ? 刷新当前标签页
? ? ? ? ? ? </div>
? ? ? ? ? ? <div
? ? ? ? ? ? ? ? class="item"
? ? ? ? ? ? ? ? @click="handleOptionClick(6)">
? ? ? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? ? ? :style="'width:16px;height:16px;color:#0072E5;'"
? ? ? ? ? ? ? ? ? ? name="expand-alt"></SvgIcon>
? ? ? ? ? ? ? ? 视图全屏(Esc键退出)
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <div
? ? ? ? v-if="dataContainer.show"
? ? ? ? :style="{
? ? ? ? ? ? '--location-x':`${dataContainer.location.x || 0}px`,
? ? ? ? ? ? '--location-y':`${dataContainer.location.y || 0}px`,
? ? ? ? }"
? ? ? ? class="bt-list-container">
? ? ? ? <div
? ? ? ? ? ? class="item"
? ? ? ? ? ? @click="handleSwitchCache()">
? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? :style="'width:16px;height:16px;'"
? ? ? ? ? ? ? ? name="switch"></SvgIcon>
? ? ? ? ? ? 切换缓存状态
? ? ? ? </div>
? ? ? ? <div
? ? ? ? ? ? class="item"
? ? ? ? ? ? @click="handleSwitchFixed()">
? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? :style="'width:16px;height:16px;'"
? ? ? ? ? ? ? ? name="nail"></SvgIcon>
? ? ? ? ? ? 切换固定状态
? ? ? ? </div>
? ? ? ? <div
? ? ? ? ? ? class="item re-bt"
? ? ? ? ? ? @click="handleRefresh()">
? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? :style="'width:16px;height:16px;color:#0072E5;'"
? ? ? ? ? ? ? ? name="redo"></SvgIcon>
? ? ? ? ? ? 刷新此标签页
? ? ? ? </div>
? ? ? ? <div
? ? ? ? ? ? class="item"
? ? ? ? ? ? @click="handleOptionClick(6)">
? ? ? ? ? ? <SvgIcon
? ? ? ? ? ? ? ? :style="'width:16px;height:16px;color:#0072E5;'"
? ? ? ? ? ? ? ? name="expand-alt"></SvgIcon>
? ? ? ? ? ? 视图全屏
? ? ? ? </div>
? ? </div>
</div>
</template>
<script>
/*
* 标签切换按钮组件
* 由外部指定数据
*/
import {
? ? defineComponent,ref,reactive,
? ? computed,onMounted,watch,toRef,
? ? onUnmounted,
? ? nextTick,
} from "vue";
import SvgIcon from "@/components/svgIcon/index.vue";
import draggable from 'vuedraggable';
export default {
? ? name: 'TagList',
? ? components: {
? ? ? ? SvgIcon,
? ? ? ? draggable,
? ? },
? ? props:{
? ? ? ? /**
? ? ? ? * 所显示的标签列表
? ? ? ? *? */
? ? ? ? /**
? ? ? ? * 一个tag例子的属性介绍
? ? ? ? */
? ? ? ? // {
? ? ? ? //? ? title:'标签一',? //标签标题
? ? ? ? //? ? sign:'/main/index',? //唯一标识
? ? ? ? //? ? fullPath:'/main/index',? //跳转地址，完整地址
? ? ? ? //? ? isCache:true,? //该标签页面是否缓存
? ? ? ? //? ? fixed:false,? //是否固定，不可删除
? ? ? ? // }
? ? ? ? tagList:{
? ? ? ? ? ? type:Array,
? ? ? ? ? ? default:()=>{
? ? ? ? ? ? ? ? return [];
? ? ? ? ? ? },
? ? ? ? },
? ? ? ? /** 当前活动的唯一标识 */
? ? ? ? activeSign:{
? ? ? ? ? ? type:[Number,String],
? ? ? ? ? ? default:0,
? ? ? ? },
? ? },
? ? emits:[
? ? ? ? 'onChange','onClick','onRemove','onOptionClick','onSwitchCache','onSwitchFixed',
? ? ? ? 'onRefresh',
? ? ],
? ? setup(props,{emit}){
? ? ? ? const ElScrollbarRef = ref(null);
? ? ? ? const TagListRef = ref(null);
? ? ? ? const RightOptionRef = ref(null);
? ? ? ? const dataContainer = reactive({
? ? ? ? ? ? tagList:toRef(props,'tagList'),
? ? ? ? ? ? activeSign:toRef(props,'activeSign'),
? ? ? ? ? ? show:false,
? ? ? ? ? ? location:{},
? ? ? ? ? ? show_1:false,
? ? ? ? });
? ? ? ? const otherDataContainer = {
? ? ? ? ? ? activeItem:null,
? ? ? ? };
? ? ? ? /** 用来排序转换的数组，由外部确定是否转换 */
? ? ? ? const tagListTrans = computed({
? ? ? ? ? ? get(){
? ? ? ? ? ? ? ? return dataContainer.tagList;
? ? ? ? ? ? },
? ? ? ? ? ? set(value){
? ? ? ? ? ? ? ? emit('onChange',value);
? ? ? ? ? ? },
? ? ? ? });
? ? ? ? /** 标签点击事件，向外部抛出 */
? ? ? ? function handleClick(item){
? ? ? ? ? ? emit('onClick',item);
? ? ? ? }
? ? ? ? /** 标签删除事件 */
? ? ? ? function handleRemove(item){
? ? ? ? ? ? emit('onRemove',item);
? ? ? ? }
? ? ? ? /** 操作事件 */
? ? ? ? function handleOptionClick(type){
? ? ? ? ? ? emit('onOptionClick',type);
? ? ? ? }
? ? ? ? /**
? ? ? ? * 鼠标滚动事件
? ? ? ? * 横向滚动标签页
? ? ? ? *? */
? ? ? ? function handleScroll(e){
? ? ? ? ? ? if(!ElScrollbarRef.value) return;
? ? ? ? ? ? /** shift + 鼠标滚轮可以横向滚动 */
? ? ? ? ? ? if(e.shiftKey) return;
? ? ? ? ? ? let el = ElScrollbarRef.value.wrapRef;
? ? ? ? ? ? let scrollLeft = el.scrollLeft;
? ? ? ? ? ? if(e.deltaY < 0){
? ? ? ? ? ? ? ? scrollLeft = scrollLeft - 30;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? scrollLeft = scrollLeft + 30;
? ? ? ? ? ? }
? ? ? ? ? ? el.scrollLeft = scrollLeft;
? ? ? ? }
? ? ? ? /**
? ? ? ? * 自动滚动到相应标签
? ? ? ? * 防止标签没在视区
? ? ? ? */
? ? ? ? function autoScroll(){
? ? ? ? ? ? nextTick(()=>{
? ? ? ? ? ? ? ? if(!ElScrollbarRef.value) return;
? ? ? ? ? ? ? ? let el = ElScrollbarRef.value.wrapRef;
? ? ? ? ? ? ? ? let target = el.querySelector('.item.active');
? ? ? ? ? ? ? ? if(!target) return;
? ? ? ? ? ? ? ? let rect = el.getBoundingClientRect();
? ? ? ? ? ? ? ? let rect_1 = target.getBoundingClientRect();
? ? ? ? ? ? ? ? if(rect_1.x < rect.x){
? ? ? ? ? ? ? ? ? ? // 表示在左边遮挡
? ? ? ? ? ? ? ? ? ? let scroll = rect.x - rect_1.x;
? ? ? ? ? ? ? ? ? ? el.scrollLeft = el.scrollLeft - scroll - 5;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if((rect_1.x + rect_1.width) > (rect.x + rect.width)){
? ? ? ? ? ? ? ? ? ? // 表示在右边遮挡
? ? ? ? ? ? ? ? ? ? let scroll = rect_1.x - (rect.x + rect.width);
? ? ? ? ? ? ? ? ? ? el.scrollLeft = el.scrollLeft + scroll + rect_1.width + 5;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? watch(toRef(props,'activeSign'),()=>{
? ? ? ? ? ? autoScroll();
? ? ? ? });
? ? ? ? onMounted(()=>{
? ? ? ? ? ? autoScroll();
? ? ? ? });
? ? ? ? /** 鼠标右击，展示自定义右击面板 */
? ? ? ? function handleClickContext(e,item){
? ? ? ? ? ? if(!TagListRef.value) return;
? ? ? ? ? ? let el = TagListRef.value;
? ? ? ? ? ? let el_1 = e.target;
? ? ? ? ? ? let rect = el.getBoundingClientRect();
? ? ? ? ? ? let rect_1 = el_1.getBoundingClientRect();
? ? ? ? ? ? let location = {
? ? ? ? ? ? ? ? x:rect_1.x - rect.x,
? ? ? ? ? ? ? ? y:rect_1.y - rect.y + rect_1.height,
? ? ? ? ? ? };
? ? ? ? ? ? dataContainer.location = location;
? ? ? ? ? ? dataContainer.show = true;
? ? ? ? ? ? otherDataContainer.activeItem = item;
? ? ? ? }
? ? ? ? /** 初始化隐藏事件 */
? ? ? ? function initHiddenEvent(){
? ? ? ? ? ? function callbackFn(e){
? ? ? ? ? ? ? ? dataContainer.show = false;
? ? ? ? ? ? }
? ? ? ? ? ? document.addEventListener('click', callbackFn);
? ? ? ? ? ? onUnmounted(()=>{
? ? ? ? ? ? ? ? document.removeEventListener('click', callbackFn);
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? initHiddenEvent();
? ? ? ? /**
? ? ? ? * 切换缓存状态
? ? ? ? * 由外部实现
? ? ? ? *? */
? ? ? ? function handleSwitchCache(){
? ? ? ? ? ? if(!otherDataContainer.activeItem) return;
? ? ? ? ? ? emit('onSwitchCache',otherDataContainer.activeItem);
? ? ? ? }
? ? ? ? /**
? ? ? ? * 切换固定状态
? ? ? ? * 由外部实现
? ? ? ? *? */
? ? ? ? function handleSwitchFixed(){
? ? ? ? ? ? if(!otherDataContainer.activeItem) return;
? ? ? ? ? ? emit('onSwitchFixed',otherDataContainer.activeItem);
? ? ? ? }
? ? ? ? /**
? ? ? ? * 刷新标签页
? ? ? ? * 由外部实现
? ? ? ? *? */
? ? ? ? function handleRefresh(){
? ? ? ? ? ? if(!otherDataContainer.activeItem) return;
? ? ? ? ? ? emit('onRefresh',otherDataContainer.activeItem);
? ? ? ? }
? ? ? ? /** 跳转到右侧 */
? ? ? ? function handleToRight(){
? ? ? ? ? ? let index = dataContainer.tagList.findIndex(item=>{
? ? ? ? ? ? ? ? return item.sign == dataContainer.activeSign;
? ? ? ? ? ? });
? ? ? ? ? ? if(index == -1) return;
? ? ? ? ? ? let target = dataContainer.tagList[index + 1];
? ? ? ? ? ? if(!target) return;
? ? ? ? ? ? handleClick(target);
? ? ? ? }
? ? ? ? /** 跳转到左侧 */
? ? ? ? function handleToLeft(){
? ? ? ? ? ? let index = dataContainer.tagList.findIndex(item=>{
? ? ? ? ? ? ? ? return item.sign == dataContainer.activeSign;
? ? ? ? ? ? });
? ? ? ? ? ? if(index == -1) return;
? ? ? ? ? ? let target = dataContainer.tagList[index - 1];
? ? ? ? ? ? if(!target) return;
? ? ? ? ? ? handleClick(target);
? ? ? ? }
? ? ? ? /** 初始化隐藏事件 */
? ? ? ? function initHiddenEvent_1(){
? ? ? ? ? ? function callbackFn(e){
? ? ? ? ? ? ? ? if(!RightOptionRef.value) return;
? ? ? ? ? ? ? ? if(!e || !e.target) return;
? ? ? ? ? ? ? ? if(RightOptionRef.value.contains(e.target)) return;
? ? ? ? ? ? ? ? dataContainer.show_1 = false;
? ? ? ? ? ? }
? ? ? ? ? ? document.addEventListener('click', callbackFn);
? ? ? ? ? ? onUnmounted(()=>{
? ? ? ? ? ? ? ? document.removeEventListener('click', callbackFn);
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? initHiddenEvent_1();
? ? ? ? return {
? ? ? ? ? ? dataContainer,
? ? ? ? ? ? handleClick,
? ? ? ? ? ? handleRemove,
? ? ? ? ? ? handleOptionClick,
? ? ? ? ? ? tagListTrans,
? ? ? ? ? ? handleScroll,
? ? ? ? ? ? ElScrollbarRef,
? ? ? ? ? ? handleClickContext,
? ? ? ? ? ? TagListRef,
? ? ? ? ? ? handleSwitchCache,
? ? ? ? ? ? handleSwitchFixed,
? ? ? ? ? ? handleRefresh,
? ? ? ? ? ? handleToRight,
? ? ? ? ? ? handleToLeft,
? ? ? ? ? ? RightOptionRef,
? ? ? ? };
? ? },
}
</script>
<style scoped lang="scss">
.tag-list-cp-container {
? ? height: 100%;
? ? width: 100%;
? ? padding: 0;
? ? box-sizing: border-box;
? ? display: flex;
? ? flex-direction: row;
? ? justify-content: space-between;
? ? align-items: center;
? ? color: var(--text-color);
? ? >.left{
? ? ? ? flex: 1 1 0;
? ? ? ? width: 0;
? ? ? ? height: 100%;
? ? ? ? :deep(.el-scrollbar__bar){
? ? ? ? ? ? &.is-horizontal{
? ? ? ? ? ? ? ? height: 5px !important;
? ? ? ? ? ? ? ? opacity: 0.5;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? :deep(.el-scrollbar__view){
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? ? :deep(.scrollbar-container){
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? justify-content: flex-start;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? width: fit-content;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? .item{
? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? ? ? display: flex;
? ? ? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? ? ? align-items: center;
? ? ? ? ? ? ? ? padding: 5px 8px;
? ? ? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? ? ? margin-left: 5px;
? ? ? ? ? ? ? ? font-size: 13px;
? ? ? ? ? ? ? ? height: 30px;
? ? ? ? ? ? ? ? width: max-content;
? ? ? ? ? ? ? ? border-radius: 3px;
? ? ? ? ? ? ? ? color: #606266;
? ? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? ? transition: all 0.2s;
? ? ? ? ? ? ? ? &:last-child{
? ? ? ? ? ? ? ? ? ? margin-right: 5px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? &.active{
? ? ? ? ? ? ? ? ? ? background-color: #5240ff30;
? ? ? ? ? ? ? ? ? ? color: #5240ff;
? ? ? ? ? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? ? ? ? ? box-shadow: inset 0 1px 4px #00000034;
? ? ? ? ? ? ? ? ? ? // border:1px solid rgb(196, 196, 196);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? background-color: #5240ff30;
? ? ? ? ? ? ? ? ? ? color: #5240ff;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? >.sign{
? ? ? ? ? ? ? ? ? ? width: 10px;
? ? ? ? ? ? ? ? ? ? height: 10px;
? ? ? ? ? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? ? ? ? ? background-color: #5240ff;
? ? ? ? ? ? ? ? ? ? margin-right: 5px;
? ? ? ? ? ? ? ? ? ? &.icon-sign{
? ? ? ? ? ? ? ? ? ? ? ? background-color: transparent;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? >.bt{
? ? ? ? ? ? ? ? ? ? width: fit-content;
? ? ? ? ? ? ? ? ? ? height: fit-content;
? ? ? ? ? ? ? ? ? ? display: flex;
? ? ? ? ? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? ? ? ? ? align-items: center;
? ? ? ? ? ? ? ? ? ? margin-left: 5px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? >.cache{
? ? ? ? ? ? ? ? ? ? width: 30%;
? ? ? ? ? ? ? ? ? ? max-width: 30px;
? ? ? ? ? ? ? ? ? ? min-width: 15px;
? ? ? ? ? ? ? ? ? ? height: 3px;
? ? ? ? ? ? ? ? ? ? border-radius: 999px;
? ? ? ? ? ? ? ? ? ? background-color: #5340ff34;
? ? ? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? ? ? bottom: 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? >.bt-list{
? ? ? ? display: flex;
? ? ? ? flex-direction: row;
? ? ? ? align-items: center;
? ? ? ? padding: 0 10px;
? ? ? ? box-sizing: border-box;
? ? ? ? border-left: 1px solid var(--border-color);
? ? ? ? box-shadow: inset 0 1px 4px #00000010;
? ? ? ? height: 100%;
? ? ? ? >*{
? ? ? ? ? ? margin: 0 10px 0 0;
? ? ? ? ? ? &:last-child{
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? >.bt{
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? transition: all 0.2s;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? color: #5240ff;
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? >.right{
? ? ? ? width: 40px;
? ? ? ? height: 100%;
? ? ? ? border-left: 1px solid var(--border-color);
? ? ? ? box-sizing: border-box;
? ? ? ? display: flex;
? ? ? ? flex-direction: row;
? ? ? ? justify-content: center;
? ? ? ? align-items: center;
? ? ? ? position: relative;
? ? ? ? box-shadow: inset 0 1px 4px #00000010;
? ? ? ? >.bt{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? transition: all 0.2s;
? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? color: #5240ff;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? >.bt-list-container{
? ? ? ? ? ? width: max-content;
? ? ? ? ? ? min-width: 150px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? z-index: 9;
? ? ? ? ? ? top: calc(100% + 0px);
? ? ? ? ? ? right: 5px;
? ? ? ? ? ? background-color: rgb(255, 255, 255);
? ? ? ? ? ? box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5);
? ? ? ? ? ? padding: 10px 0;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? border-radius: 2px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? transition: opacity 0.2s;
? ? ? ? ? ? font-size: 15px;
? ? ? ? ? ? >.item{
? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? ? ? width: auto;
? ? ? ? ? ? ? ? min-width: max-content;
? ? ? ? ? ? ? ? transition: all 0.2s;
? ? ? ? ? ? ? ? padding: 13px 15px;
? ? ? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? ? ? display: block;
? ? ? ? ? ? ? ? color: #6b7386;
? ? ? ? ? ? ? ? text-align: left;
? ? ? ? ? ? ? ? display: flex;
? ? ? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? ? ? align-items: center;
? ? ? ? ? ? ? ? justify-content: flex-start;
? ? ? ? ? ? ? ? >*{
? ? ? ? ? ? ? ? ? ? margin-right: 10px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? box-shadow: inset 0 1px 4px #0000001f;
? ? ? ? ? ? ? ? ? ? background-color: #fef0f0;
? ? ? ? ? ? ? ? ? ? color: #f56c6c;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? &.re-bt{
? ? ? ? ? ? ? ? ? ? background-color: rgba(194, 224, 255, 0.5);
? ? ? ? ? ? ? ? ? ? color: #0072E5;
? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? background-color: rgba(194, 224, 255, 0.5);
? ? ? ? ? ? ? ? ? ? ? ? color: #0072E5;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? >.bt-list-container{
? ? ? ? width: max-content;
? ? ? ? min-width: 150px;
? ? ? ? position: absolute;
? ? ? ? z-index: 9;
? ? ? ? top: var(--location-y);
? ? ? ? left: var(--location-x);
? ? ? ? background-color: rgb(255, 255, 255);
? ? ? ? box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5);
? ? ? ? padding: 10px 0;
? ? ? ? box-sizing: border-box;
? ? ? ? border-radius: 2px;
? ? ? ? overflow: hidden;
? ? ? ? opacity: 1;
? ? ? ? transition: opacity 0.2s;
? ? ? ? font-size: 15px;
? ? ? ? >.item{
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? width: auto;
? ? ? ? ? ? min-width: max-content;
? ? ? ? ? ? transition: all 0.2s;
? ? ? ? ? ? padding: 13px 15px;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? display: block;
? ? ? ? ? ? color: #6b7386;
? ? ? ? ? ? text-align: left;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? justify-content: flex-start;
? ? ? ? ? ? >*{
? ? ? ? ? ? ? ? margin-right: 10px;
? ? ? ? ? ? }
? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? box-shadow: inset 0 1px 4px #0000001f;
? ? ? ? ? ? ? ? background-color: #fef0f0;
? ? ? ? ? ? ? ? color: #f56c6c;
? ? ? ? ? ? }
? ? ? ? ? ? &.re-bt{
? ? ? ? ? ? ? ? background-color: rgba(194, 224, 255, 0.5);
? ? ? ? ? ? ? ? color: #0072E5;
? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? background-color: rgba(194, 224, 255, 0.5);
? ? ? ? ? ? ? ? ? ? color: #0072E5;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
</style>
```
这里我们使用了el-scrollbar组件来管理滚动容器，SvgIcon来管理icon的展示，vuedraggable来管理拖拽排序。
该组件接受的数据源为 tagList,activeSign。
tagList：标签的数组。
activeSign：当前活动的标签的sign字符串，每个标签是一个对象，对象有sign唯一标识属性。
组件核心思想：该组件使用外部数据源保证组件灵活性，自身集合多种操作但不处理，抛出给外部处理。只做数据的展示。
[源码地址](https://github.com/wurencaideli/dumogu-admin/blob/master/web/src/layout/main/components/TagList.vue)
[DEMO](https://admin.dumogu.top/main/index)