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>