Press UI

Pop-up layer component, which pops up a message prompt window, prompt box, etc. in the application

# close icon

Set close-icon to true.

<template>
   <Press Popup
     v-if="show"
     :close-icon="true"
     :arrow-icon="false"
     :title="title"
     button="OK"
     @confirm="confirm"
     @cancel="cancel"
   >
     <div class="content">
       some content
     </div>
   </PressPopup>
</template>

export default {
   data() {
     return {
       title: 'Decisive Way',
       show: false;
     }
   },
   methods: {
     cancel() {
       this. show = false;
     },
     confirm() {
       this. show = false;
     },
   }
};
</script>

# cancel icon

Set close-icon to true and arrow-icon to true.

<template>
   <Press Popup
     v-if="show"
     :close-icon="true"
     :arrow-icon="true"
     :title="title"
     button="OK"
     @confirm="confirm"
     @cancel="cancel"
   >
     <div class="content">
       some content
     </div>
   </PressPopup>
</template>

# No close/cancel

Set close-icon to false and arrow-icon to false.

<template>
   <Press Popup
     v-if="show"
     :close-icon="false"
     :arrow-icon="false"
     :title="title"
     button="OK"
     @confirm="confirm"
     @cancel="cancel"
   >
     <div class="content">
       some content
     </div>
   </PressPopup>
</template>

# Wireframe confirmation icon

Set border-button to true.

<template>
   <Press Popup
     v-if="show"
     :close-icon="true"
     :arrow-icon="false"
     :border-button="true"
     :title="title"
     button="OK"
     @confirm="confirm"
     @cancel="cancel"
   >
     <div class="content">
       some content
     </div>
   </PressPopup>
</template>

# Horizontal version

Set horizontal to true.

<template>
   <Press Popup
     v-if="show"
     :close-icon="true"
     :horizontal="true"
     :width-number="54"
     :title="title"
     @confirm="confirm"
     @cancel="cancel"
   >
     <div class="content">
       some content
     </div>
   </PressPopup>
</template>

# Asynchronous shutdown

An asynchronous shutdown will be triggered when there is validateConfirm in the parent component method.

  <Press Popup
   v-if="popupOptions.noClose.show"
   :close-icon="false"
   :arrow-icon="false"
   :title="popupOptions.noClose.title"
   :button="t('confirm')"
   @confirm="popupOptions.noClose.confirm"
   @cancel="popupOptions.noClose.cancel"
>
   <div class="content">
     {{ t('SomeContent') }}
   </div>
</PressPopup>

export default {
   data() {
     return {
       popupOptions: {
         noClose: {
           show: false,
           title: this.t('wayToWin'),
           cancel: () => {
             this.popupOptions.noClose.show = false;
           },
           confirm: () => {
             this.popupOptions.noClose.show = false;
           },
         },
       }
     }
   },
   methods: {
     validateConfirm() {
       if (['noClose', 'borderBtn']. indexOf(this. type) <= -1) return true;

       return new Promise((resolve) => {
         setTimeout(() => {
           if (this. type === 'noClose') {
             console.log('can be closed after asynchronous confirmation');
             resolve(true);
           } else {
             resolve(false);
             console.log('Close prohibited after asynchronous confirmation');
           }
         }, 2000);
       });
     }
   }
}

# Function call

To support functional calls, you need to pre-embed components under the page, and specify mode as functional.

<press-popup
   :id="PRESS_PICKER_ID"
   mode="functional"
>
   <div class="content">
     {{ t('SomeContent') }}
   </div>
</press-popup>

export default {
   methods: {
     onShowFunctionalPicker() {
       showFunctionalComponent. call(this, {
       selector: `#${PRESS_PICKER_ID}`,
       title: this.t('wayToWin'),
       button: this.t('confirm'),
       horizontal: false,
       closeIcon: false,
       arrowIcon: true,
       borderButton: false,
       customStyle: '',
     }).then(() => {
       this.onTip('confirm');
     })
       .catch(() => {
         this.onTip('cancel');
       });
     },
   }
}

# API

property name type default value description
show-title boolean true Whether to show the title
title string - popup window title
button string - popup title button
border-button boolean false header button style
z-index string 99 popup level
popup-class string - class name
close-on-click-overlay boolean true Whether to click the overlay to close
close-icon boolean false Whether to display the close icon
arrow-icon boolean false Whether to display as a back arrow
horizontal boolean false Whether to switch the horizontal panel style
width-number number 100 Horizontal popup window width percentage
validate-confirm function - Intercept if validate-confirm returns false before executing the confirmation animation
mode string - pass functional when calling a function
disabledButton boolean false button disabled
lock-scroll Whether to lock background scrolling boolean true
event name description return value
cancel Click to cancel -
confirm Click OK -

The following properties are deprecated (v0.7.32):

Type Old New
Prop show-back-arrow arrow-icon
Prop is-show popup-close close-icon
Prop is-show-title show-title
Prop is-cross-slab horizontal
Prop popup-title title
Prop popup-title-btn button
Prop is-border-btn border-button
Prop can-touch-remove close-on-click-overlay
Event onConfirm confirm
Event onCancel cancel
横屏

← IM →