百度地图
新建弹窗组件
<template>
<div class="white pb-20 flex">
<el-tabs v-if="infoData.orderList.length > 1" tab-position="left" v-model="activeName"
:style="`height:${height}px`">
<el-tab-pane v-for="(items, index) in infoData.orderList" :key="index" :name="index + ''"
:label="items.serviceObjectName">
</el-tab-pane>
</el-tabs>
<div class="content">
<div class="flex_l">
<h3 class="bold mr-10">{{ item.serviceObjectName || "" }}</h3>
<el-button type="success" size="small" v-if="item.serviceObjectType == 0">保障</el-button>
<el-button type="primary" size="small" v-if="item.serviceObjectType == 1">社会</el-button>
</div>
<div class="mb-6">
服务组织:{{ item.providerName || "" }}
</div>
<div class="flex mb-6">
<div class="flex-1 mr-20">
服务内容:{{ item.requireDescripe || "" }}
</div>
<div v-if="item.staffName" class="flex-1">
服务员工:{{ item.staffName || "" }}
</div>
</div>
<div class="flex mb-6" v-if="item.signTime">
<div v-if="item.signTime" class="flex-1 mr-20">
签到时间:{{ item.signTime || '' }}
</div>
<div v-if="item.endTime" class="flex-1">
签退时间:{{ item.endTime || "" }}
</div>
</div>
<div class="mb-6">
服务地址:{{ item.address || "" }}
</div>
<div class="flex mb-6" v-if="item.signPic">
<div v-if="item.signPic" class="flex_l flex-1 mr-20">
<span>签到首图:</span>
<viewer>
<img style="width: 100px; height: 100px; vertical-align: middle" :src="item.signPic" alt="" />
</viewer>
</div>
<div v-if="item.endPic" class="flex_l flex-1">
<span>签退首图:</span>
<viewer>
<img style="width: 100px; height: 100px; vertical-align: middle" :src="item.endPic" alt="" />
</viewer>
</div>
</div>
<div v-if="item.callRecord">
<div class="flex_l">
<span>通话录音:</span>
<audio id="audio" :src="item.callRecord" preload="metadata"></audio>
<i id="icon1" v-if="!play" class="el-icon-video-play pointer size-20" @click="start(true)"></i>
<i id="icon2" v-else class="el-icon-video-pause pointer size-20" @click="start(false)"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["infoData"],
data() {
return {
activeName: '0',
audio: '',
play: false,
item: {},
height: 315,
};
},
methods: {
start(type) {
this.play = type
if (type) {
console.log(this.audio)
this.audio.play();
} else {
this.audio.pause();
}
}
},
watch: {
activeName: {
handler: function (newV, oldV) {
this.item = this.infoData.orderList[newV * 1]
},
immediate: true,
}
},
mounted() {
this.audio = document.querySelector("#audio");
if (this.audio) {
this.audio.addEventListener("ended", (e) => {
this.play = false
});
}
}
};
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
color: #f5f7fa;
}
::v-deep .el-tabs__item.is-active {
color: orange;
}
</style>
map组件里引入弹窗组件并使用
import Vue from 'vue';
import BaseMap from "./mapBase";
components: {
BaseMap,
},
var opts = {
width: 580,
height: "auto",
};
marker.addEventListener("click", function () {
let MyComponent = Vue.extend({
render: (h) => h(BaseMap, { props: { infoData: item } }),
});
let baseComponent = new MyComponent().$mount();
var infoWindow = new BMapGL.InfoWindow(baseComponent.$el, opts);
this.openInfoWindow(infoWindow);
});
Vue.extend ()
- Vue.extend() 方法是在 Vue 2 中用于定义组件的一种方式。
- 通过调用 Vue.extend() 方法,可以创建一个“扩展实例构造器”,从而实现组件的定义和继承等操作
import Vue from 'vue';
import ComponentA from './ComponentA.vue';
const NewComponent = Vue.extend(ComponentA);
export default NewComponent.extend({
created() {
console.log('NewComponent is created.');
}
});
import Vue from 'vue';
import ComponentA from './ComponentA.vue';
const MyComponent = Vue.extend(ComponentA);
const app = new MyComponent({
propsData: {
name: 'ChatGPT.ai',
age: 2
},
}).$mount('#app');
高德地图
import BaseDeviceDetail from "@/components/baseDeviceDetail/BaseDeviceDetail";
<script>
methods: {
createInfoDom(item){
let Content = Vue.extend({
template: `<base-device :data="item"></base-device>`,
name: 'DeiceDetail',
components: {
'base-device': BaseDeviceDetail
},
data(){
return {
item: item
}
}
});
let component = new Content().$mount();
var infoWindow = new AMap.InfoWindow({
isCustom: true,
content: component.$el,
offset: new AMap.Pixel(30, -25),
});
infoWindow.open(this.map, [item.longitude, item.latitude]);
}
}
</script>
高德 —— 弹窗写在页面内
var infoWindow = new AMap.InfoWindow({
isCustom: true,
content: this.$refs.test,
offset: new AMap.Pixel(30, -25),
});
infoWindow.open(this.map, this.position);