vue外掛開發練習--實用彈窗

守候i發表於2017-11-29
Vue

1.前言

上回說了元件（vue元件開發練習--焦點圖切換）的一個練習專案，這次換下口味，說下vue的外掛練手的專案。相對於現在之前的焦點圖切換的元件，這個可能就更簡單了，基本就是熟悉下外掛開發的步驟就可以了！這個專案，我更建議大家動手練習了，這個彈窗比之前的焦點圖更加的實用性，也更常用。同時也能讓大家熟悉下vue的外掛開發的流程。程式碼同樣，我會上傳到github（ec-dialog），需要的可以直接去看程式碼！

建議
1.下面的步驟，最好在自己本地上跑起來，根據文章的步驟，逐步完成，如果只看程式碼，很容易懵逼的。
2.如果不清楚哪個程式碼有什麼作用，可能自己除錯下，把程式碼去掉後，看下有什麼影響，就很容易想出程式碼有什麼作用了！

2.專案目錄

vue外掛開發練習--實用彈窗

還是一個很簡單的目錄，各個目錄不知道有什麼用的，可以移步去看我上一篇文章。和元件開發的目錄相比，區別就在於src/js/components這個資料夾上。

3.開發過程

3-1.把專案跑起來

首先，先弄src/js/components/alert這個元件。還是一樣，，先在src/js/components/alert/src/main.vue。輸出‘守候’。程式碼如下

<template>
    <transition name="ec">
        <div class="ec">
            守候
        </div>
    </transition>
</template>
<script>
    export default {
        data () {
            return {
                name: 'ec-alert',
            }
        },
        computed: {},
        mounted () {
        },
        methods: {
        }
    }
</script>
複製程式碼

然後來到'alert/index.js'。這個術語叫什麼什麼檔案，我不太清楚，暫時就叫，外掛配置檔案吧！程式碼如下（注意看註釋）

import Vue from 'vue'
import AlertComponent from './src/main.vue'
//合併物件函式，這個方法是會改變，第一個引數的值的
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 是構造一個元件的語法器.傳入引數，返回一個元件
let AlertConstructor = Vue.extend(AlertComponent);

let initInstance = ()=>{
    //例項化ConfirmConstructor元件
    instance = new AlertConstructor({
        el: document.createElement('div')
    });
    //新增到boby
    document.body.appendChild(instance.$el);
}

let Alert = (options={}) => {
    //初始化
    initInstance();
    // 將單個 confirm instance 的配置合併到預設值（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 = () => {
            //先執行instance.success（main.vue裡面的success函式）
            success();
            //再執行自定義函式
            resolve('ok');
        }
    });

}
export default Alert;複製程式碼

然後來到components/js/index.js這個檔案，配置元件和API，程式碼如下

import alert from './alert/index.js'

const install = function(Vue) {
    //註冊全域性元件
    Vue.component(alert.name, alert)
    //新增全域性API
    Vue.prototype.$alert = alert
}
export default install複製程式碼

然後在模板檔案，index.html裡面設定一個div,方便掛載測試

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>  複製程式碼

然後在入口檔案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，結果完美

vue外掛開發練習--實用彈窗

3-2.樣式修改

完成了上一步，這個外掛的一大半就算完成了！剩下的工作主要開發的就是在components/../main.vue這檔案開發。
首先，先別急寫程式碼，想一下，一個彈窗大概需要什麼欄位。

vue外掛開發練習--實用彈窗

參考上面，發現有一個標題，一個內容，一個按鈕文字。最後還需要一個變數，控制彈窗是否顯示。然後一個點選按鈕的操作函式。然後還有樣式，大概如下

vue外掛開發練習--實用彈窗

樣式這個不多說，其他的欄位，一個蘿蔔一個坑的填進去就好，程式碼如下

<template>
    <transition name="ec">
        <div v-if="show" class="ec">
            <div class="ec-box">
                <div class="ec-box-inner">
                    <!--標題-->
                    <div class="ec-title" v-if="title">{{title}}</div>
                    <!--內容-->
                    <div class="ec-content">{{content}}</div>
                </div>
                <!--按鈕-->       
                <div class="ec-box-buttons">
                    <span class="ec-btn-success" @click="success">{{submitText}}</span>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
    export default {
        data () {
            return {
                name:'ec-alert',
                show: false,
                title: '提示',
                content: '',
                submitText: '確定',
                cancelText: '取消'
            }
        },
        computed: {},
        mounted () {
        },
        methods: {
            //按鈕事件
            success () {
                this.show = false;
            }
        }
    }
</script>
<style lang="scss" scoped>

    .ec {
        background: rgba(00, 00, 00, .5);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        .ec-box {
            width: 80%;
            max-width: 400px;
            top: 200px;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            background: #fff;
            box-sizing: border-box;
            padding: 20px;
            border-radius: 6px;

        }
        .ec-title {
            padding-left: 0;
            margin-bottom: 0;
            font-size: 16px;
            font-weight: 700;
            height: 18px;
            color: #333;
        }
        .ec-content {
            padding: 14px 0;
            line-height: 24px;
            color: #48576a;
            font-size: 14px;
        }
        .ec-box-buttons {
            text-align: right;
        }
        .ec-btn-success {
            background: #20a0ff;
            border-color: #20a0ff;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            color: #fff;
            margin: 0;
            padding: 10px 15px;
            border-radius: 4px;
        }
        .ec-btn-cancel {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #c4c4c4;
            color: #1f2d3d;
            margin: 0;
            padding: 10px 15px;
            border-radius: 4px;
        }
    }
    .ec-enter {
        opacity: 0;
        .ec-box {
            transform:scale(0);
        }
    }

    .ec-enter-active {
        transition: opacity .4s;
        .ec-box {
            transition: transform .4s;
        }
    }
    .ec-leave-active{
        transition: opacity .2s;
        .ec-box {
            transition: transform .2s;
        }
    }
    .ec-leave-active {
        opacity: 0;
    }
