wc messagebox

boîte à message wc

• Plug-in pop-up développé sur la base de vue 2.x
• Contient Alerte, Confirmation, Toast
• Prend en charge les composants d'alerte et de confirmation définis par l'utilisateur.
• Source du style iOS : (MUI)

illustrer

• Il existe des différences dans la transmission des paramètres entre la nouvelle version et l'ancienne version. S'il y a un problème dû à la mise à niveau, vous pouvez essayer de revenir à l'ancienne version. Pour plus de détails, consultez la documentation de l'ancienne version.

Effet

Installer

npm i wc-messagebox --save

Démarrage rapide

 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 ( '这里是内容' )  // 如果传递一个字符串给 this.$alert, 则 标题默认为 '提示', 按钮默认为 '确定'

如果参数为对象, 则可接受如下配置选项:
title : '这里是标题' ,
content : '这里是内容' ,
btnText : '这里是按钮' ,
component : Component // 用于用户自行指明 Alert 组件

比如:
this . $alert ( {
  title : '我是标题' ,
  content : '我是内容'
} )


// confirm
this . $confirm ( '这里是内容' ) ;

如果参数为对象, 则可接受如下配置选项:
title : '这里是标题' ,
content : '这里是内容' ,
yesStyle : { } , // 设置左边按钮样式
yesText : '' ,  // 左边按钮文本,
noStyle : { } ,  // 设置右边按钮样式,
noText : '' ,   // 设置右边按钮文本
component : Component // 可不设置, 适用于用户自定义组件.

比如:
this . $confirm ( {
  title : '我是标题' ,
  content : '我是内容' ,
  yesText : '你好'
} )

// toast
this . $toast ( text , {
    durtaion : 200 ,
    location : 'bottom|center|top' // 默认在中间
} ) ;

// toast 的图文混合模式
this . $toast ( text , {
  path : path ,
  location : 'center' ,
  toastStyle : {
    height : '100px' ,
    width : '100px'
  } ,
  imgStyle : {
    width : '40px' ,
    marginBottom : '15px'
  }
} )


// loading
this . $loading . show ( '自定义文字' ) ; //显示
this . $loading . hide ( ) ; //隐藏

Style de fenêtre contextuelle défini par l'utilisateur

Souvent, dans certains cas, le style de fenêtre contextuelle d'iOS peut ne pas vous satisfaire. Par exemple, vous avez besoin du style de fenêtre contextuelle de WeChat. Parfois, l'utilisateur peut avoir besoin de personnaliser le style de fenêtre contextuelle, par exemple. le concepteur fournit un ensemble de fenêtres contextuelles adaptées au style du projet. Que faire maintenant ?

1. Introduisez la déclaration suivante

 import D from 'wc-messagebox';
Vue.use(D);

2. Copiez wechat-messagebox sous le répertoire racine sur l'ordinateur local.

3. Présentation de Wechat-messagebox

 import wxAlert from 'yourpath/wechat-messagebox/Alert'
import wxConfirm from 'yourpath/wechat-messagebox/Confirm'

4. Configuration

 Vue.use(Alert, {
  component: wxAlert
});

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