Morioh
Login
Vue.js Tutorial

Vue.js Tutorial

3 years ago

Alert, Toast, Confirm plug-in developed based on Vue 2.0

wc-messagebox

  • Pop-up plugin developed based on vue 2.x
  • Contains Alert, Confirm, Toast
  • Support user-defined Alert and Confirm components.
  • iOS style source: ( MUI )

Description

  • The new version and the old version differ in parameter passing. If there is a problem with the upgrade, you can try to roll back to the old version, see the old version of the document for details.

effect

effect

Install

npm i wc-messagebox --save

Quick Start

import {Alert, Confirm, Toast, Loading} from 'wc-messagebox'
import 'wc-messagebox/style.css'
Vue.use(Alert)
Vue.use(Confirm)
Vue.use(Toast, duration)
Vue.use(Loading)

Usage

// alert 
this . $alert ( 'here is the content' )   // if you pass a string to this.$alert, the title defaults to'reminder', and the button defaults to'OK'

If the parameter is an object , the  following configuration options are acceptable :
 title : 'here is the title' , 
content : 'here is the content' , 
btnText : 'here is the button' , 
component : Component  // Used by the user to specify the Alert component

such as:
this . $alert ( { 
  title : 'I am the title' , 
  content : 'I am the content' 
} )

// confirm 
this . $confirm ( 'Here is the content' ) ;

If the parameter is an object ,  you can accept the following configuration options :
 title : 'here is the title' , 
content : 'here is the content' , 
yesStyle : { } ,  // set the style of the left button 
yesText : '' ,   // the text of the left button, 
noStyle : { } ,   // Set the style of the right button, 
noText : '' ,    // Set the text of the right button 
component : Component  // Optional , suitable for user-defined components.

such as:
this . $confirm ( { 
  title : 'I am the title' , 
  content : 'I am the content' , 
  yesText : 'Hello' 
} )

// toast 
this . $toast ( text ,  { 
    durtaion : 200 , 
    location : 'bottom|center|top'  // default in the middle 
} ) ;

// Toast's graphic and text blending mode 
this . $toast ( text ,  { 
  path : path , 
  location : 'center' , 
  toastStyle : { 
    height : '100px' , 
    width : '100px' 
  } , 
  imgStyle : { 
    width : '40px' , 
    marginBottom : '15px' 
  } 
} )

// loading 
this . $loading . show ( 'custom text' ) ;  // show 
this . $loading . hide ( ) ;  // hide

User-defined pop-up window style

In some cases, the pop-up window style of iOS may not satisfy you. For example, you need the pop-up window style of WeChat. In some cases, users may need to customize the pop-up window style. For example, the designer gives a set of pop-up windows that fit the project. Style. How to do it now?

  1. Introduce the following statement
import D from 'wc-messagebox';
Vue.use(D);

  1. Copy the wechat-messagebox under the root directory to the local.

  2. Introduce wechat-messagebox

import wxAlert from 'yourpath/wechat-messagebox/Alert'
import wxConfirm from 'yourpath/wechat-messagebox/Confirm'
  1. Configuration
Vue.use(Alert, {
  component: wxAlert
});

Vue.use(Confirm, {
  component: wxConfirm
})

Download Details:

Author: helicopters

GitHub: https://github.com/helicopters/wc-messagebox

#vuejs #vue #vue-js #javascript

Alert, Toast, Confirm plug-in developed based on Vue 2.0
3.80 GEEK