詳解基于Vue2.0實現(xiàn)的移動端彈窗(Alert, Confirm, Toast)組件
更新時間：2018年08月02日 14:17:11 作者：云水搖啊搖
這篇文章主要介紹了詳解基于Vue2.0實現(xiàn)的移動端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
wc-messagebox
- 基于 vue 2.0 開發(fā)的插件
- 包含 Alert, Confirm, Toast, Prompt
- 仿照 iOS 原生UI(樣式來源: MUI)
一些想法
剛開始的時候想要用現(xiàn)成的彈窗組件來著, 但是查找一圈沒有發(fā)現(xiàn)比較合適項目的, 所以才自己開發(fā)了一個, 包含 Alert, Comfirm, Toast, Prompt 四種, 并且可以單個引入.
Vue 的組件開發(fā)實際上比較簡單, 有興趣的可以看下源碼實現(xiàn), 步驟很清晰.
關于樣式的問題, 是直接從 MUI（魅族開發(fā)的） 中拿過來的, 仿照 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)
項目地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何實現(xiàn)路由跳轉到外部鏈接界面，具有很好的參考價值，希望對大家有所幫助。2022-10-10
這篇文章主要給大家介紹了關于如何利用Vue3+Vite批量導入模塊/資源的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
vue3?+?Ant?Design?實現(xiàn)雙表頭表格的效果(橫向表頭+縱向表頭)
這篇文章主要介紹了vue3?+?Ant?Design?實現(xiàn)雙表頭表格（橫向表頭+縱向表頭）,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了vue 使用vue-cropper裁剪圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要給大家介紹了關于vue實戰(zhàn)中一些實用小魔法的相關資料,這些技巧和竅門,可以幫助你成為更好的Vue開發(fā)人員,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vue學習筆記之作用域插槽,結合實例形式分析了vue.js作用域插槽基本使用方法及操作注意事項,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單驗證小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了vue.js表格分頁示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
解決vue keep-alive 數(shù)據(jù)更新的問題
今天小編就為大家分享一篇解決vue keep-alive 數(shù)據(jù)更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了webpack如何將vue3單頁面應用改造成多頁面應用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05