- 基础
- 基础
- 遮盖物
- 窗体
- 扩展
- 插件
- 自定义组件
- 示例中心
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
1.9.3.2 信息窗体 - 自定义内容
基础 content 渲染
<vuep template="#exampleContent"></vuep>
<script v-pre type="text/x-template" id="exampleContent">
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-info-window :position="window.position" :content="window.content"></el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let center = [121.59996, 31.197646];
return {
zoom: 12,
center,
window: {
position: center,
content: 'content'
}
};
},
created() {
}
};
</script>
</script>
template 模板渲染
支持传入 Vue
模板,支持 Vue
机制的事件绑定和状态访问。当同时设置 content
和 template
时,优先 content
。v0.4.0
开始支持。
<vuep template="#exampleTemplate"></vuep>
<script v-pre type="text/x-template" id="exampleTemplate">
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo1"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-info-window :position="window.position" :template="window.template"></el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
return {
zoom: 12,
center: [121.59996, 31.197646],
markers: [],
markerRefs: [],
source: 'click'
};
},
created() {
let basePosition = [121.59996, 31.197646];
this.window = {
position: [basePosition[0], basePosition[1]],
template: `<button @click="handler('hello')">\{\{ source \}\}</button>`
}
},
methods: {
handler(index) {
alert(`${ index } - trigger`);
}
}
};
</script>
</script>
render 方式渲染
v0.4.3
开始支持。
<vuep template="#exampleRender"></vuep>
<script v-pre type="text/x-template" id="exampleRender">
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo2"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-info-window :position="window.position" :content-render="window.contentRender"></el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
const BtnComponent = {
props: ['text'],
template: `<button>\{\{text\}\}</button>`
};
const center = [121.59996, 31.197646];
return {
zoom: 12,
center,
markers: [],
source: 'click',
window: {
position: center,
contentRender: h => h(BtnComponent, {
props: {
text: 'hello'
},
style: {
background: 'rgb(173, 47, 47)',
color: '#eee'
},
nativeOn: {
click: () => this.handler(`hello click`)
}
})
}
};
},
created() {
},
methods: {
handler(val) {
alert(`${ val } - trigger`);
}
}
};
</script>
</script>
slots 渲染
v0.4.5
开始支持。
<vuep template="#exampleSlots"></vuep>
<script v-pre type="text/x-template" id="exampleSlots">
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo3"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-info-window :position="window.position">
<div :style="slotStyle">
<b>Hello \{\{ count \}\} times</b>
<button @click="onClick">Add</button>
</div>
</el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
const center = [121.59996, 31.197646];
return {
zoom: 12,
center,
count: 0,
slotStyle: {
padding: '2px 8px',
background: '#eee',
color: '#333',
border: '1px solid #aaa'
},
window: {
position: [121.59996, 31.197646]
}
};
},
methods: {
onClick() {
this.count += 1;
}
},
created() {
}
};
</script>
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论