</style>
複製程式碼

執行效果

vue外掛開發練習--實用彈窗

3-3.使用外掛

大家知道，在前面步驟，'alert/index.js'這裡就已經返回的一個Promise。所以，用法就是像Promise那樣使用！

vue外掛開發練習--實用彈窗

所以在入口檔案，index.js裡面直接寫

mounted(){
    this.$alert({
        title:'提示2',
        content:'這裡是提示內容2'
    }).then(()=>{
        this.name='守候'
        alert(this.name)
    })
}
複製程式碼

執行效果

vue外掛開發練習--實用彈窗

4.其它彈窗

還是那句話，程式設計師不會滿足於現狀，只有一種彈窗，怎麼夠，下面我再增加一種，和上面那個基本一樣，就是多了一個取消按鈕而已。
這裡我就再講一個簡單的栗子，至於彈窗的樣式，太多了，我在這裡就不展開說了，大家需要的可進行擴充。

首先，建立這個目錄（可以直接把alert那個目錄拷貝過來，然後再修改幾下就完事了）

vue外掛開發練習--實用彈窗

然後，針對comfirm/src/main.vue檔案，新增下面的程式碼（下面的程式碼基本就是從alert/src/main.vue拷貝過來的，就是增加一個取消按鈕的對應一個欄位和操作函式）

<template>
    <transition name="ec">
        <div v-if="show" class="ec">
            <div class="ec-box">
                <div class="ec-box-inner">
                    <!--標題-->
                    <div class="ec-title" v-if="title">{{title}}</div>
                    <!--內容-->
                    <div class="ec-content">{{content}}</div>
                </div>
                <!--按鈕-->
                <div class="ec-box-buttons">
                    <span class="ec-btn-success" @click="success">{{submitText}}</span>
                    <span class="ec-btn-cancel" @click="cancel">{{cancelText}}</span>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
    export default {
        data () {
            return {
                name:'ec-comfirm',
                show: false,
                title: '提示',
                content: '',
                submitText: '確定',
                cancelText: '取消'
            }
        },
        computed: {},
        mounted () {
        },
        methods: {
            //確定按鈕事件
            success () {
                this.show = false;
            },
            //取消按鈕事件
            cancel () {
                this.show = false;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .ec {
        background: rgba(00, 00, 00, .5);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        .ec-box {
            width: 80%;
            max-width: 400px;
            top: 200px;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            background: #fff;
            box-sizing: border-box;
            padding: 20px;
            border-radius: 6px;

        }
        .ec-title {
            padding-left: 0;
            margin-bottom: 0;
            font-size: 16px;
            font-weight: 700;
            height: 18px;
            color: #333;
        }
        .ec-content {
            padding: 14px 0;
            line-height: 24px;
            color: #48576a;
            font-size: 14px;
        }
        .ec-box-buttons {
            text-align: right;
        }
        .ec-btn-success {
            background: #20a0ff;
            border-color: #20a0ff;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            color: #fff;
            margin: 0;
            padding: 10px 15px;
            border-radius: 4px;
        }
        .ec-btn-cancel {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #c4c4c4;
            color: #1f2d3d;
            margin: 0;
            padding: 10px 15px;
            border-radius: 4px;
        }
    }
    .ec-enter {
        opacity: 0;
        .ec-box {
            transform:scale(0);
        }
    }

    .ec-enter-active {
        transition: opacity .4s;
        .ec-box {
            transition: transform .4s;
        }
    }
    .ec-leave-active{
        transition: opacity .2s;
        .ec-box {
            transition: transform .2s;
        }
    }
    .ec-leave-active {
        opacity: 0;
    }
</style>
複製程式碼

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

vue外掛開發練習--實用彈窗

vue外掛開發練習--實用彈窗

然後components/index.js

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

const install = function(Vue) {
    //註冊全域性元件
    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(){
        //觸發confirm彈窗
        this.$confirm({
            title:'提示',
            content:'這裡是提示內容',
            submitText:'提交',
            cancelText:'返回'
        }).then(()=>{
            //觸發alert彈窗
            this.$alert({
                title:'提示2',
                content:'這裡是提示內容2'
            }).then(()=>{
                this.name='守候'
                alert(this.name)
            })
        }).catch((err)=>{
            alert(err)
        })
    }
}); 
複製程式碼

執行結果，就是這樣

vue外掛開發練習--實用彈窗

5.小結

一個簡單的彈窗就到這裡了，很簡單，但是在我開發那裡還是能用，能暫時滿足。但是這個肯定是需要維護的，畢竟很多的專案都需要彈窗。大家也根據自己的需要進行擴充！以上的案例也很簡單，容易懂。基本都是記流程。但是這個我很建議大家邊動手，邊看文章。這個可以讓自己練習下基於vue開發外掛，是一個不錯的練習，希望能幫到大家學習到新的知識！最後，如果覺得文章那裡寫的不好或者寫錯了，歡迎指出！



-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣

vue外掛開發練習--實用彈窗


相關文章