vue项目把鼠标放在上面显示消息

ゞ浴缸里的玫瑰 2023-10-10 08:14 61阅读 0赞

### **需求如下** ###

1、vue项目（一般都用到了element-ui框架）

2、把鼠标放在上面显示消息

3、这个消息框要美化

### **实现的效果** ###

![20190924094304510.gif][]

## **方案一、****使用v-bind:title=""** ##

**1、如果是方法赋值：v-bind:title="\{ \{app\}\}"**

**2、如果是变量赋值：v-bind:title="fz(1)"**

*注意一点：如果是方法的话，方法里面要有返回值*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

***不好的地方：弹框很原始没有效果***

## **方案二、**[Tooltip 文字提示][Tooltip] ##

[这部分的教程点这个][Tooltip]

**1、如果弹框是常量，不变的文字，那么参考教程就可以了**

**2、如果是变量**

<el-tooltip  placement="bottom" effect="light">
                     <div slot="content" v-html="{
       {app}}"></div>
                    <el-button class="item" style="background-color:#7ac0ae"></el-button>
                  </el-tooltip>

**2、如果是方法的返回值**

<el-tooltip  placement="bottom" effect="light">
                     <div slot="content" v-html="showData(1)"></div>
                    <el-button class="item" style="background-color:#7ac0ae"></el-button>
                  </el-tooltip>

# #

*注意一点：如果是方法的话，方法里面要有返回值*

*![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]*

[20190924094304510.gif]: https://img-blog.csdnimg.cn/20190924094304510.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190924093631320.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3,size_16,color_FFFFFF,t_70
[Tooltip]: https://element.eleme.cn/#/zh-CN/component/tooltip
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190924094013937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3,size_16,color_FFFFFF,t_70