组件化开发的思想在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>