Las instrucciones personalizadas en Vue y ElementUI implementan el criterio de que el contenido del texto excede los puntos suspensivos de visualización y el mensaje el-tooltip, y deshabilita el-tooltip si no excede el límite.

1. Requisitos del producto

1. si excede el ancho entonces 显示省略号y pase el cursortooltip提示
   
2. Si no hay exceso, es decir, no se muestran puntos suspensivos, entonces不要tooltip提示

De hecho, el requisito principal del producto es eliminar el mensaje de información sobre herramientas que no muestra puntos suspensivos, porque se ha mostrado por completo y el mensaje es redundante.

2. Análisis

Debido a que mi proyecto es muy grande, sin contar el recorrido, puede haber más de 100 archivos vue con indicaciones de redacción publicitaria de el-tootip, y puede haber cientos de lugares que deben modificarse en total, así que pensé en los siguientes métodos.

1. Existe un método global montado en Vue.prototype, pero es difícil de implementar después de probarlo, no se pueden obtener muchas cosas y también implica el problema de no poder obtener el DOM de forma asincrónica (la página no se carga durante la ejecución). ). excluir
2. Filtro global de Vue, pero Vue3 parece no tener tal cosa, por lo que está excluido.
3. 自定义指令. Echa un vistazo a la breve descripción del mismo en el sitio web oficial 2.0.

Además de las directivas integradas predeterminadas (v-model y v-show) de la funcionalidad principal, Vue también permite el registro de directivas personalizadas. Tenga en cuenta que en Vue2.0, la forma principal de reutilización y abstracción de código son los componentes. Sin embargo, en algunos casos, aún es necesario realizar operaciones de bajo nivel en elementos DOM ordinarios, en cuyo caso se utilizan directivas personalizadas.

Debido a que la única forma que se me ocurre para determinar si se excede el ancho es a través de 操作DOM判断, no podría ser más apropiada.

3. Implementación del código

plantillaplantilla

<el-tooltip
	content="" v-showtip
	placement="top-start">
	<span
		class="value copy_btn">
		<span class="ellipse-text">{
   
   { item.hostname || '--' }}</span>
	</span>
</el-tooltip>

CSS parcial

.value {
    
    
   flex: 1; // 核心 上级元素flex布局，flex1后可获取真实宽度判断
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .ellipse-text{
    
    } // 目前什么内容都没有，方便标识而已

Registro global JS de instrucciones personalizadas de Vuev-showtip :

1. Crear nuevos directorios.js globalmente

const compareWidth = (el) => {
    
    
  // 如果没有超出宽度，即子<父 则移除tooltip
  if (el.querySelector('.ellipse-text') && el.querySelector('.ellipse-text').offsetWidth < el.offsetWidth) {
    
    
    const copyEl = el.parentNode; // 获取到目标节点的父节点
    const copySpan = el.querySelector('.ellipse-text'); // 获取到目标节点的子节点，即纯粹的span标签文案
    el.parentNode.removeChild(el); // 移除带有el-tooltip组件的节点
    copyEl.appendChild(copySpan); // 将纯粹的span标签文案整体追加到目标节点的父节点
  }
};
export default (Vue) => {
    
    
  // 注册一个全局自定义指令 `showtip`
  Vue.directive('showtip', {
    
    
  	// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    bind: (el, binding) => {
    
    
    // bind的时候无法获取到已经带有ajax数据的DOM元素，宽度为0
    },
    // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    inserted: (el) => {
    
    
      compareWidth(el); // 可以获取到ajax数据的DOM元素，即真实的宽度
    },
    // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
    update: (el) => {
    
    
      compareWidth(el); // 可以获取到ajax数据的DOM元素，即真实的宽度
    },
  });
};

2. Registro de llamadas en main.js

import Vue from 'vue';
import initDirectives from '@/utils/directives';

initDirectives(Vue); // Vue全局自定义指令

Finalmente, es realmente cómodo usar directivas personalizadas en componentes.