Vue jsで使用している要素のUIタブのマウスオーバーまたはホバーイベント

Question

タブ上のマウスオーバーまたはホバーイベントのツールチップを表示したいとします。 Vue jsでそれを行う方法。私のタブはel-tab-paneにmouseoverイベントを追加するためにfine.howを操作していますか？

<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> 
    <el-tab-pane 
     v-for="(item, index) in editableTabs" 
     :key="item.name" 
     :label="item.title" 
     :name="item.name" 
     > 
     {{item.content}} 
    </el-tab-pane> 
</el-tabs> 

Answer 1

私は、Element UIについての詳細を知りませんが、一般的には：

<el-tab-pane title="Tooltip"> 

は、そうでなければ、あなたが登録できます。

は、通常のブラウザのツールチップについて、あなたはtitle属性を使用することができますmouseoverイベントのイベントリスナー：

<el-tab-pane @mouseover.native="..."> 

Answer 2

私はフィドルを作成しましたあなたがツールチップを表示するための要素やクラスを追加するv-on:mouseoverでのEventListenerを追加することができますhttps://jsfiddle.net/azfpL7on/1/

が、私はCSSのようなホバーとツールチップを処理できるようにする方が良いだろうと思う：それは私はあなたが達成しようとしている何を考えてい私の例。しかし私はvueデータとv-forを使っていました。これはあなたのコードスニペットにどのように見えるか

：

<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> 
    <el-tab-pane 
     v-for="(item, index) in editableTabs" 
     :key="item.name" 
     :label="item.title" 
     :name="item.name" 
     > 
      {{item.content}} 
      <span class="tooltiptext">{{ item.tooltip }}</span> <!-- New! --> 
    </el-tab-pane> 
</el-tabs> 

Answer 3

タブだけスロットにエル・ツールチップを入れ、スコープスロットラベルを提供します。ここ

var Main = { 
 
    data() { 
 
     return { 
 
     editableTabsValue2: '2', 
 
     editableTabs2: [{ 
 
      title: 'Tab 1', 
 
      name: '1', 
 
      content: 'Tab 1 content' 
 
     }, { 
 
      title: 'Tab 2', 
 
      name: '2', 
 
      content: 'Tab 2 content' 
 
     }], 
 
     tabIndex: 2 
 
     } 
 
    }, 
 
    methods: { 
 
     addTab(targetName) { 
 
     let newTabName = ++this.tabIndex + ''; 
 
     this.editableTabs2.push({ 
 
      title: 'New Tab', 
 
      name: newTabName, 
 
      content: 'New Tab content' 
 
     }); 
 
     this.editableTabsValue2 = newTabName; 
 
     }, 
 
     removeTab(targetName) { 
 
     let tabs = this.editableTabs2; 
 
     let activeName = this.editableTabsValue2; 
 
     if (activeName === targetName) { 
 
      tabs.forEach((tab, index) => { 
 
      if (tab.name === targetName) { 
 
       let nextTab = tabs[index + 1] || tabs[index - 1]; 
 
       if (nextTab) { 
 
       activeName = nextTab.name; 
 
       } 
 
      } 
 
      }); 
 
     } 
 
     
 
     this.editableTabsValue2 = activeName; 
 
     this.editableTabs2 = tabs.filter(tab => tab.name !== targetName); 
 
     } 
 
    } 
 
    } 
 
var Ctor = Vue.extend(Main) 
 
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.0.11/lib/theme-chalk/index.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//unpkg.com/vue/dist/vue.js"></script> 
 
<script src="//unpkg.com/element-ui@2.0.11/lib/index.js"></script> 
 
<div id="app"> 
 
<div style="margin-bottom: 20px;"> 
 
    <el-button size="small" @click="addTab(editableTabsValue2)"> 
 
    add tab 
 
    </el-button> 
 
</div> 
 
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab"> 
 
    <el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :label="item.title" :name="item.name"> 
 
    <el-tooltip slot="label" :content="item.title"><span>{{item.title}}</span></el-tooltip> 
 
    {{item.content}} 
 
    </el-tab-pane> 
 
</el-tabs> 
 
</div>

デモ：jsFiddle