VUE implementation PopupWindow component detailed

This time has been learning front-end technology to complete their small projects. The Vue framework is used in JS. Since I want to implement a new address of the PopupWindow effect in the project, I think that some of the features that can be used in Vue can be implemented.

Used Vue Features: Component, PROPS Value, Slot Content Insert, Transitions Transition Movies, X-Templete Template.

directly on the code (complete code can be downloaded popupwindow in the link):

HTML codes (no style):


New receiving address


select regions



  • Contact telephone
Detailed address

Postal Codes


/ * * New and editing address VUE components popupwindow * * / var newaddressWindow = Vue.component ("new-address-window", {prOPS: ['addressRegion " ], Template: "# popup-window-address-new"}) / * * address PopupWindow Vue instance * * / var chooseaddress = new Vue ({EL: # address-choise, data: {isshoweditWindow: true, ISONEBUTTON: FALSE, EditTitle: "New Receals Address", // Fill in the initial address information, component and change data binding addressregion: {}}, methods: {showonebtnWindow: function () {// Display New Receals Address Dialogue Box (there is a button) this.isshoweditwindow = true; this.iesbutton = false; this.edittitle = "New receipt address";}, removeeditwindow: function () {// Close New and Edit AdditTWindow = false;}}}
To this, a PopupWindow component is complete.When implementing a VUE component, you can use the template to implement the component. I use the X-Templete template to implement the component, and the Transition feature of the Vue can be added to the components. The above is all the content of this article, I hope that everyone’s learning is helpful, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment