<button class="btn btn-warning" @click="isShowModal1 = true">Show Modal</button>
<modal v-model="isShowModal1" title="Standard" 
       @on-ok="ok" @on-cancel="cancel" 
       ok-text="Ok" cancel-text="Cancel">
    <p>Hello, this is iView Modal!</p>
</modal>
使用v-model綁定"是否顯示對話框"(Boolean value)
使用on-ok和on-cancel分別指定按下確認和取消的事件
使用ok-text和cancel-text分別指定確認和取消按鈕顯示的文字(預設是"确定"和"取消")
new Vue({
    el: "#app",
    data: {
        isShowModal1: false,
    methods: {
        ok() {
            console.info("Confirmed!");
        cancel() {
            console.info("Cancelled!");
使用Slots客製對話框樣式
<modal v-model="isShowModal2">
    <p slot="header" style="background-color:lightyellow;text-align:center">
        <icon type="ios-information-circle"></icon>
        <span>Custom Modal</span>
    <div style="text-align:center">
        <h3>Hello, this is iView Modal!</h3>
    <div slot="footer">
        <button class="btn btn-default" @click="isShowModal2=false">Close</button>
</modal>
點選確認按鈕顯示載入動畫
適用於點選確認按鈕後座非同步傳輸的情景；
<modal v-model="isShowModal3" loading title="Ok with loading" @on-ok="asyncOk" @on-cancel="cancel">
    <p>Hello, this is iView Modal!</p>
</modal>
asyncOk() {
    setTimeout(() => {
        this.isShowModal3 = false;
    }, 2500);
取消 關閉按鈕 及 點選遮罩關閉
closable： 是否啟用關閉按鈕
mask-closable : 是否啟用點選遮罩關閉按鈕
<modal v-model="isShowModal4" title="Disable Closing" :closable="false" :mask-closable="false">
    <p>Hello, this is iView Modal!</p>
</modal>
啟用拖曳功能
 <modal v-model="isShowModal5" title="Draggable" draggable>
    <p>Hello, this is iView Modal!</p>
</modal>
以Model Instance方式開啟對話框
iView預設定義了以下幾組API來開啟對應的對話框
Modal Type
<button class="btn" @click="openModal('info')">Info</button>
<button class="btn" @click="openModal('success')">Success</button>
<button class="btn" @click="openModal('warning')">Warning</button>
<button class="btn" @click="openModal('error')">Error</button>
<button class="btn" @click="openModal('confirm')">Confirm</button>
var app = new Vue({
    el: "#app",
    methods: {
        openModal(type) {
            let msg = "Hello, this is iView Modal!";
            switch (type) {
                case "info":
                    this.$Modal.info({
                        title: "Info",
                        content: msg
                    break;
                case "success":
                    this.$Modal.success({
                        title: "Success",
                        content: msg
                    break;
                case "warning":
                    this.$Modal.warning({
                        title: "Warning",
                        content: msg
                    break;
                case "error":
                    this.$Modal.error({
                        title: "Error",
                        content: msg
                    break;
                case "confirm":
                    this.$Modal.confirm({
                        title: 'Confirm',
                        content: msg,
                        onOk: () => { console.log("Confirmed")},
                        onCancel: () => { console.log("Cancelled")}
                    break;
傳入的參數設定(Options)可參考此表；

另可透過this.$Modal.remove()關閉對話框。
以Model Instance方式客製對話框
也可以透過在Modal Instance回傳Virtual DOM的方式客製對話框；
<button class="btn btn-success" @click="customContent()">Custom content</button>
var app = new Vue({
    el: "#app",
    data: {
        value: ""
    methods: {
        customContent(){
            this.$Modal.confirm({
                render: (h) => {
                    return h('input', {
                        props: {
                            placeholder: 'Who is this?'
                        on: {
                            blur: (event) => {
                                this.value = event.target.value;
                onOk: () => { alert(`Hello, ${this.value}`)}
以上範例請參考Sample code。

更多API請參考官方文件的
Props
Events
Slots
另外小弟自己寫的一個簡單的pop-up modal，也在這邊獻醜一下。
vue-pop-modal
支援兩種顯示方式
依據內容決定的非固定長度
當內容超過時顯示卷軸的固定長度
Github
KarateJB/Vue.Modal
Props
Non-fixed height 非固定長度
<pop-modal v-if="showModal" v-on:close="closeModal" v-on:cancel="showModal=false">
    <p slot="header">
        {{ myHeader }}
    <div slot="body">
        {{ myContent }
    <p slot="header">
        {{ myFooter }}
</pop-modal>
Fixed height 固定長度
<pop-modal v-if="showModal" is-fix="true" v-on:close="closeModal" v-on:cancel="showModal=false">
    <p slot="header">
        {{ myHeader }}
    <div slot="body">
        {{ myContent }
    <p slot="header">
        {{ myFooter }}
</pop-modal>