msg alert

Pesan-Peringatan

Pustaka prompt pesan gelembung sederhana, hanya 3kb

Imitasi dari komponen Element-ui Message. Karena saya sangat menyukai komponen ini, tetapi hanya bisa diterapkan di Vue.js, jadi saya meniru yang menggunakan js asli. Saya tidak bisa mengatakan itu 100% sama, tetapi harus setidaknya 90% serupa. , jika ada ruang untuk optimasi, PR diperbolehkan??

Memasang

Gunakan npm:

npm install msg-alert --save

Menggunakan CDN:

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

Cara menggunakan

Silakan merujuk ke public/index.html di gudang

Modul ESModul

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

Modul CommonJS

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

Gunakan di peramban

 < 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 > 

Opsi API

pesan.zIndex

Jenis: Number

Nilai bawaan: 1

Tingkat tampilan Pesan (global)

pesan.hancurkanSemua

Jenis: Function

Hancurkan semua pesan

jenis

Jenis: String

Nilai bawaan: info

Jenis tampilan pesan

teks

Jenis: String

nilai bawaan: ''

Konten tampilan pesan

zIndeks

Jenis: Number

Nilai bawaan: 1

Tingkat tampilan Pesan (saat ini muncul)

mengimbangi

Jenis: Number

Nilai bawaan: 20

Offset pesan dari bagian atas jendela

lamanya

Jenis: Number

Nilai bawaan: 3000

Durasi tampilan pesan, disetel ke 0 hingga tidak pernah ditutup (satuan: milidetik)

kelas khusus

Jenis: String

nilai bawaan: ''

Sesuaikan nama kelas Pesan

html

Jenis: Boolean

Nilai default: false

Apakah akan memproses atribut text sebagai fragmen HTML (harap persiapkan pemrosesan seperti xss terlebih dahulu)

tampilkanTutup

Jenis: Boolean

Nilai default: false

Apakah akan menampilkan tombol tutup

diTutup

Jenis: Function

nilai bawaan: -

Fungsi panggilan balik sebelum Pesan ditutup

tambahkan Ke

Ketik: String | HTMLElement

Nilai default: document.body

Tetapkan tautan elemen akar komponen