Vue 封装公共组件-鼠标经过显示悬浮框

组件化开发的思想在Vue中非常重要。有时候，有一个功能在项目的很多地方都需要用到.这个时候可以考虑封装一个公共组件，在需要用到的地方引入。这样的好处是减少代码的冗余度，重复利用，提高效率。

这次要简单封装一个鼠标经过时，显示悬浮框的公共组件，完成效果如下

 

公共组件可以放在components文件夹下，views下是一些普通的组件。

 

 

 首先，我们在components下定义一个叫做myToolTip的Vue公共组件，在view下定义一个叫做tooltip的组件，myToolTip需要在tooltip中引入，因此可以看作是tooltip的子组件。

先来简单编写一下myToolTip组件的代码。首先是定义了底下文字的插槽，我们需要什么文字进行替换即可。下方是定义了动态的style样式，我们引入的时候可以传入需要的属性值。具名插槽就是悬浮框文字。

<template>

    <div style="position: relative">

        <div class="main">

            <slot></slot>

        </div>

        <div class="tip" :style="{width: width + 'px'}" v-show="isShow">

            <div class="arrow"></div>

            <slot name="content"></slot>

        </div>    

    </div>

</template>

既然是二者是父子组件的关系，那么就需要在myToolTip这个子组件里面定义props属性

props: {
        width: {
            type: Number
        },
        isShow: {
            type: Boolean,         
        }
    }

myToolTip的完整代码如下

<template>
    <div style="position: relative">
        <div class="main">
            <slot></slot>
        </div>
        <div class="tip" :style="{width: width + 'px'}" v-show="isShow">
            <div class="arrow"></div>
            <slot name="content"></slot>
        </div>     
    </div>
</template>
<script>
export default {
    name: "myToolTip",
    data() {
        return {
        }
    },
    props: {
        width: {
            type: Number
        },
        isShow: {
            type: Boolean,         
        }
    }
}
</script>
<style scoped>
.main {
    position: absolute;
    left: 50%;
}
.tip {
    position: absolute;
    left: 41%;
    width: 30px;
    height: 50px;
    top: -60px;
    background: gray;
}
.arrow{
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.5);
    transform: rotate(180deg);
    -webkit-transform:rotate(180deg);
    position: absolute;
    bottom: -20px;
    left: 46%;
}
</style>

接下来，在我们需要用到这个组件的时候，引入即可。

tooltip.vue的完整代码

<template>
    <div>
        <myToolTip style="margin-top: 100px"
                   :width='toolWidth' 
                   @sonToFather="test"
                   :isShow="isShow1">
            <span @mouseenter="setShow()"
                  @mouseleave="removeShow()">{{mainName}}</span>
            <div slot="content" style="color: white;line-height: 50px;text-align: center">
                {{toolName}}
            </div>
        </myToolTip>    
    </div>
</template>
<script>
import myToolTip from '../components/myToolTip.vue'
export default {
    name: "tooltip",
    components: {
        myToolTip,
    },
    data() {
        return {
            toolWidth: 300,
            toolName: 'hhh',
            mainName: 'test',
            isShow1: false
        }
    },
    methods: {
        test(e) {
            this.toolName = e
        },
        setShow() {
            this.isShow1 = true
        },
        removeShow() {
            this.isShow1 = false
        }
    }
}
</script>
<style scoped>

</style>