欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年08月02日 14:17:11   作者：云水搖啊搖  
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

wc-messagebox

  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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論