免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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

wc-messagebox

公司主營業務：成都做網站、網站制作、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳，提高企業的競爭能力。創新互聯公司是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創新互聯公司推出木壘哈薩克免費做網站回饋大家。

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

一些想法

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

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

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

效果圖

詳解基于Vue2.0實現的移動端彈窗(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, 以支持鏈式調用.

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

項目地址

項目地址

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

本文名稱：詳解基于Vue2.0實現的移動端彈窗(Alert,Confirm,Toast)組件
文章URL：http://m.newbst.com/article14/gcside.html

成都網站建設公司_創新互聯，為您提供標簽優化、網頁設計公司、App設計、Google、關鍵詞優化、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

營銷型網站建設