詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
wc-messagebox
- 基于 vue 2.0 開(kāi)發(fā)的插件
- 包含 Alert, Confirm, Toast, Prompt
- 仿照 iOS 原生UI(樣式來(lái)源: MUI)
一些想法
剛開(kāi)始的時(shí)候想要用現(xiàn)成的彈窗組件來(lái)著, 但是查找一圈沒(méi)有發(fā)現(xiàn)比較合適項(xiàng)目的, 所以才自己開(kāi)發(fā)了一個(gè), 包含 Alert, Comfirm, Toast, Prompt 四種, 并且可以單個(gè)引入.
Vue 的組件開(kāi)發(fā)實(shí)際上比較簡(jiǎn)單, 有興趣的可以看下源碼實(shí)現(xiàn), 步驟很清晰.
關(guān)于樣式的問(wèn)題, 是直接從 MUI（魅族開(kāi)發(fā)的） 中拿過(guò)來(lái)的, 仿照 iOS 的效果.
效果圖
圖是動(dòng)圖... 動(dòng)不了點(diǎn)一下就好.
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: '', // 默認(rèn)無(wú)標(biāo)題
btn: {
text: '',
style: {
'backgroun-color': 'red',
'font-size': '20px',
'color': 'blue'
}
}
}
this.$confirm(text, options)
options = {
title: '', // 默認(rèn)無(wú)標(biāo)題
yes: {
text: '確定',
style: {}
},
no: {
text: '取消',
style: {}
}
}
this.$toast(text, options);
options = {
position: 'bottom' // 'bottom' | 'center',
duration: '1500'
}
其他
Alert, Confirm 返回的是一個(gè)Promise, 以支持鏈?zhǔn)秸{(diào)用.
this.$confirm(text).then(success).catch(fail)
項(xiàng)目地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用$emit時(shí),父組件無(wú)法監(jiān)聽(tīng)到子組件的事件實(shí)例
下面小編就為大家分享一篇vue使用$emit時(shí),父組件無(wú)法監(jiān)聽(tīng)到子組件的事件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue代理報(bào)錯(cuò)404問(wèn)題及解決(vue配置proxy)
這篇文章主要介紹了Vue代理報(bào)錯(cuò)404問(wèn)題及解決(vue配置proxy)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目
本篇文章主要介紹了詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue引入css文件導(dǎo)致全局污染的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue前端如何接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù)
這篇文章主要介紹了vue前端如何接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報(bào)文,前端采用vue進(jìn)行接收,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02
混入可以省很多代碼(高類(lèi)聚低耦合),還方便維護(hù),下面這篇文章主要給大家介紹了關(guān)于vuejs中使用mixin局部混入/全局混入的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue中的router-view組件的使用教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10