百度地图信息弹窗——vue组件的形式——Vue.extend_vue 百度地图自定义窗口

新建弹窗组件

<!--  -->
<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"], // 传递的每个点的数据  infoData.orderList 一点多个订单信息
  data() {
    return {
      activeName: '0',
      audio: '',
      play: false,
      item: {}, // tab切换右边信息
      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] // 点击tab右边数据切换
      },
      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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

map组件里引入弹窗组件并使用

import BaseMap from "./mapBase"; // 点击点信息弹窗组件

// 创建图文信息窗口配置
 var opts = {
    width: 580, // 信息窗口宽度
    height: "auto", // 信息窗口高度
 };

// marker点添加点击事件
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); // 定义弹窗 //$el用于获取Vue实例挂载的DOM元素
    this.openInfoWindow(infoWindow); // 弹出
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Vue.extend ()

• Vue.extend() 方法是在 Vue 2 中用于定义组件的一种方式。
• 通过调用 Vue.extend() 方法，可以创建一个“扩展实例构造器”，从而实现组件的定义和继承等操作

// 先导入 ComponentA 独立组件，然后使用 Vue.extend() 方法来创建一个名为 NewComponent 的新扩展实例构造器，并在此基础上添加了一个 created 钩子函数。
// 最后，我们通过调用 NewComponent.extend() 方法来进一步扩展 NewComponent 构造器并添加更多的组件配置项，从而实现对原始组件的增强和定制化
import Vue from 'vue';
import ComponentA from './ComponentA.vue';

const NewComponent = Vue.extend(ComponentA);

export default NewComponent.extend({
  // 添加新的组件配置项
  created() {
    console.log('NewComponent is created.');
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

import Vue from 'vue';
import ComponentA from './ComponentA.vue';

const MyComponent = Vue.extend(ComponentA);

// 创建 MyComponent 实例，并将属性传递给组件
const app = new MyComponent({
  propsData: {   // 向子组件传递参数，属性名要与子组件props接收属性名保持一致
    name: 'ChatGPT.ai',
    age: 2
  },
}).$mount('#app');

1
2
3
4
5
6
7
8
9
10
11
12
13