Vue实现PopupWindow组件详解

Vue实现PopupWindow组件详解

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

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

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

html代码（无样式）：

显示

v-show="isShowEditWindow"

@close="removeEditWindow()"

:addressregion="addressRegion">

{{editTitle}}

v-show="isShowEditWindow"

@close="removeEditWindow()"

:addressregion="addressRegion">

{{editTitle}}

保存

删除

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(){ //显示新建收货地址对话框（有一个按钮）http://

this.isShowEditWindow = true;

this.isOneButtoQZTXtMfIn = false;

this.editTitle = "新建收货地址";

}，

removeEditWindow: function(){ //关闭新建与编辑地址选择对话框

this.isShowEditWindow = false;

}

}

})

至此，一个popupwindow的组件就完成了。在实现一个Vue组件时，可以使用模板来实现组件，我这里采用了x-templete模板实现了组件，同时在组件通也可以使用vue的transition特性加入一些动画效果。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。