msg alert

رسالة التنبيه

مكتبة موجهة للرسائل الفقاعية البسيطة، بحجم 3 كيلو بايت فقط

تقليد مكون رسالة Element-ui لأنني أحب هذا المكون بشكل خاص، ولكن لا يمكن تطبيقه إلا على Vue.js، لذلك قمت بتقليد أحد المكونات باستخدام js الأصلي، ولا أستطيع أن أقول إنه متماثل بنسبة 100%، ولكن يجب أن يكون كذلك تكون متشابهة بنسبة 90% على الأقل، إذا كان هناك مجال للتحسين، فالعلاقات العامة مرحب بها؟؟

ثَبَّتَ

استخدم نبم:

npm install msg-alert --save

باستخدام CDN:

 < script src =" https://cdn.jsdelivr.net/npm/msg-alert " > </ script > 

كيفية الاستخدام

يرجى الرجوع إلى public/index.html الموجود في المستودع

وحدة ESModule

 import message from 'msg-alert'
// 使用方法如下浏览器使用示例

وحدة CommonJS

 const message = require ( 'msg-alert' )
// 使用方法如下浏览器使用示例

استخدامها في المتصفح

 < script src =" https://cdn.jsdelivr.net/npm/msg-alert " > </ script >
< script >
  // 默认 等价 message({type:'info',text:'这是一个段落'})
  message ( '这是一个段落' )
  message . info ( '这是一个段落' )
  // 成功 等价 message({type:'success',text:'success'})
  message . success ( 'success' )
  // 警告 等价 message({type:'warn',text:'warn'})
  message . warn ( 'warn' )
  // 错误 等价 message({type:'error',text:'error'})
  message . error ( 'error' )
</ script > 

واجهة برمجة التطبيقات للخيارات

message.zIndex

النوع: Number

القيمة الافتراضية: 1

مستوى عرض الرسالة (عالمي)

message.destroyAll

النوع: Function

تدمير كافة الرسائل

يكتب

النوع: String

القيمة الافتراضية: info

نوع عرض الرسالة

نص

النوع: String

القيمة الافتراضية: ''

محتوى عرض الرسالة

zIndex

النوع: Number

القيمة الافتراضية: 1

مستوى عرض الرسالة (المنبثقة حاليًا)

إزاحة

النوع: Number

القيمة الافتراضية: 20

إزاحة الرسالة من أعلى النافذة

مدة

النوع: Number

القيمة الافتراضية: 3000

مدة عرض الرسالة، مضبوطة على 0 حتى لا تغلق أبدًا (الوحدة: ميلي ثانية)

customClass

النوع: String

القيمة الافتراضية: ''

تخصيص اسم فئة الرسالة

أتش تي أم أل

النوع: Boolean

القيمة الافتراضية: false

ما إذا كان سيتم معالجة سمة text كجزء من HTML (يُرجى إعداد معالجة تشبه xss مسبقًا)

showClose

النوع: Boolean

القيمة الافتراضية: false

ما إذا كان سيتم عرض زر الإغلاق

onClose

النوع: Function

القيمة الافتراضية: -

وظيفة رد الاتصال قبل إغلاق الرسالة

إلحاق ب

النوع: String | HTMLElement

القيمة الافتراضية: document.body

قم بتعيين رابط العنصر الجذر للمكون