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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
详解Vue.js分发之作用域槽
Jun 13 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
微信小程序签到功能
Oct 31 Javascript
Vuex的初探与实战小结
Nov 26 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
调试PHP程序的多种方法介绍
2014/11/06 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python输入二维数组方法
2018/04/13 Python
python更改已存在excel文件的方法
2018/05/03 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
应聘教师推荐信
2013/10/31 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
年终晚会主持词
2014/03/25 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android