这段时间一直在学习前端技术来完成自己的小项目。在js方面就使用了Vue框架。由于在项目里想实现一个新建地址的PopupWindow效果,便想到可以使用Vue的一些特性来实现。
用到的Vue特性:组件(组件),道具传值,槽内容插入,转换过渡动画,x-templete模板。
直接上代码(完整代码可在链接中下载popupwindow):
html代码(无样式):
& lt; div id=癮ddress-choose”比;
& lt; div>
& lt;按钮@click=" showOneBtnWindow()在显示& lt;/button>
& lt;/div>
& lt; new-address-window
v-show=" isShowEditWindow "
@close=" removeEditWindow ()
祝辞:addressregion=" addressregion”;
& lt; !——使用插槽显示不同的标题——比;
& lt; p槽=癳dit-window-title”比;
{{editTitle}}
& lt;/p>
& lt; div槽=皃opup-btn-container”比;
& lt; button>保存& lt;/button>
& lt; button>删除& lt;/button>
& lt;/div>
& lt;/new-address-window>
& lt;/div>
& lt; !——新建地址popupwindow模板——比;
& lt;脚本type=" text/x-template " id=皃opup-window-address-new”比;
& lt;过渡name=" popup-window-transition比;
& lt; div>
& lt;槽name=" edit-window-title比;
& lt; p>新建收货地址& lt;/p>
& lt;/slot>
& lt;/div>
& lt; div>
& lt; p>收货人& lt;/p>
& lt;输入类型=拔谋尽?value=" https://www.yisu.com/zixun/addressregion.name "/比;
& lt;/div>
& lt; div>
& lt; p>选择地区& lt;/p>
& lt; ul>
& lt; li> {{addressregion.province}} & lt;/li>
& lt; li> {{addressregion.city}} & lt;/li>
& lt; li> {{addressregion.region}} & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div>
& lt; p>联系电话& lt;/p>
& lt;输入类型=拔谋尽闭嘉环?笆只拧?比;
& lt;/div>
& lt; div>
& lt; p>详细地址& lt;/p>
& lt;输入类型=拔谋尽闭嘉环?叭缃值?楼层,门牌号等“/比;
& lt;/div>
& lt; div>
& lt; p>邮政编码& lt;/p>
& lt;输入类型=拔谋尽闭嘉环?坝收嗦?选填)”/比;
& lt;/div>
& lt; div>
& lt;槽name=" popup-btn-container比;
& lt;按钮类=" btn btn-success "祝辞保存& lt;/button>
& lt;按钮类=" btn btn-danger "祝辞删除& lt;/button>
& lt;/slot>
& lt;/div>
& lt;/div>
& lt;/transition>
& lt;/script>
js代码:
/*
*新建与编辑地址Vue组件popupwindow
* */var newAddressWindow=Vue.component (“new-address-window”{
道具:[' addressregion '),
模板:“# popup-window-address-new”
})/*
*地址popupwindow的Vue实例
* */var chooseAddress=new Vue ({
埃尔:“# address-choose”,
数据:{
isShowEditWindow:没错,
isOneButton:假的,
editTitle:“新建收货地址”,//填入初始地址信息,组件与改数据绑定
addressRegion: {
}
},
方法:{
showOneBtnWindow:函数(){//显示新建收货地址对话框(有一个按钮)
这一点。isShowEditWindow=true;
这一点。isOneButton=false;
这一点。editTitle="新建收货地址”;
},
removeEditWindow:函数(){//关闭新建与编辑地址选择对话框
这一点。isShowEditWindow=false;
}
}
})
之前
至此,一个popupwindow的组件就完成了。在实现一个Vue组件时,可以使用模板来实现组件,我这里采用了x-templete模板实现了组件,同时在组件通也可以使用Vue的过渡特性加入一些动画效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
