layer.js是一个小巧方便的弹出层插件,目前很多网站都在使用。最近在使用vue框架开发中,需要使用弹窗,就引入了layer.js。引入如下,在main.js中:
import './layerm/layer.js'//弹窗
import './layerm/layer.css'//弹窗样式
这样在组件中就可以使用layer.open的功能了,我们都知道layer.open里面有个content属性可以挂载html的字符串,该字符串形成的dom是新创建的元素,由于vue不能绑定新创建动态Dom元素,那么有什么方法可以实现新增Dom的数据绑定问题呢?我是如下实现的:
html:
<template><div class="test">
<div v-text="name"></div>
<div v-text="age"></div>
<button v-on:click="toForm()">弹出</button>
</div></template>
js:
<script>
export default{
data:function(){
return {
name:'tony',age:41,
}
},
methods:{
toForm(){
let html='<div><input type="text" value="'+this.name+'" id="name"/><input type="text" value="'+this.age+'" id="age"/></div>';
layer.open({
type: 1,
content: html,
});
['name','age'].map((value)=>{
this.changeData(value);
})
},
changeData(id){//更新数据
let dom=document.getElementById(id);
dom.onchange=()=>{//点按
this[id]=dom.value;
}
},
},
}
</script>
在上面例子中弹窗中input的id名称和绑定数据的名称是一样的。临时想到的方法并不完善,大家有好的建议或者方法可以留言分享哦!
在使用layer弹窗的过程,发现layer.open的属性content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验
解决 layui 弹层 layer 组件(重复弹出)同时存在多个页面层(iframe )的问题,这个问题其实是疏忽了一些 基础参数(仔细看文档,仔细看文档,仔细看文档)
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!