Shulou(Shulou.com)06/01 Report--

This article mainly introduces the uniapp component uni-popup pop-up layer how to use, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

I. basic usage

Top pop-up center pop-up bottom pop-up popup content This example has no animation export default {data () {return {type: 'top'} }, methods: {toggle (type) {this.type = type; this.$refs ['popup'] .open () }, change (e) {uni.showToast ({title:'popup:'+ e.type +', status:'+ e.show})}; II. Example of custom pop-up layer (dialog + message)

Success error warning message export default {data () { Return {msgType: 'success' Message: 'this is a success message'} }, methods: {toggleMessage (type) {this.msgType = type; switch (type) {case 'success': this.message =' this is a success message prompt' Break; case 'warn': this.message =' this is a warning message prompt; break Case 'info': this.message =' this is a message'; break Case 'error': this.message =' this is an error message'; break;} this.$refs ['popupDialog'] .open () }, dialogConfirm () {this.$refs.popupMessage.open (); this.$refs ['popupDialog'] .close ();}, dialogClose () {this.msgType =' info' This.message = 'click the cancel button of the dialog box'; this.$refs.popupMessage.open (); this.$refs.popupDialog.close ();}; III. Submission information (input + delayed shutdown)

Input: {{value}} input dialog box export default {data () {return {msgType: 'success' Value: 'default input'}}, methods: {confirmDialog () {this.$refs ['dialogInput'] .open ()} DialogConfirm (done) {this.$refs ['popupMessage'] .open ()} DialogInputConfirm (val) {uni.showLoading ({title:'1 second will shut down'}) this.value = val SetTimeout () = > {uni.hideLoading ()} 1000)},}, share examples at the bottom

Share template example export default {data () {return {}} Methods: {confirmShare () {this.$refs.popupShare.open ()} Select (e) {uni.showToast ({title: `you have selected item ${e.index+1}: ${e.item.text}` Icon: 'none'})}},}, thank you for reading this article carefully. I hope the article "how to use the uni-popup pop-up layer of uniapp components" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.