Vue自定义弹窗指令的实现代码
程序员文章站
2022-06-19 21:25:40
目标
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗
实现
目标
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗
实现
<!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自定义弹窗指令的实现代码，希望对大家有所帮助
上一篇： 我只要100米就可以了
下一篇： 说得太有道理啦！