Vue 鼠标移入移出效果 控制显隐

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

需求是：鼠标移到 A 元素，显示 B 元素；且鼠标移入 B 元素，可以滑动滚轮查看内容。当鼠标移除后，再次移入查看 B 的内容，滚轮恢复到顶部。

效果展示：http://mercwang.gitee.io/ziyu

样式：

<style>
        #root{
            width: 1000px;
            margin: 100px auto;
        }
        .element-a{
            width: 100px;
            height: 25px;
            font-size: 20px;
            color: darkblue;
        }
        .element-a:hover{
            cursor: pointer;
        }
        .elementB-wrap{
            width: 50rem;
            height: 8rem;
            overflow-x: hidden;
        }
        .elementB {
            padding: 0.75rem;
            width: 50rem;
            height: 8rem;
            overflow-y: scroll;
            overflow-x: hidden;
            font-size: 1rem;
            color: rgb(73, 128, 136);
            position: absolute;
            border: rgb(193, 230, 234) 1px solid;
            background: rgb(210, 236, 240);
            border-radius: 10px;
        }
    </style>

引入了 jQuery 和 Vue

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

准备好两个元素：

<div id="root">
    <div class="element-a" @mouseover="elementBShow()" @mouseleave="elementBHidden()">
        <p>显示内容</p>
    </div>

    <div class="elementB-wrap">
        <div id="elementB" class="elementB" v-show="ifShowB" v-html="content"
             @mouseover="elementBMouseOver" @mouseleave="elementBMouseLeave"></div>
    </div>
</div>

js：

<script type="text/javascript">
    let vm = new Vue({
        el: '#root',
        data: {
      ifShowB: false,
      content: "<div>在Fetch<span> 中有四个基本概念，他们分别是 <strong>Headers</strong>、<strong>Request</strong> 、<strong>Response</strong> 和 <strong>Body</strong>。为了更好的理解" +
                " </span><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API\" class=\"bi-link\">Fetch</a>，" +
                "我们需要对这些概念做一个简单的了解。</div>" +
                "<div data-type=\"p\">在一个完整的 <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP\" class=\"bi-link\">HTTP</a> " +
                "请求中，其实就已经包含了这四个概念。请求中有请求头和请求体，响应中有响应头和响应体。所以我们有必要了解这些概念。</div>" +
                "<div>在Fetch<span> 中有四个基本概念，他们分别是 <strong>Headers</strong>、<strong>Request</strong> 、<strong>Response</strong> 和 <strong>Body</strong>。为了更好的理解\" +\n" +
        "\t\t\t\t\" </span><a target=\\\"_blank\\\" rel=\\\"noopener noreferrer nofollow\\\" href=\\\"https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API\\\" class=\\\"bi-link\\\">Fetch</a>，\" +\n" +
        "\t\t\t\t\"我们需要对这些概念做一个简单的了解。</div>\" +\n" +
        "\t\t\t\t\"<div data-type=\\\"p\\\">在一个完整的 <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer nofollow\\\" href=\\\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP\\\" class=\\\"bi-link\\\">HTTP</a> \" +\n" +
        "\t\t\t\t\"请求中，其实就已经包含了这四个概念。请求中有请求头和请求体，响应中有响应头和响应体。所以我们有必要了解这些概念。</div>",
      BFocused: false,
        },
        methods: {
      elementBShow() {
        this.ifShowB = true;

      },

      elementBHidden() {
        //清除滚动条距离顶部高度
        $('#elementB').scrollTop(0);
        if (!this.BFocused) {
          this.ifShowB = false;
        } else
          this.ifShowB = true;
      },

      //鼠标移入设置案件摘要为focus状态
      elementBMouseOver() {
        this.ifShowB = true;
        this.BFocused = true;
      },

      elementBMouseLeave() {
        //清除滚动条距离顶部高度
        $('#elementB').scrollTop(0);
        this.BFocused = false;
        this.ifShowB = false;
      }
        }
    })

</script>

showHidden.png