Component is introduced
UA-Popup is a lightweight multi-terminal custom Popup component developed based on UniApp. Support more than 20+ parameter configuration, component + function two kinds of calls. Perfect running to H5 + APP terminal + small program and NVUE native component page.
As shown in the figure above: compatible with H5 + small program + APP terminal, the running effect is consistent.
Imported components
Introduce components globally in main.js.
import UAPopup from './components/ua-popup/index.vue'
Vue.component('ua-popup', UAPopup)Of course, the EasyCom model is also supported. You can omit the import step above.
Support component writing and function call two ways.
- Component calling
<! -- MSG tooltip --> <ua-popup v-model="showMsg" anim="fadeIn" content=" shadeClose="false" time="3" /> <! <ua-popup v-model="showInfo" anim="scaleIn" content=" A man in the dark cannot see his shadow. As long as there is tomorrow, today is always the starting line." : BTNS = "[{text: 'know', style: 'color: # 999;', click: hideInfo},]" / >
- Function calling
}} let $uA = this.$refs.uApopup let $toast = this.$refs.uApopup let $toast = this.$refs.uApopup $uApopup {content: ', customStyle: {'background-color': 'rgba(170, 0, 127, 0.6)', 'color': '# FFF '}, time: 3, onClose() {$ua.open({type: 'android', content: '<div style="color:#aa007f"> </div> >', customStyle: {'width': '200px'}, zIndex: 202120, BTNS: [{text: 'close', click() {$ua.close()}}, {text: 'Get ', style: $toast.open({type: 'toast', icon: 'loading', content: 'loading...', opacity:.2, time: 2, zIndex: 202125,})}})})})}, handleBtNClick () {this.$refs.uApopup. open({content: 'This. ', shadeClose: false, anim: 'footer', customStyle: {'background-color': 'rgba(0, 170, 0, 0.6)', 'color': '#fff', 'border-radius': '6px'}, opacity: .1, time: 2, onClose: () => { this.$refs.uatoast.open({ type: 'toast', icon: 'success', content: 'operation success', time: 2,})}}); },
- Bottom panel pop-up frame
<! > <ua-popup v-model="showFooter" anim="footer" type="footer" :shadeClose="false" content=" real moment of enlightenment, Is to stop seeking riches in the outer world and start seeking true riches in the inner world." : BTNS ="[{text: 'Get ', style: 'color:#00e0a1;', click: handleInfo}, {text: 'collect ', style: 'color:#ee0a24;'}, {text: 'Get ', style: 'color:#00e0a1;'; 'cancel', style: 'color: # a9a9a9;', click: hideFooter},] "/ > <! > <ua-popup v-model="showActionPicker" anim="footer" type=" ActionSheetPicker "round title=" title" : BTNS = "[{text: 'cancelled'}, {text: 'sure, style:' color: # 00 aa00; ', click: handleInfo},]" > <! PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; > <li> <li> </li> <li> Don't wait for opportunities, but make them </li> </ul> </ua-popup>- Toast light prompt box
<ua-popup v-model="showToast" type="toast" icon=" Loading "time="2" content=" Loading..." />- Imitate WeChat long press pop-frame effect
<! --> <ua-popup v-model="showContextMenu1" type=" contextMenu ":follow="follow1" opacity=".35" : BTNS ="[{text: }, {text: 'mark unread ', style: 'color:#00aa00;'}, {text:' < / color > < / color > < / p > < p > ', style: ', 'color: # ff007f;'}, {text: 'heart has how old, stage has how old, style: "color: # 09 f;'}, {text: 'shut down', style: 'color: # aaaa7f;', click: hideContextMenu1}, ]" > </ua-popup> <! -- bb0 <ua-popup v-model="showContextMenu2" type=" contextMenu ":follow="follow2" opacity="0" : BTNS ="[{text: }, {text: 'set notes '}, {text:' star friends '}, {text: 'delete ', click: hideContextMenu1}, ]" > </ua-popup>
The development of implementation
- Custom parameter configuration
props: { value: { type: Boolean, default: false }, title: String, content: String, type: String, customStyle: { type: Object, default: null }, icon: String, shade: { type: [Boolean, String], default: true }, shadeClose: { type: [Boolean, String], default: true }, opacity: { type: [Number, String], default: '' }, round: Boolean, xclose: Boolean, xposition: { type: String, default: 'right' }, xcolor: { type: String, default: '#333' }, anim: { type: String, default: 'scaleIn' }, position: String, follow: { type: Array, default: null }, time: { type: [Number, String], default: 0 }, zIndex: { type: [Number, String], default: '202107' }, btns: { type: Array, default: // Open the popup callback onOpen: {type: Function, default: null}, // Close the popup callback onClose: {type: Function, default: null},},- Bounced template
<template> <! -- #ifdef APP-NVUE --> <view v-if="opts.visible" class="ua__popup" :class="{'ua__popup-closed': closeAnim}"> <! -- #endif --> <! -- #ifndef APP-NVUE --> <view v-show="opts.visible" class="ua__popup" :class="{'ua__popup-closed': closeAnim}"> <! -- #endif --> <! > <view v-if="opts. Shade && opts. Shade! ='false'" class="uapopup__overlay" @touchstart="handleShadeClick" :style="{'opacity': opts.opacity >= 0 ? opts.opacity : '', 'z-index': oIndex-1}"></view> <! - window layer - > < the view class = "uapopup__wrap:" style = "{' z - index: oIndex}"> <view class="uapopup__child" :id="'uapopup-'+uuid" :class="['anim-'+opts.anim, opts.type&&'popui__'+opts.type, opts.round&&'round', opts.position]" :style="[opts.follow&&positionStyle, opts.customStyle]"> <! - / / title - > < view v - if = "opts. Title | | $slots. The title" class = "uapopup__title" > < - if the template v = "$slots. The title" > < slot name="title" /></template> <rich-text v-else :nodes="opts.title"></rich-text> </view> <! -- //toast --> <! -- <view v-if="opts.type=='toast'&&opts.icon" class="toast__icons" :class="['toast__icons-'+opts.icon]" :style="{'background-image': `url(${toastIcon[opts.icon]})`}"></view> --> <image v-if="opts.type=='toast'&&opts.icon" class="toast__icons" :class="['toast__icons-'+opts.icon]" :src="toastIcon[opts.icon]" mode="widthFix"></image> <! - / / content - > < view v - if = "opts. Content | | $slots. The content of" class = "uapopup__content" > < - if the template v = "$slots. The content" > < slot name="content" /></template> <rich-text v-else :nodes="opts.content"></rich-text> </view> <slot /> <! -- // Button group --> <view v-if="opts.btns" class="uapopup__actions"> <rich-text v-for="(BTN,index) in opts.btns" :key="index" class="btn" :class="{'disabled': btn.disabled}" :style="btn.style" @click="handleBtnClick($event, index)" :nodes="btn.text"></rich-text> </view> <! -- // close button --> <view v-if="opts.xclose" class=" uApopup__xclose ":class="opts.xposition" :style="{'color': ="; Opts.xcolor}" @click="close"></view> </view> </view> </view> </template> /** * @desc uniapp * @Time Andy by 2021/7/10 * @About Q: 282310962 wx: xy190310 */ <script bb0 let index = 0 export default {... Data () {return {props {opts: {visible: false,}, toastIcon: {... }, closeAnim: false, oIndex: 202107, timer: null, // position: 'absolute', left: '-999px', top: '-999px' }, } }, watch: { value(val) { const type = val ? 'open' : 'close' this[type]() } }, computed: { uuid() { return Math.floor(Math.random() * 10000) }, }, methods: {// open(options) {if(this.opts.visible) return this.opts = object.assign ({}, this.props, this.props, this.props, this.props, this.props, this.props, this.props, this.props, this.props, this.props, this.props Options) this.opts.visible = true // NVUE is transparent by default. If you do not set background-color, you may cause ghost. // #ifdef app-nvue if(! this.opts.customStyle['background'] && ! this.opts.customStyle['background-color']) { this.opts.customStyle['background'] = '#fff' } // #endif let _index = ++index this.oIndex = _index + parseInt(this.opts.zIndex) this.$emit('open') typeof this.opts.onOpen === 'function' && This.opts.onOpen () // Long press if(this.opts.follow) {... }... }, // close() {if(! this.opts.visible) return this.closeAnim = true setTimeout(() => { this.opts.visible = false this.closeAnim = false this.$emit('input', false) this.$emit('close') typeof this.opts.onClose === 'function' && this.opts.onClose() this.timer && clearTimeout(this.timer) delete this.timer }, 200) }, ... GetDom (id) {return new Promise((resolve,)); inject) => { uni.createSelectorQuery().in(this).select('#uapopup-' + id).fields({ size: }, getPos(x, y, ow, oh, winW, winH) {let l = (x + ow) > winW? x - ow : x; let t = (y + oh) > winH ? y - oh : y; return [l, t]; }, } } </script>Run the effect on the nvue page. It can still overwrite the video native component.
You can customize some extension functions according to the needs of the project. Realize diversified pop-up scenes.
OK, so that’s it for custom pop-up components using UniApp. Hope you enjoy the ha ~~
UniApp custom navigation bar + bottom tabbar component
