vue 自定义指令实现popover气泡弹窗

效果展示

1 、写好 popover 组件
2、创建自定义指令 popover.js 文件

<!--v-popover指令-->
<template><div class="zdy-popover" ref="ref-zdy-popover" :class="[{'fade-in':visible}]" v-if="visible"><div class="zdy-popover-detail"><div  class="zdy-popover-detail-body">{{content}}</div><div class="triangle"></div></div></div>
</template>
<script>
export default {name: 'ZdyPopover',props: {visible: {type: Boolean,default: false},content:{type:String,default:''}}
};
</script>
<style lang="scss" scoped>
@keyframes fade-in {0% {opacity: 0;}30% {opacity: 0.3;}60% {opacity: 0.6;}100% {opacity: 1;}
}
.fade-in {animation: fade-in 200ms ease-out both 1 /*infinite*/;
}
.zdy-popover{position: absolute;z-index: 302;&-detail{padding: 8px 10px;background: rgba(34, 34, 34, 0.8);border-radius: 4px;position: relative;max-width: 180px;pointer-events: none; //防止穿透&-body{font-size: 12px;color: #FFFFFF;line-height: 20px;text-align: justify;}.triangle {position: absolute;display: block;left: 10px;top: -6px;transform: translateY(-50%);width: 0px;height: 0px;content: '';border-color: transparent;border-style: solid;border-width:6px;border-bottom:6px solid rgba(34, 34, 34, 0.8);z-index: 220;}}}
</style>

popover.js

import Vue from 'vue';
import ZdyPopover from '@/components/common/qm-popover.vue';const Popover = Vue.extend(ZdyPopover);
const _popover = {bind(el, binding, vnode) {const popper = new Popover({el: document.createElement('div'),data(){return {}}})document.body.style.position='relative'; // 将body 设置相对定位document.body.appendChild(popper.$el); //el.instance = popper;el.instance.content = binding.value.content || '';// 气泡中的文字// const _style={top:`${_offsetTop+_offsetHeight}px`, left:`${_offsetLeft}px`}el.onmouseenter=()=>{el.instance.visible=true; // 展示Vue.nextTick(()=>{const _top1 = el.getBoundingClientRect().top // 获取元素距离 顶部位置const _top2 = document.body.scrollTop||document.documentElement.scrollTop // 获取滚动 高度const _offsetTop =_top1+_top2+4; // 距离顶部高度  ui 4px 间距const _offsetLeft =el.getBoundingClientRect().left; // 距离右边 距离const _offsetHeight =el.offsetHeight; // 绑定元素高度const $popover =el.instance.$refs['ref-qm-popover'];$popover.style.top=`${_offsetTop+_offsetHeight}px`;$popover.style.left=`${_offsetLeft}px`;})}el.onmouseleave=()=>{el.instance.visible=false; // 展示// document.body.style.position='static'; // 将body static}},update() { },unbind(el, binding) {// 解除事件监听el.instance && el.instance.$destroy();}
};export default _popover;

import popover from '@/directive/popover.js'
Vue.directive('popover', popover); //注册 全局 指令调用方式
<em v-popover="{content:'我是自定义指令气泡文案'}">demo</em>

vue-directive 自定义指令实现popover气泡弹窗相关推荐

Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
Vue directive 自定义指令
Vue自定义指令一共有5个钩子函数,分别是: bind.inserted.update.componentUpdate .unbind bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行 ...
vue.directive自定义指令 vue.set使用示例
VUE通过自定义指令，只允许输入大写英文以及数字
在写之前需要知道几个功能对象的作用: 首先输入框输入的情况有键盘输入和粘贴输入的情况用到的组件有: input.onblur-onblur: 事件会在对象失去焦点时发生.Onblur 经常用于Jav ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现工具uitls文件夹创建debounce.js文件代码如下 i ...
VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...

vue-directive 自定义指令实现popover气泡弹窗

vue 自定义指令实现popover气泡弹窗

popover.js

vue-directive 自定义指令实现popover气泡弹窗相关推荐

最新文章

热门文章