摘要：項(xiàng)目介紹旨在通過(guò)項(xiàng)目的形式同時(shí)學(xué)習(xí)和，實(shí)現(xiàn)一個(gè)在線配置頁(yè)面的功能。通過(guò)封裝好的組件樣式提供界面需要的組件，通過(guò)實(shí)現(xiàn)組件狀態(tài)更改及頁(yè)面渲染。

本文是不才在學(xué)習(xí)Vue和Bootstrap過(guò)程中遇到問(wèn)題解決的一些思路，主要描述了項(xiàng)目搭建，組件封裝、獲取、編輯、更新的一步步實(shí)現(xiàn)，一些解決方案也沒(méi)找到正確的官方API，還請(qǐng)大拿們多多提點(diǎn)。

旨在通過(guò)項(xiàng)目的形式同時(shí)學(xué)習(xí)Vue和Bootstrap，實(shí)現(xiàn)一個(gè)在線配置頁(yè)面的功能。通過(guò)Bootstrap封裝好的組件樣式提供界面需要的組件，通過(guò)Vue實(shí)現(xiàn)組件狀態(tài)更改及頁(yè)面渲染。

https://github.com/shixia226/bootstrap-vue-designer

組件模塊區(qū)
提供可用于拖拽到編輯區(qū)的所有組件，分類(lèi)別展示

該功能與本學(xué)習(xí)目的關(guān)聯(lián)不強(qiáng)，且其主要拖拽功能比較花時(shí)間，暫且擱置

頁(yè)面編輯區(qū)
提供所有已添加到頁(yè)面的組件的編輯預(yù)覽，并提供組件增，刪，排版，選中功能

增，刪，排版功能可以與模板區(qū)的拖拽功能結(jié)合，同樣暫時(shí)擱置

組件配置區(qū)
提供具體組件內(nèi)部狀態(tài)查看及更改功能

基本的項(xiàng)目搭建，創(chuàng)建index.html, index.js配置好webpack

module.exports = {
    entry: "./index.js",
    output: {
        filename: "index.js"
    },
    module: {
        rules: [{
            test: /^[^.]+.scss$/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        }, {
            test: /(.js|.vue)$/,
            exclude: /(node_modules|bower_components)(?!.*webpack-dev-server)/,
            loader: "babel-loader",
            query: {
                "presets": ["env"]
            }
        }]
    }
};

Bootstrap樣式引入

Vue框架引入

運(yùn)行

//node
webpack-dev-server --port=9926
//Browser
http://localhost:9926/

9

badge-light 樣式可以替換成badge-primary等，可以設(shè)置成屬性變量用于選擇哪個(gè)顏色；

badge-pill 樣式有和無(wú)表現(xiàn)是不一樣的，可以設(shè)置屬性變量用于控制要不該樣式；

9 文本內(nèi)容作為最終的展示內(nèi)容，可以設(shè)置成屬性變量;

組件名取 widget-badge.

Vue.component("widget-badge", {
    template: `{{text}}`,
    props: ["theme", "pill", "text"]
});

new Vue({
    el: ".app"
})

以上步驟后刷新瀏覽器應(yīng)該是可以看到組件效果了，但該組件的所有屬性都是在標(biāo)簽內(nèi)寫(xiě)死的，無(wú)法在編輯頁(yè)面動(dòng)態(tài)設(shè)置

vue 中 props 屬性是不允許動(dòng)態(tài)更改的，一般都只能更改 data 中的屬性值，所以需要把 props 中的所有可變屬性拷貝一份到 data 中，且命名上不能相同，所以在此先規(guī)定 data 中的所有屬性都以字母"v"開(kāi)頭；

每個(gè)可變屬性加一個(gè)編輯項(xiàng)，對(duì)應(yīng)屬性名name="vpropA", 取值為當(dāng)前屬性值:value="vpropsA"，所有的編輯項(xiàng)全部定義屬性 editor 上。

沒(méi)找到對(duì)應(yīng)獲取editor屬性值的API，但通過(guò)分析vue對(duì)象發(fā)現(xiàn)可以通過(guò)vue實(shí)例vm.$options.editor獲取到該定義值，暫且先就這么用著。

