Question

我想在标签上显示悬停或鼠标悬停事件的工具提示。如何在Vue js中完成。我的标签工作正常。如何在el-tab-pane中添加mouseover事件？

 <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的细节，但总的来说：

对于普通的浏览器工具提示，您可以使用title属性：

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

否则，您可以为mouseover事件注册一个事件监听器，如下所示：

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

Answer 2

我做了一个小提琴，做了我认为你想要实现的目标：https://jsfiddle.net/azfpL7on/1/

你可以添加一个带有v-on:mouseover的eventlistener来添加一个元素或类来显示工具提示，但我认为让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

标签提供了作用域标签，只需将el-tooltip放入插槽即可。

＆＃13;

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')

＆＃13;

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

＆＃13;

<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>

＆＃13;

此处的演示：jsFiddle

使用Vue js在元素UI选项卡中进行鼠标悬停或悬停事件

3 个答案: