基于 Vue 2.0 實(shí)現(xiàn)的移動(dòng)端彈窗 (Alert, Confirm, Toast)組件.

Darkgel 發(fā)布于2019-08-21 11:41 / 3127人閱讀

摘要：基于開發(fā)的插件包含仿照原生樣式來源一些想法剛開始的時(shí)候想要用現(xiàn)成的彈窗組件來著但是查找一圈沒有發(fā)現(xiàn)比較合適項(xiàng)目的所以才自己開發(fā)了一個(gè)包含四種并且可以單個(gè)引入的組件開發(fā)實(shí)際上比較簡(jiǎn)單有興趣的可以看下源碼實(shí)現(xiàn)步驟很清晰關(guān)于樣式的問題是直接從魅

wc-messagebox

基于 vue 2.0 開發(fā)的插件

包含 Alert, Confirm, Toast, Prompt

仿照 iOS 原生UI(樣式來源: MUI)

一些想法

剛開始的時(shí)候想要用現(xiàn)成的彈窗組件來著, 但是查找一圈沒有發(fā)現(xiàn)比較合適項(xiàng)目的, 所以才自己開發(fā)了一個(gè), 包含 Alert, Comfirm, Toast, Prompt 四種, 并且可以單個(gè)引入.
Vue 的組件開發(fā)實(shí)際上比較簡(jiǎn)單, 有興趣的可以看下源碼實(shí)現(xiàn), 步驟很清晰.
關(guān)于樣式的問題, 是直接從 MUI（魅族開發(fā)的）中拿過來的, 仿照 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)無標(biāo)題
    btn: {
        text: "",
        style: {
            "backgroun-color": "red",
            "font-size": "20px",
            "color": "blue"
        }
    }
}

this.$confirm(text, options)
options = {
    title: "", // 默認(rèn)無標(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)目地址

項(xiàng)目地址

GPU云服務(wù)器云服務(wù)器 alert_confirm 基于騰訊云實(shí)現(xiàn)移動(dòng)直播 vue.js 2.0 cdn vue組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86998.html

相關(guān)文章

移動(dòng)端常用alert、confirm、toast等彈窗插件，兼容 jQuery/Zepto

移動(dòng)端彈窗插件第二版，包括常見的 alert、confirm、toast、notice 四種類型彈窗，支持 jQuery 和 Zepto 庫。特性支持常見的 alert、confirm、toast、notice 四種類型彈窗可選擇使用 IOS 或者 Material Design 風(fēng)格的彈窗可自定義按鈕的文字、樣式、回調(diào)函數(shù)，支持多個(gè)按鈕多個(gè)彈窗狀態(tài)改變回調(diào)函數(shù) 同時(shí)支持 jQuery...

khlbat 2019-08-21 17:36 評(píng)論0 收藏0
一個(gè)基于Vue.js+Mongodb+Node.js的博客內(nèi)容管理系統(tǒng)

摘要：三更新內(nèi)容在原來項(xiàng)目的基礎(chǔ)上，做了如下更新數(shù)據(jù)庫重新設(shè)計(jì)，改成以用戶分組的數(shù)據(jù)庫結(jié)構(gòu)應(yīng)數(shù)據(jù)庫改動(dòng)，所有接口重新設(shè)計(jì)，并統(tǒng)一采用和網(wǎng)易立馬理財(cái)一致的接口風(fēng)格刪除原來游客模式，增加登錄注冊(cè)功能，支持彈窗登錄。這個(gè)項(xiàng)目最初其實(shí)是fork別人的項(xiàng)目。當(dāng)初想接觸下mongodb數(shù)據(jù)庫，找個(gè)例子學(xué)習(xí)下，后來改著改著就面目全非了。后臺(tái)和數(shù)據(jù)庫重構(gòu)，前端增加了登錄注冊(cè)功能，僅保留了博客設(shè)置頁面，但是...

wh469012917 2019-08-26 11:46 評(píng)論0 收藏0
用vue實(shí)現(xiàn)模態(tài)框組件

摘要：組件結(jié)構(gòu)頭部?jī)?nèi)容區(qū)域尾部操作按鈕模態(tài)框結(jié)構(gòu)分為三部分，分別為頭部?jī)?nèi)部區(qū)域和操作區(qū)域，都提供了，可以根據(jù)需要定制。調(diào)用點(diǎn)擊確定按鈕的回調(diào)處理點(diǎn)擊取消按鈕的回調(diào)處理用創(chuàng)建一個(gè)索引就很方便拿到模態(tài)框組件內(nèi)部的方法了。基本上每個(gè)項(xiàng)目都需要用到模態(tài)框組件，由于在最近的項(xiàng)目中，alert組件和confirm是兩套完全不一樣的設(shè)計(jì)，所以我將他們分成了兩個(gè)組件，本文主要討論的是confirm組件的實(shí)...

mrcode 2019-08-21 14:28 評(píng)論0 收藏0
vue2實(shí)踐（持續(xù)更新）

摘要：記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導(dǎo)致編輯器有點(diǎn)卡，所以新開辟了一篇實(shí)踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標(biāo)簽里的數(shù)據(jù)發(fā)生變化時(shí)候觸發(fā)數(shù)據(jù)可能更新了，但是沒有綁定到上面的話，不會(huì)調(diào)用鉤子函數(shù)。記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導(dǎo)致SF編輯器有點(diǎn)卡，所以新開辟了一篇 vue2實(shí)踐（二），后續(xù)再這里更新。 1. props 帶不帶冒號(hào)的區(qū)別 ...

n7then 2019-08-20 15:05 評(píng)論0 收藏0
個(gè)人分享--web前端學(xué)習(xí)資源分享

摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

sherlock221 2019-08-20 18:59 評(píng)論0 收藏0