組件封裝更改如下：

Vue.component("widget-badge", {
    template: `{{vtext}}`,
    props: ["theme", "pill", "text"],
    editor: `
        
        
        
    `,
    data() {
        return {
            vtheme: this.theme || "secondary",
            vpill: this.pill,
            vtext: this.text || "Badge"
        }
    }
});

點(diǎn)擊不同的組件要展示對(duì)應(yīng)的（不同的）配置面板

vue本來(lái)就是通過(guò)狀態(tài)更新的方式更改dom的，所以很少有dom相關(guān)的api，又只得分析vue實(shí)例里的數(shù)據(jù)，發(fā)現(xiàn)$children好像就是直接下級(jí)組件的一個(gè)集合，且$children每一項(xiàng)里都又一個(gè)$el的屬性對(duì)應(yīng)到實(shí)際DOM元素

function getVueCmp(vm, elem) {
    let pelems = [],
        $root = vm.$el;
    while (elem !== $root) {
        pelems.push(elem);
        elem = elem.parentNode;
    }
    return getVueCmpByPelem(vm, pelems);
}
function getVueCmpByPelem(vm, pelems) {
    let $children = vm.$children;
    if ($children) {
        for (let i = 0, len = $children.length; i < len; i++) {
            let vcmp = $children[i],
                $el = vcmp.$el,
                idx = pelems.indexOf($el);
            if (idx !== -1) {
                pelems.length = idx;
                return getVueCmpByPelem(vcmp, pelems);
            }
        }
    }
    return vm;
}

根據(jù)前面的數(shù)據(jù)命名規(guī)則直接遍歷$data中所有以字母"v"開(kāi)頭的屬性

function getVueCmpData(vcmp) {
    if (!vcmp) return {};
    let $data = vcmp.$data,
        data = {};
    let names = Object.getOwnPropertyNames($data);
    for (let i = 0, len = names.length; i < len; i++) {
        let name = names[i];
        if (name.charAt(0) === "v") {
            data[name.substr(1)] = $data[name];
        }
    }
    return data;
}

在vue根節(jié)點(diǎn)上設(shè)置全局監(jiān)聽(tīng)事件，然后在屬性值中定義$emit方法觸發(fā)該監(jiān)聽(tīng)事件

根節(jié)點(diǎn)設(shè)置監(jiān)聽(tīng)事件，并將監(jiān)聽(tīng)結(jié)果反饋到當(dāng)前選中的組件上

created() {
    this.$on("changeppt", function(name, value) {
        if (vcmp) {
            let names = name.split("."),
                data = vcmp,
                len = names.length - 1;
            for (let i = 0; i < len; i++) {
                data = data[names[i]];
            }
            data[names[len]] = value;
        }
    })
}

封裝編輯器的輸入框?yàn)榻M件如下：

Vue.component("editor-text", {
    template: ``,
    props: ["name", "value"],
    data() {
        return {
            vvalue: this.value
        }
    }      
})

更改編輯器配置如下

{
    ...
    /*
    editor: `
        
        
        
    `,
    */
    editor: `
        
        
        
    `,
    ...
}

new Vue({
    el: ".app",
    data: {
        pptCmp: undefined
    },
    watch: {
        pptCmp(vcmp) {
            new Vue({
                el: ".ppt",
                template: "
" + (vcmp ? vcmp.$options.editor || "" : "") + "
",
                data() {
                    return getVueCmpData(vcmp, true);
                },
                created() {
                    this.$on("changeppt", function(name, value) {
                        if (vcmp) {
                            let names = name.split("."),
                                data = vcmp,
                                len = names.length - 1;
                            for (let i = 0; i < len; i++) {
                                data = data[names[i]];
                            }
                            data[names[len]] = value;
                        }
                    })
                }
            })
        }
    },
    methods: {
        showPpt: function(evt) {
            let elem = evt.target;
            if (!document.querySelector(".ppt").contains(elem)) {
                let vcmp = getVueCmp(this, elem);
                if (vcmp === this.$root) {
                    vcmp = null;
                }
                this.pptCmp = vcmp;
            }
        }
    }
}