vue使用js自定义代码块

使用js语法自定义创建vue语法的代码块

                        import Vue from 'vue'

                        let bubble = new GV.BubbleGraphic(bubbleGraphicOpt);
                        bubble.name = feature.id;
                        this.graphicGroup.add(bubble);

                        bubble.panelDom.id = 'bubble' + bubble.id;
                        const jgVue = Vue.extend({
                            template: ` <div :style="jgInfoDivClass" id=${'bubble' +
                            bubble.panelDom.id}>
                                <span style="color: rgb(85, 239, 57);font-size: 18px; margin-left: 100px;">机构信息</span>
                                <img src="image/close.png" style="float:right;" class="bubbleClass" @click="closeBubble"/>
                                <div :style="jgInfoContextClass" class="jgInfoContextClass2">
                                    <div :style="jgInfoItemClass">
                                        <span :style="jgInfoKeyClass">机构名称：</span>
                                        <span :style="jgInfoValueClass">{{jgInfoObject.jgmc}}</span>
                                    </div>
                                    <div :style="jgInfoItemClass">
                                        <span :style="jgInfoKeyClass">经度：</span>
                                        <span :style="jgInfoValueClass">{{jgInfoObject.lng}}</span>
                                    </div>
                                    <div :style="jgInfoItemClass">
                                        <span :style="jgInfoKeyClass">纬度：</span>
                                        <span :style="jgInfoValueClass">{{jgInfoObject.lat}}</span>
                                    </div>
                                    <div :style="jgInfoItemClass">
                                        <span :style="jgInfoKeyClass">船舶装备：</span>
                                        <span :style="jgInfoValueClass">
                                        <el-switch
                                                v-model="jgInfoObject.shipSwitch"
                                                active-color="#13ce66"
                                                inactive-color="#ff4949"
                                                @change="shipSwitchClick(jgInfoObject)">
                                        </el-switch>
                                    </span>
                                    </div>
                                    <div :style="jgInfoItemClass">
                                        <span @click="jgMoreInfo(jgInfoObject)"
                                              style="cursor:pointer;color: #ffff00;margin-left: 100px;">更多详情</span>
                                    </div>
                                </div>
                            </div> `,
                            data() {
                                return {
                                    jgInfoObject: _this.jgInfoObject,

                                    jgInfoDivClass: {
                                        width: '280px',
                                        padding: '6px',
                                        color: '#ffffff',
                                        backgroundColor: '#00000088'
                                    },
                                    jgInfoContextClass: {
                                        maxHeight: '300px',
                                        overflow: 'auto',
                                        width: '100%'
                                    },
                                    jgInfoItemClass: {
                                        margin: '5px 3px'
                                    },
                                    jgInfoKeyClass: {
                                        fontSize: '17px',
                                        color: '#00ffff'
                                    },
                                    jgInfoValueClass: {
                                        fontSize: '17px'
                                    }
                                }
                            },
                            mounted() {
                                const css = document.createElement('style');
                                css.innerText =
                                    `
                                    .jgInfoContextClass2::-webkit-scrollbar {
                                        /*滚动条整体样式*/
                                        width: 6px;
                                        height: 1px;
                                    }
                                    .jgInfoContextClass2::-webkit-scrollbar-thumb {
                                        /*滚动条里面小方块*/
                                        border-radius: 2px;
                                        background: #409eff;
                                    }
                                    .jgInfoContextClass2::-webkit-scrollbar-track {
                                        /*滚动条里面轨道*/
                                        margin-top: 10px;
                                        margin-bottom: 10px;
                                        border-radius: 0px;
                                        background: #00000088;
                                    }
                                    `;
                                document.getElementById("bubble" + bubble.panelDom.id).append(css);
                            },
                            methods: {
                                dmdSwitchClick(jgInfoObject) {
                                    _this.dmdSwitchClick(jgInfoObject);
                                },
                                zrqySwitchClick(jgInfoObject) {
                                    _this.zrqySwitchClick(jgInfoObject);
                                },
                                shipSwitchClick(jgInfoObject) {
                                    _this.shipSwitchClick(jgInfoObject);
                                },
                                jgMoreInfo(jgInfoObject) {
                                    _this.jgMoreInfo(jgInfoObject);
                                },
                                closeBubble() {
                                    _this.closeBubble(bubble.id);
                                }
                            }
                        });
                        let divTemp = document.createElement('div');
                        divTemp.id = 'bubbleTemp';
                        document.getElementById('jgInfoDivId').append(divTemp);
                        // 创建 Profile 实例，并挂载到一个元素上。
                        new jgVue().$mount('#bubbleTemp');
                        // 转移 dom
                        bubble.panelDom.append(document.querySelector('#bubble' + bubble.panelDom.id));