在vue中使用layer弹框插件,实现数据交互功能

更新日期: 2018-03-26阅读: 6.1k标签: layer

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://fly63.com/article/detial/551

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!