实现定制化的title弹框，并引入编辑器-基础-封面设置窗口。

src/components/tableSelect2.vue

@@ -52,7 +52,7 @@
             <div v-if="sub.type=='image'" class="list-img">
               <img :src="item[sub.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
             </div>
-            <span class="ellipsis" v-else>{{ item[sub.key] }}</span>
+            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{ item[sub.key] }}</span>
           </span>
         </div>
       </div>
@@ -98,7 +98,7 @@
             <div v-if="sub.type=='image'" class="list-img">
               <img :src="item[sub.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
             </div>
-            <span class="ellipsis" v-else>{{item[sub.key]}}</span>
+            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
           </span>
         </div>
       </div>
@@ -295,7 +295,7 @@ export default {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  max-width: 200px;
+  width: 100%;
   display: inline-block;
 }
 
@@ -455,6 +455,7 @@ export default {
         }
         &:nth-of-type(3) {
           width: calc(316px - 116px);
+          padding-right: 50px;
         }
         &:nth-of-type(4) {
           width: calc(416px - 316px);

src/directives/vTitle.js

@@ -0,0 +1,77 @@
+import Vue from 'vue'
+
+Vue.directive('title', {
+  bind: function (el, binding) {
+    if (!binding.value) {
+      return
+    }
+    let timerId = null
+    let isShowTitle = false
+    let titleNode = null
+    el.addEventListener('mousemove', function(e) {
+      if (!isShowTitle) {
+        clearTimeout(timerId)
+        timerId = setTimeout(() => {
+          isShowTitle = true
+
+          titleNode = document.createElement('div')
+
+          titleNode.style.position = 'fixed',
+          titleNode.style.zIndex = 100,
+          titleNode.style.backgroundColor = '#191A1C'
+          titleNode.style.borderRadius = '2px'
+          titleNode.style.border = '1px solid rgba(151, 151, 151, 0.2)'
+          titleNode.style.padding = '2px 6px'
+          titleNode.style.fontSize = '12px'
+          titleNode.style.color = 'rgba(255, 255, 255, 0.6)'
+          titleNode.innerText = binding.value
+          titleNode.style.left = e.clientX + 11 + 'px'
+          titleNode.style.top = e.clientY + 18 + 'px'
+
+          document.body.appendChild(titleNode)
+
+          if (e.clientX + 11 + titleNode.offsetWidth > document.documentElement.clientWidth) {
+            titleNode.style.left = document.documentElement.clientWidth - titleNode.offsetWidth + 'px'
+          }
+          if (e.clientY + 18 + titleNode.offsetHeight > document.documentElement.clientHeight) {
+            titleNode.style.top = document.documentElement.clientHeight - titleNode.offsetHeight + 'px'
+          }
+        }, 500);
+      }
+    }, {
+      passive: false,
+    })
+    el.addEventListener('mouseleave', function () {
+      if (!isShowTitle) {
+        clearTimeout(timerId)
+      } else {
+        isShowTitle = false
+        document.body.removeChild(titleNode)
+      }
+    })
+    el.addEventListener('mousedown', function () {
+      if (!isShowTitle) {
+        clearTimeout(timerId)
+      } else {
+        isShowTitle = false
+        document.body.removeChild(titleNode)
+      }
+    })
+    el.addEventListener('keydown', function () {
+      if (!isShowTitle) {
+        clearTimeout(timerId)
+      } else {
+        isShowTitle = false
+        document.body.removeChild(titleNode)
+      }
+    })
+    el.addEventListener('scroll', function () {
+      if (!isShowTitle) {
+        clearTimeout(timerId)
+      } else {
+        isShowTitle = false
+        document.body.removeChild(titleNode)
+      }
+    })
+  },
+})

src/pages/Edit.vue

@@ -19,6 +19,10 @@ body,
   width: 100%;
   height: 100%;
   overflow: hidden;
+
+  // 形成层叠上下文
+  position: relative;
+  z-index: 0;
 }
 body {
   margin: 0;

src/pages/edit.js

@@ -5,6 +5,7 @@ import router from '../router'
 import store from '../Store'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
+import '@/directives/vTitle.js'
 
 Vue.use(Viewer,{
   defaultOptions: {