vueパッケージのカスタムコマンドのダイナミック表示title操作（オーバーフロー表示、オーバーフロー表示、非表示）

1506 ワード

vue パッケージコマンド title

vueプロジェクトの開発中、文字オーバーフローのdom元素マウスが浮遊している時にtitle文字を表示すると、カスタムコマンドをパッケージ化できます。
方法一、
コンポーネント内のコードは以下の通りです。


 directives: {
  title: {
   inserted(el) {
    const { clientWidth, scrollWidth, title } = el;
    if (!title && scrollWidth > clientWidth) el.title = el.innerText;
   }
  }
 },

使用:
＜artile v-title＞修繕した鉄拳修理の鉄拳修理の鉄拳修理の鉄拳修理の鉄拳修理の鉄拳
方法二、
またはマウスを入れてdom後の処理方法は以下の通りです。


  titeEnter(e) {
   const target = e.target;
   const { clientWidth, scrollWidth, title } = target;
   if (!title && scrollWidth > clientWidth) target.title = target.innerText;
  },

使用:
＜articale@mouseenter=「titleEnter」修理の鉄拳修理の鉄拳修理の鉄拳修理の鉄拳修理の鉄拳修理の鉄拳（/articale）
補足知識：vueページのテキストが長すぎて表示されます。この項目はvue＋element UIを使用して、リストページはある列のスタイルを修正します。この列のテキストは長すぎて、表の中で自動的に改行します。テーブルを大きくして、ページの美観に影響します。必要なのはテキストを長さ以上に表示させることです。マウスを移動して全文を表示します。ネット上で使用できます。cel-styleの修正ですが、私のwebstormにはこの属性の提示がありません。しかし、row-style属性は明らかに修正行のスタイルです。その後、このような属性値があれば完璧に解決できます。

似たような需要があります。テキストが長すぎて表示されます。マウスを上に移動した後、全文を表示します。この属性の上にスタイルを追加できます。style=「text-overflow:ellipsi」overflow:hiddenを追加します。title="item 2 modelName"属性と値は、この問題を解決することができます。

以上のこのvueパッケージのカスタムコマンドの動的表示title操作（オーバーフロー表示、オーバーフロー表示ではない）は、小編集が皆さんに共有しているすべての内容です。

AdvincdDataGrid選択行のすべてのデータを取得しました。

vuexリフレッシュデータ消失問題を解決します。