mouseOver和mouseLeave事件在vue中的应用

目标：利用mouseOver和mouseLeave实现鼠标移入和移出时的不同效果。

初始状态：

 点击最右侧按钮后的效果：（具体实现方法见下篇文章）

 要完成的效果：在“已完成编辑 √”状态时，鼠标移入，出现如下效果，移出时恢复

 具体实现：

template中：

<div class="resultType " ref="paintOne" :style="activeOne">
                        <span class="resultTypeTitle">我的偶像</span>
                        <span class="paintWord" v-show="isShowPaintWordOne">
                            我的偶像是千玺
                        </span>
                        <span
                            class="paintWordFinish"
                            @mouseleave="mouseLeaveOne"
                            @mouseover="mouseOverOne"
                            v-show="isShowPaintWordFinishOne"
                        >
                            偶像最棒&nbsp;&nbsp;&nbsp;√
                        </span>
                        <img
                            src="./theme/img/editWhite.png"
                            @click="finishPaintOne"
                            v-show="isShowPaintWordOne"
                        />
                        <img
                            src="./theme/img/editBlue.png"
                            @click="finishPaintRecoverOne"
                            v-show="isShowPaintWordFinishOne"
                        />
</div>
     <div class="resultTypeContent" ref="contentOne">
                    他是易烊千玺，他很棒！
     </div>

script的data中：

export default {
    data() {
        return {
            activeOne:'',
               }
            }
          }

script的methods中：

 mouseOverOne() {
       this.activeOne =
      'border: 1px solid rgba(107,195,255,0.80); box-shadow: #1a446a 0px 0px 30px inset;';
       // 操作dom 获取p标签改变其样式
       var paintOne = this.$refs.paintOne;
        this.$refs.contentOne.style.display = 'block';
        },
        // 鼠标移出
        mouseLeaveOne() {
            this.activeOne = '';
            this.$refs.paintOne.style = '';
            this.$refs.contentOne.style.display = 'none';
        },

样式就不展开写了。

这样就利用mouseOver和mouseLeave实现了鼠标移入和移出时的不同效果。