wc-messagebox

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出木壘哈薩克免費(fèi)做網(wǎng)站回饋大家。

1. 基于 vue 2.0 開(kāi)發(fā)的插件
2. 包含 Alert, Confirm, Toast, Prompt
3. 仿照 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)目地址

項(xiàng)目地址

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱(chēng)：詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert,Confirm,Toast)組件
文章URL：http://www.chinadenli.net/article14/gcside.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)頁(yè)設(shè)計(jì)公司、App設(shè)計(jì)、Google、關(guān)鍵詞優(yōu)化、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)