摘要：前言上回說了組件組件開發(fā)練習(xí)焦點(diǎn)圖切換的一個(gè)練習(xí)項(xiàng)目，這次換下口味，說下的插件練手的項(xiàng)目。和組件開發(fā)的目錄相比，區(qū)別就在于這個(gè)文件夾上。開發(fā)過程把項(xiàng)目跑起來首先，先弄這個(gè)組件。最后還需要一個(gè)變量，控制彈窗是否顯示。

上回說了組件（vue組件開發(fā)練習(xí)--焦點(diǎn)圖切換）的一個(gè)練習(xí)項(xiàng)目，這次換下口味，說下vue的插件練手的項(xiàng)目。相對(duì)于現(xiàn)在之前的焦點(diǎn)圖切換的組件，這個(gè)可能就更簡(jiǎn)單了，基本就是熟悉下插件開發(fā)的步驟就可以了！這個(gè)項(xiàng)目，我更建議大家動(dòng)手練習(xí)了，這個(gè)彈窗比之前的焦點(diǎn)圖更加的實(shí)用性，也更常用。同時(shí)也能讓大家熟悉下vue的插件開發(fā)的流程。代碼同樣，我會(huì)上傳到github（ec-dialog），需要的可以直接去看代碼！

建議
 1.下面的步驟，最好在自己本地上跑起來，根據(jù)文章的步驟，逐步完成，如果只看代碼，很容易懵逼的。 
2.如果不清楚哪個(gè)代碼有什么作用，可能自己調(diào)試下，把代碼去掉后，看下有什么影響，就很容易想出代碼有什么作用了！ 

還是一個(gè)很簡(jiǎn)單的目錄，各個(gè)目錄不知道有什么用的，可以移步去看我上一篇文章。和組件開發(fā)的目錄相比，區(qū)別就在于src/js/components這個(gè)文件夾上。

首先，先弄src/js/components/alert這個(gè)組件。還是一樣，，先在src/js/components/alert/src/main.vue。輸出‘守候’。代碼如下

然后來到"alert/index.js"。這個(gè)術(shù)語(yǔ)叫什么什么文件，我不太清楚，暫時(shí)就叫，插件配置文件吧！代碼如下（注意看注釋）

import Vue from "vue"
import AlertComponent from "./src/main.vue"
//合并對(duì)象函數(shù)，這個(gè)方法是會(huì)改變，第一個(gè)參數(shù)的值的
function merge(target) {
    for (let i = 1, j = arguments.length; i < j; i++) {
        let source = arguments[i] || {};
        for (let prop in source) {
            if (source.hasOwnProperty(prop)) {
                let value = source[prop];
                if (value !== undefined) {
                    target[prop] = value;
                }
            }
        }
    }
    return target;
};
let instance;
//extend 是構(gòu)造一個(gè)組件的語(yǔ)法器.傳入?yún)?shù)，返回一個(gè)組件
let AlertConstructor = Vue.extend(AlertComponent);

let initInstance = ()=>{
    //實(shí)例化ConfirmConstructor組件
    instance = new AlertConstructor({
        el: document.createElement("div")
    });
    //添加到boby
    document.body.appendChild(instance.$el);
}

let Alert = (options={}) => {
    //初始化
    initInstance();
    // 將單個(gè) confirm instance 的配置合并到默認(rèn)值（instance.$data，就是main.vue里面的data）中
    merge(instance.$data, options);
    //返回Promise
    return new Promise((resolve, reject)=>{
        instance.show = true;
        let success = instance.success;
        let cancel = instance.cancel;
        instance.success = () => {
            //先執(zhí)行instance.success（main.vue里面的success函數(shù)）
            success();
            //再執(zhí)行自定義函數(shù)
            resolve("ok");
        }
    });

}
export default Alert;

然后來到components/js/index.js這個(gè)文件，配置組件和API，代碼如下

import alert from "./alert/index.js"

const install = function(Vue) {
    //注冊(cè)全局組件
    Vue.component(alert.name, alert)
    //添加全局API
    Vue.prototype.$alert = alert
}
export default install

然后在模板文件，index.html里面設(shè)置一個(gè)div,方便掛載測(cè)試

然后在入口文件index.js里面，使用插件

