Vue实现PopupWindow组件详解

Vue 2019-01-07

这段时间一直在学习前端技术来完成自己的小项目。在js方面就使用了Vue框架。由于在项目里想实现一个新建地址的PopupWindow效果，便想到可以使用Vue的一些特性来实现。

用到的Vue特性：组件(Component)，props传值，slot内容插入，transitions过渡动画，x-templete模板。

直接上代码（完整代码可在链接中下载）：

HTML代码（无样式）：

rush:xhtml;">

twindow" @close="removeEditwindow()" :addressregion="addressRegion">

保存

js代码：

rush:js;"> /* * 新建与编辑地址Vue组件popupwindow * */ var newAddressWindow = Vue.component("new-address-window",{ props: ['addressregion'],template: "#popup-window-address-new" })

地址popupwindow的Vue实例
*/
var chooseAddress = new Vue({
el: "#address-choose",data: {
isShowEditwindow: true,isOneButton: false,editTitle: "新建收货地址",//填入初始地址信息，组件与改数据绑定
addressRegion: {
}
},methods: {
showOneBtnWindow: function(){ //显示新建收货地址对话框（有一个按钮）
this.isShowEditwindow = true;
this.isOneButton = false;
this.editTitle = "新建收货地址";
}，
removeEditwindow: function(){ //关闭新建与编辑地址选择对话框
this.isShowEditwindow = false;
}
}
})