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名称和绑定数据的名称是一样的。临时想到的方法并不完善，大家有好的建议或者方法可以留言分享哦！

链接: https://www.fly63.com/article/detial/551