首先需要一个poptip组件,这里引用的是iview的poptip
<Poptip title="Title" content="content" placement="top-start"> <Button>Top Left</Button> </Poptip> 复制代码
日常开发需要在写好的组件外面套一层poptip,写法僵硬;对于不需要poptip的要写成下面丑陋的代码:
<Poptip v-if="showPoptip" title="Title" content="content" placement="top-start"> <Button>Top Left</Button> </Poptip> <Button v-else>Top Left</Button> 复制代码
<Button v-poptip:hover="{title:'标题',content:'poptip提示的内容'}">Top Left</Button> 复制代码
即要实现一个poptip指令,当trigger触发poptip时,render出一个poptip,提示还是采用当前的组件。
❝实现的思路是在绑定指令的当前el下创建一个占位,并将占位与当前el重叠,占位通过trigger触发poptip,就实现了仿当前元素向外叠加「Poptip」组件。
❞
一、render 「popTip」组件
首先引入Vue 和 Iview,使用new Vue来render占位div;创建一个空节点来挂载当前的Vue实例:
let popRoot = document.createElement('div') new Vue({ el: popRoot, render: h => { return h(iView.Poptip, { props: { trigger: arg || 'click', content: value.content }, class: { 'v-poptip-render': true } }, [ h('div', { style: { width: '100%', height: '100%' } }) ]) } }) 复制代码
「注意:new Vue挂载的节点会直接替换当前的DOM,所以不能直接在当前的el上挂载。el可以为DOM或者‘#’+id。」
二、重叠实体和占位「div」
let popRoot = document.createElement('div') el.style.position = 'relative' el.appendChild(popRoot) 复制代码
当前的节点不能作为Vue实例的跟节点,只能创建一个新空节点,再将实例出来的DOM挂载到当前的el上。重叠实体和占位css实现即可。
三、注册「v-poptip」
export default { inserted: (el, { value, arg }, vnode) => { } } 复制代码
import Vue from '../../../vue/dist/vue.runtime.common.js' import iView from '../../../iview/src/index.js' export default { inserted: (el, { value, arg }, vnode) => { let popRoot = document.createElement('div') el.style.position = 'relative' el.appendChild(popRoot) /* eslint-disable no-new */ new Vue({ el: popRoot, render: h => { return h(iView.Poptip, { props: { trigger: arg || 'click', content: value.content }, class: { 'v-poptip-render': true } }, [ h('div', { style: { width: '100%', height: '100%' } }) ]) } }) } } 复制代码
本文使用 mdnice 排版