cdn百度地图信息窗体使用vue组件-Vue.extend动态渲染
程序员文章站
2024-03-04 17:37:29
...
完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
font-size: 14px;
}
#l-map {
height: 500px;
width: 100%;
}
#r-result {
width: 100%;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>零三的笔记web03.cn</title>
</head>
<body>
<div id="app">
<el-button >Button</el-button>
<div id="l-map"></div>
<div id="r-result"></div>
</div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=uw5BXNxAcf2oCi4ybQdRiK0jxNkesirn"></script>
<script type="text/javascript">
let Btn = Vue.extend({
template: "<el-button type=\"warning\">警告按钮</el-button>"
})
new Vue({
el: '#app',
data: function() {
return { visible: false }
},
mounted() {
let btn = new Btn().$mount();
// 百度地图API功能
var map = new BMap.Map("l-map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 这样是行不通的
// var infoWindow = new BMap.InfoWindow("<el-button type=\"warning\">警告按钮</el-button>"); // 创建信息窗口对象
// 正确实现
var infoWindow = new BMap.InfoWindow(btn.$el); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
})
</script>
问题分析
以下写法vue是不会解析el-button标签的
var infoWindow = new BMap.InfoWindow("<el-button type=\"warning\">警告按钮</el-button>"); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
解决思路
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
var testComponent = Vue.extend({
template: '<p>{{pData}}</p><ls-span>自定义组件</ls-span>',
data: function () {
return {
pData: '零三'
}
}
})
// 创建 testComponent 实例，并挂载到一个元素上。
new testComponent().$mount('#box')
extend 创建的是 Vue 构造器，需要通过 new Component().$mount(’#DOM’) 来挂载到指定的元素上。
我们可以通过 el)
总结意思就是：Vue.extend可以在dom上动态渲染组件