Vue自定义弹窗指令的实现代码


Posted in Javascript onAugust 13, 2018

目标

使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗

Vue自定义弹窗指令的实现代码

实现

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <button id="btn" v-popup="{text: '这是一个自定义的弹窗'}">点击我弹窗哈哈哈</button>
  <div id="d"></div>
 </div>
 <script>
   Vue.directive('popup', {
    inserted: function (el, binding) {
     // console.log(binding.value.text)
     var o = el;
     var myDiv = document.createElement('div');
     myDiv.style.width = '300px';
     // myDiv.style.height = '130px';
     myDiv.style.position = 'fixed';
     myDiv.style.top = '50%';
     myDiv.style.left = '50%';
     myDiv.style.transform = 'translate(-50%, -100%)';
     myDiv.style.zIndex = '100';
     myDiv.style.backgroundColor = '#f3f5f8';
     myDiv.style.display = 'none';
     myDiv.style.textAlign = 'center';
     myDiv.style.paddingTop = '15px'
     myDiv.style.borderRadius = '5px';
     myDiv.style.borderWidth = '1px';
     myDiv.style.borderStyle = 'solid';
     myDiv.style.borderColor = '#696969';
     var myContent = document.createElement('p');
     var myText = document.createTextNode(binding.value.text);
     var btnWrapper = document.createElement('div')
     btnWrapper.style.marginTop = '20px'
     btnWrapper.style.marginBottom = '20px'
     var myConfirm = document.createElement('input');
     myConfirm.type = 'button';
     myConfirm.value = '确定';
     myConfirm.style.marginRight = '15px'
     var myCancel = document.createElement('input');
     myCancel.type = 'button';
     myCancel.value = '取消';
     btnWrapper.appendChild(myConfirm)
     btnWrapper.appendChild(myCancel)
     myDiv.appendChild(myContent.appendChild(myText))
     myDiv.appendChild(btnWrapper)
     document.body.appendChild(myDiv);
     o.onclick = function (event) {
      myDiv.style.display = 'block'
     }
     myConfirm.onclick = function (event) {
      myDiv.style.display = 'none'
     }
     myCancel.onclick = function (event) {
      myDiv.style.display = 'none'
     }
    }
   })
   var vm = new Vue({
    el: '#app',
    data:{
    }
   })
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue自定义弹窗指令的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
js实现多图左右切换功能
Aug 04 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
深入Vue-Router路由嵌套理解
Aug 13 #Javascript
AngularJS与后端php的数据交互方法
Aug 13 #Javascript
Vue Promise的axios请求封装详解
Aug 13 #Javascript
Angular6封装http请求的步骤详解
Aug 13 #Javascript
解决angularjs中同步执行http请求的方法
Aug 13 #Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 #Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 #Javascript
You might like
mysq GBKl乱码
2006/11/28 PHP
php获取错误信息的方法
2015/07/17 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
jquery 常用操作方法
2010/01/28 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python实现Flappy Bird源码
2018/12/24 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
英语专业求职信
2014/07/08 职场文书
迎新生欢迎词
2015/01/23 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
校园之声广播稿
2015/08/18 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript