使用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));
网友评论