如何仅在鼠标悬停时在树节点的右端显示一个小图标

Posted 2023-02-23

【中文标题】如何仅在鼠标悬停时在树节点的右端显示一个小图标

【英文标题】：How to show a small icon on right end of the tree node only on mouse over

【发布时间】：2019-04-07 07:59:46

【问题描述】：

我试图在同一树节点的鼠标悬停时在树节点上显示一个图标。

Vue.component('tab', 

props:[],
data() 
    return
        data: [
          label: 'Level one 1',
          children: [
            label: 'Level two 1-1'
          ]
        , 
          label: 'Level one 2',
          children: [
            label: 'Level two 2-1'
          , 
            label: 'Level two 2-2'
          ]
        , 
          label: 'Level one 3',
          children: [
            label: 'Level two 3-1'
          , 
            label: 'Level two 3-2'
          ]
        ],
    defaultProps: 
      children: 'children',
      label: 'label'
   
 
,  
methods: 
,
template: `<el-tree :data=data :props="defaultProps"></el-tree>`
)

var vm=new Vue(
  el: '#app',
)

应该可以看到一个小图标，如下图所示。

这是小提琴：https://jsfiddle.net/8hdm2ykb/

【问题讨论】：

看起来您正在使用 3rd 方库来显示该树，请参阅他们的文档以了解如何设置它的样式。如果这不可行，您也许可以在您的应用中覆盖 tree-node-class:hover 的全局样式。

@TommyF：您的建议是对的，但我认为如果没有示例，这并不是很有帮助

【参考方案1】：

在您的 CSS 中添加以下内容

.el-tree-node__content:hover 
    background-image: url(https://i.imgur.com/RZfgbVH.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px 100%;  
 

https://jsfiddle.net/8hdm2ykb/12/

将 background-image 替换为您要显示的图像，并将 background-size 设置为您自己的要求。