vue中实现element的Popper功能


<template><div class="pop-over"><a @click="toggleOpen" class="pop-button" href="javascript: void(0);">{{ buttonText }}你好呀</a><ul v-clickoutside="close" v-show="open" class="pop-list"><slot><li>1</li></slot></ul></div>
</template><script>
export default {name: "PopOver",props: ["buttonText"],data() {return {open: false,};},methods: {toggleOpen: function () {this.open = !this.open;},close: function (e) {console.log("close", e.target);if (this.$el.contains(e.target)) return;this.open = false;},},directives: {clickoutside: {bind: function (el, binding, vnode) {console.log(el, binding, vnode);console.log(vnode.context);const documentHandler = function (e) {if (!vnode.context || el.contains(e.target)) return;binding.value(e);};setTimeout(() => {document.addEventListener("click", documentHandler);}, 0);},},},
};
</script><style scoped>
.pop-over {position: relative;width: 100px;height: 100px;background-color: rgb(161, 16, 16);
}
.pop-button {position: relative;width: 100%;height: 100%;text-decoration: none;color: inherit;
}
.pop-list {position: absolute;left: 0;top: 0;
}
.pop-list li {width: 100%;height: 100%;padding: 8px 3px;list-style: none;
}
</style>

vue中实现element的Popper功能相关推荐

vue中手写一个放大镜功能
vue中手写一个放大镜功能有的时候需要对图片进行放大,类似于电商的商品放大功能,于是在这个想法上写了一个放大镜的功能,并且在放大镜的基础上新添加了一些小功能,下面开始吧! 放大镜是封装的组件的形式, ...
vue中可编辑div添加@功能
简介 1.有默认值情况下,光标自动定位到最后 2.按@键,或者@+shift组合键,可添加被@姓名 3.可整体删除@姓名 4.在光标位置插入指定html元素如图所示源码(复制另存txt,修改.ht ...
vue中实现Excel导入导出功能
导入Excel功能前置条件: 依赖包xlsx npm install xlsx -S 这里提供一个现成的在vue中导入Excel的功能(原作者-花裤衩),代码在最下面,可直接复制. 创建一个文件夹, ...
vue中如何实现图片放大镜功能
vue中图片放大镜功能 1.在vue项目中不可避免的会做一个图片放大镜的弄能(例如.商城.店铺等),今天同事问了这个功能恰好以前写过,因此记录一下. 2.废话不多说直接上代码: 父组件中: <t ...
vue中后端做Excel导出功能返回数据流前端如何做处理
项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效 ...
如何在vue中实现文件预览功能
文件流如何将各种文件的文件流(blob)转化为线上可以直接预览的数据,这里简单介绍四种不同类型的文件预览.分别是pdf,docx,xlsx,jpg/png/jpeg等.有一个事情是需要重点注意的,文 ...
Vue中如何实现代码高亮功能？
目录 1.下载依赖 2.在main.js文件中导入包 3.同样是在main.js文件中自定义一个指令 4.在vue文件中使用指令 5.效果展示 1.下载依赖 npm install highlight ...
vue中获取短信验证码功能IOS手机问题
vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空经过排查是因为通过v-mode ...
vue中添加语音播报的功能
1:首先把我们的静态资源文件加入到前端工程项目当中我这里mp3文件就是要播报的语言文件 2: 页面中加入标签  ...

vue中实现element的Popper功能

vue中实现element的Popper功能相关推荐

最新文章

热门文章