wc messagebox

wc-messagebox

• تم تطوير المكون الإضافي المنبثق استنادًا إلى vue 2.x
• يحتوي على تنبيه، تأكيد، نخب
• يدعم مكونات التنبيه والتأكيد المحددة من قبل المستخدم.
• مصدر نمط iOS: (MUI)

يوضح

• توجد اختلافات في تمرير المعلمات بين الإصدار الجديد والإصدار القديم. إذا كانت هناك مشكلة بسبب الترقية، فيمكنك محاولة الرجوع إلى الإصدار القديم للحصول على التفاصيل، راجع وثائق الإصدار القديم.

تأثير

ثَبَّتَ

npm i wc-messagebox --save

بداية سريعة

 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 ) 

الاستخدام

 // 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 ( ) ; //隐藏

نمط النافذة المنبثقة المعرفة من قبل المستخدم

في كثير من الأحيان، في بعض الحالات، قد لا يرضيك نمط النافذة المنبثقة لنظام التشغيل iOS. على سبيل المثال، تحتاج إلى نمط النافذة المنبثقة لـ WeChat. في بعض الأحيان، قد يحتاج المستخدم إلى تخصيص نمط النافذة المنبثقة، على سبيل المثال. يوفر المصمم مجموعة من النوافذ المنبثقة التي تناسب نمط المشروع.

1. تقديم البيان التالي

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

2. انسخ wechat-messagebox ضمن الدليل الجذر إلى الكمبيوتر المحلي.

3. تقديم wechat-messagebox

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

4. إعدادات

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

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