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

时间: 2018-03-26阅读: 3703标签: 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名称和绑定数据的名称是一样的。临时想到的方法并不完善,大家有好的建议或者方法可以留言分享哦!


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广