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

發(fā)布時間：2020-10-24 11:46:06 來源：腳本之家閱讀：288 作者：云水搖啊搖欄目：web開發(fā)

wc-messagebox

基于 vue 2.0 開發(fā)的插件
包含 Alert, Confirm, Toast, Prompt
仿照 iOS 原生UI(樣式來源: MUI)

一些想法

剛開始的時候想要用現(xiàn)成的彈窗組件來著, 但是查找一圈沒有發(fā)現(xiàn)比較合適項目的, 所以才自己開發(fā)了一個, 包含 Alert, Comfirm, Toast, Prompt 四種, 并且可以單個引入.

Vue 的組件開發(fā)實際上比較簡單, 有興趣的可以看下源碼實現(xiàn), 步驟很清晰.

關(guān)于樣式的問題, 是直接從 MUI（魅族開發(fā)的）中拿過來的, 仿照 iOS 的效果.

效果圖

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

圖是動圖... 動不了點一下就好.

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, 以支持鏈式調(diào)用.

this.$confirm(text).then(success).catch(fail)

項目地址

項目地址

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