Vue實作PopupWindow元件使用步驟解析

這次帶給大家Vue實作PopupWindow元件使用步驟解析，Vue實作PopupWindow元件所使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

這段時間一直在學習前端技術來完成自己的小專案。在js方面就使用了Vue框架。由於在專案裡想實現一個新建地址的PopupWindow效果，所以想到可以使用Vue的一些特性來實現。

使用到的Vue特性：元件(Component)，props傳值，slot內容插入，transitions過渡動畫，x-templete模板。

直接上程式碼（完整程式碼可在連結中下載popupwindow）：

html程式碼（無樣式）：

<p>
 </p><p>
 <button>显示</button>
  </p>
  <new-address-window>
   <!--使用插槽显示不同的title-->
   <p>
   {{editTitle}}
   </p>
   <p>
   <button>保存</button> 
   <button>删除</button>
  </p>
  </new-address-window>
 
<!--新建地址popupwindow模板-->
<script>
 <transition name="popup-window-transition">
 <p>
  <slot name="edit-window-title">
  <p>新建收货地址
   
 
 <p>
 <p>收货人
 <input type="text" :value="addressregion.name"/>
 
 <p>
 <p>选择地区
 <ul>
  <li>{{addressregion.province}}
  <li>{{addressregion.city}}
  <li>{{addressregion.region}}
 
 
 <p>
 <p>联系电话
 <input type="text" placeholder="手机号"/>
 
 <p>
  <p>详细地址
  <input type="text" placeholder="如街道、楼层、门牌号等"/>
 
 <p>
 <p>邮政编码
 <input type="text" placeholder="邮政编码(选填)"/>
 
 <p>
 <slot name="popup-btn-container">
  <button class="btn btn-success">保存
  <button class="btn btn-danger">删除
 
 
 
 
</script>

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;
 }
 }
})

至此，一個popupwindow的元件就完成了。在實作一個Vue元件時，可以使用模板來實現元件，我在這裡採用了x-templete模板實作了元件，同時在元件通也可以使用vue的transition特性加入一些動畫效果。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue2.0 外掛程式使用npm發布步驟詳解

JS實作透明度漸層功能

以上是Vue實作PopupWindow元件使用步驟解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！