美觀簡潔的對話方塊 代替原生 alert 和 prompt

wmhello發表於2018-04-26

綜述

在專案中，代替瀏覽器原生的alert、confirm

名稱：vuejs-dialog
用途：簡潔美觀的對話方塊
官網：地址
github:地址
看雲地址:看雲專欄地址
專欄地址:專欄地址

備註

基於promise，如果要在IE9上使用，請引入相關profill

<script src = "https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>

alert
confirm

npm安裝

npm install vuejs-dialog

瀏覽器

<script type="text/javascript" src="./path/to/vuejs-dialog.min.js"></script>

單頁面

import Vue from "vue"
import VuejsDialog from "vuejs-dialog"

Vue.use(VuejsDialog)

瀏覽器

<script>
Vue.use(VuejsDialog.default)
</script>

confirm對話方塊

this.$dialog.confirm('Please confirm to continue')
    .then(function () {
      // 點選確定執行
        console.log('Clicked on proceed')
    })
    .catch(function () {
      // 點選取消執行
        console.log('Clicked on cancel')
    });

alert對話方塊

this.$dialog.alert('Please confirm to continue')
    .then(function () {
      // 點選確定執行
        console.log('Clicked on proceed')
    })

引數設定

let options = {
    html: false, // 內容可以包含html標記
    loader: false, // 顯示載入動畫
    reverse: false, // 按鈕左右反轉
    okText: 'Continue',  // 本地化確認按鈕文字提示內容
    cancelText: 'Close',  //本地化關閉按鈕文字提示內容
    animation: 'zoom', // 動畫方式， 三選一: "zoom", "bounce", "fade"
    type: 'basic', // 確認型別，點選確認（basic）， 'soft'(軟確認), 'hard'（硬確認)
    verification: 'continue', // 硬確認時, 作為確認文字，需要使用者手工輸入
    verificationHelp: 'Type "[+:verification]" below to confirm', // 硬確認時，提示使用者輸入的文字
    clicksCount: 3, // 軟確認時，點選幾次確認按鈕完成最終的確認
    backdropClose: false // 點背景遮罩是否退出
};

本地化

message = '測試工作';
options = {
    okText: '確定',  // 本地化確認按鈕文字提示內容
    cancelText: '取消',  //本地化關閉按鈕文字提示內容
}
this.$dialog.alert(message, options);

顯示標題與內容

message = {
   title: '友情提示',
   body: '測試工作'
}
this.$dialog.alert(message);

相關文章