1.tagView标签新增可拖动功能

loulijun2021

2023-01-30 ef561e204ee6fd7df25477b456b0d466b026550e

1.tagView标签新增可拖动功能

 src/layout/components/TagsView/index.vue

@@ -1,21 +1,23 @@
<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.path"
        :class="isActive(tag)?'active':''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item"
        :style="{background:isActive(tag)?$store.state.settings.theme:'',border:isActive(tag)?'1px solid'+$store.state.settings.theme:''}"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
        @contextmenu.prevent.native="openMenu(tag,$event)"
      >
        {{ tag.title }}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
      <draggable :list="visitedViews" animation="300">
        <router-link
          v-for="tag in visitedViews"
          ref="tag"
          :key="tag.path"
          :class="isActive(tag)?'active':''"
          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
          tag="span"
          class="tags-view-item"
          :style="{background:isActive(tag)?$store.state.settings.theme:'',border:isActive(tag)?'1px solid'+$store.state.settings.theme:''}"
          @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
          @contextmenu.prevent.native="openMenu(tag,$event)"
        >
          {{ tag.title }}
          <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
        </router-link>
      </draggable>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)">刷新</li>
@@ -48,9 +50,9 @@
import path from 'path'
import { getCookie } from '@/utils/auth'
import $ from 'jquery'

import draggable from 'vuedraggable'
export default {
  components: { ScrollPane },
  components: { ScrollPane, draggable },
  data() {
    return {
      visible: false,