溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
wc-messagebox
一些想法
剛開始的時候想要用現成的彈窗組件來著, 但是查找一圈沒有發現比較合適項目的, 所以才自己開發了一個, 包含 Alert, Comfirm, Toast, Prompt 四種, 并且可以單個引入.
Vue 的組件開發實際上比較簡單, 有興趣的可以看下源碼實現, 步驟很清晰.
關于樣式的問題, 是直接從 MUI（魅族開發的） 中拿過來的, 仿照 iOS 的效果.
效果圖
圖是動圖... 動不了點一下就好.
Install
npm i wc-messagebox --save
Quick Start
import {Alert, Confirm, Toast} from 'wc-messagebox'
import 'wc-messagebox/style.css'
Vue.use(Alert, options)
Vue.use(Confirm, options)
Vue.use(Toast, options)
Usage
this.$alert(text, options)
options = {
title: '', // 默認無標題
btn: {
text: '',
style: {
'backgroun-color': 'red',
'font-size': '20px',
'color': 'blue'
}
}
}
this.$confirm(text, options)
options = {
title: '', // 默認無標題
yes: {
text: '確定',
style: {}
},
no: {
text: '取消',
style: {}
}
}
this.$toast(text, options);
options = {
position: 'bottom' // 'bottom' | 'center',
duration: '1500'
}
其他
Alert, Confirm 返回的是一個Promise, 以支持鏈式調用.
this.$confirm(text).then(success).catch(fail)
項目地址
項目地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
