基于 Vue 2.0 實現的移動端彈窗 (Alert, Confirm, Toast)組件.

Darkgel 發布于2019-08-21 11:41 / 3121人閱讀

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

wc-messagebox

基于 vue 2.0 開發的插件

包含 Alert, Confirm, Toast, Prompt

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

一些想法

剛開始的時候想要用現成的彈窗組件來著, 但是查找一圈沒有發現比較合適項目的, 所以才自己開發了一個, 包含 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)

項目地址

項目地址

云服務器 GPU云服務器 alert_confirm 基于騰訊云實現移動直播 vue.js 2.0 cdn vue組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86998.html

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

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

khlbat 2019-08-21 17:36 評論0 收藏0
一個基于Vue.js+Mongodb+Node.js的博客內容管理系統

摘要：三更新內容在原來項目的基礎上，做了如下更新數據庫重新設計，改成以用戶分組的數據庫結構應數據庫改動，所有接口重新設計，并統一采用和網易立馬理財一致的接口風格刪除原來游客模式，增加登錄注冊功能，支持彈窗登錄。這個項目最初其實是fork別人的項目。當初想接觸下mongodb數據庫，找個例子學習下，后來改著改著就面目全非了。后臺和數據庫重構，前端增加了登錄注冊功能，僅保留了博客設置頁面，但是...

wh469012917 2019-08-26 11:46 評論0 收藏0
用vue實現模態框組件

摘要：組件結構頭部內容區域尾部操作按鈕模態框結構分為三部分，分別為頭部內部區域和操作區域，都提供了，可以根據需要定制。調用點擊確定按鈕的回調處理點擊取消按鈕的回調處理用創建一個索引就很方便拿到模態框組件內部的方法了。基本上每個項目都需要用到模態框組件，由于在最近的項目中，alert組件和confirm是兩套完全不一樣的設計，所以我將他們分成了兩個組件，本文主要討論的是confirm組件的實...

mrcode 2019-08-21 14:28 評論0 收藏0
vue2實踐（持續更新）

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

n7then 2019-08-20 15:05 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0