require("./index.html");
//引入sass
require("./src/sass/com.scss");
import Vue from "vue"
import dialog from "./src/js/components/index";
Vue.use(dialog)
let App = new Vue({
    el: "#app",
    data(){
        return {
            "name": "index"
        }
    },
    mounted(){
        this.$alert();
    }
});

然后，命令行 $ npm run dev，結(jié)果完美

完成了上一步，這個(gè)插件的一大半就算完成了！剩下的工作主要開發(fā)的就是在components/../main.vue這文件開發(fā)。
首先，先別急寫代碼，想一下，一個(gè)彈窗大概需要什么字段。

參考上面，發(fā)現(xiàn)有一個(gè)標(biāo)題，一個(gè)內(nèi)容，一個(gè)按鈕文字。最后還需要一個(gè)變量，控制彈窗是否顯示。然后一個(gè)點(diǎn)擊按鈕的操作函數(shù)。然后還有樣式，大概如下

樣式這個(gè)不多說，其他的字段，一個(gè)蘿卜一個(gè)坑的填進(jìn)去就好，代碼如下

運(yùn)行效果

大家知道，在前面步驟，"alert/index.js"這里就已經(jīng)返回的一個(gè)Promise。所以，用法就是像Promise那樣使用！

所以在入口文件，index.js里面直接寫

mounted(){
    this.$alert({
        title:"提示2",
        content:"這里是提示內(nèi)容2"
    }).then(()=>{
        this.name="守候"
        alert(this.name)
    })
}

運(yùn)行效果

還是那句話，程序員不會(huì)滿足于現(xiàn)狀，只有一種彈窗，怎么夠，下面我再增加一種，和上面那個(gè)基本一樣，就是多了一個(gè)取消按鈕而已。
這里我就再講一個(gè)簡(jiǎn)單的栗子，至于彈窗的樣式，太多了，我在這里就不展開說了，大家需要的可進(jìn)行拓展。

首先，創(chuàng)建這個(gè)目錄（可以直接把a(bǔ)lert那個(gè)目錄拷貝過來，然后再修改幾下就完事了）

然后，針對(duì)comfirm/src/main.vue文件，添加下面的代碼（下面的代碼基本就是從alert/src/main.vue拷貝過來的，就是增加一個(gè)取消按鈕的對(duì)應(yīng)一個(gè)字段和操作函數(shù)）

然后就是comfirm/index.js(也是基本拷貝的，我就截圖，告訴大家改哪里吧，這個(gè)得稍微細(xì)看才知道改哪里)

然后components/index.js

import comfirm from "./comfirm/index.js"
import alert from "./alert/index.js"

const install = function(Vue) {
    //注冊(cè)全局組件
    Vue.component(comfirm.name, comfirm)
    Vue.component(alert.name, alert)
    //添加全局API
    Vue.prototype.$confirm = comfirm
    Vue.prototype.$alert = alert
}
export default install

最后在入口文件，index.js使用

require("./index.html");
//引入sass
require("./src/sass/com.scss");
import Vue from "vue"
import dialog from "./src/js/components/index";
Vue.use(dialog)
let App = new Vue({
    el: "#app",
    data(){
        return {
            "name": "index"
        }
    },
    mounted(){
        this.$confirm({
            title:"提示",
            content:"這里是提示內(nèi)容",
            submitText:"提交",
            cancelText:"返回"
        }).then(()=>{
            this.$alert({
                title:"提示2",
                content:"這里是提示內(nèi)容2"
            }).then(()=>{
                this.name="守候"
                alert(this.name)
            })
        }).catch((err)=>{
            alert(err)
        })
    }
}); 

運(yùn)行結(jié)果，就是這樣

一個(gè)簡(jiǎn)單的彈窗就到這里了，很簡(jiǎn)單，但是在我開發(fā)那里還是能用，能暫時(shí)滿足。但是這個(gè)肯定是需要維護(hù)的，畢竟很多的項(xiàng)目都需要彈窗。大家也根據(jù)自己的需要進(jìn)行拓展！以上的案例也很簡(jiǎn)單，容易懂?；径际怯浟鞒?。但是這個(gè)我很建議大家邊動(dòng)手，邊看文章。這個(gè)可以讓自己練習(xí)下基于vue開發(fā)插件，是一個(gè)不錯(cuò)的練習(xí)，希望能幫到大家學(xué)習(xí)到新的知識(shí)！最后，如果覺得文章那里寫的不好或者寫錯(cuò)了，歡迎指出！

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書閣