今天碰巧有位朋友提到了这个问题,记录一下。如今很多人习惯了用主流MVVM框架开发,但是碰到如百度弹窗的这个需求的时候,不知道该如何把vue组件与第三方插件混合使用。其实这类问题都可以通过插入节点的方式实现。
案例是使用的vue框架,话不多说,直接上代码。
<template> <div class="map-window" v-if="show"> <div class="header"> <i class="el-icon-circle-close" @click="show=false"></i> </div> <router-link :to="{name:'About'}">About</router-link> </div> </template> <script> export default { data: () => ({ show: true // 控制关闭弹窗 }) } </script> <style lang="less" scoped> .map-window { width: 200px; height: 300px; .header { display: flex; justify-content: flex-end; font-size: 25px; .el-icon-circle-close { color: red; cursor: pointer; } } } </style> 复制代码
以上是弹窗内部的内容,功能不多,控制弹窗的关闭,路由的跳转
接下来编写一个创建弹窗的函数
// 引入刚刚写好的vue组件 import MapLabelWindow from './index' // 引入store和router,重新实例化的vue要和main.js中的操作一样 import store from '@/store/index' import router from '@/router' import Vue from 'vue' // 利用Vue.extend扩展vue组件 const WindowConstroctor = Vue.extend(MapLabelWindow) export default function (id) { // 此处实例化 const domEl = new WindowConstroctor({ el: document.createElement('div'), store, router }) domEl.show = true document.querySelector('#' + id).append(domEl.$el) } 复制代码
<template> <div> <div id="map"></div> </div> </template> <script> import addWindow from './MapWindow/addWindow' export default { data: () => ({ map: {} }), methods: { async init () { // 百度地图API功能 const map = new BMap.Map('map', { enableMapClick: true, minZoom: 5, maxZoom: 20 }) map.enableScrollWheelZoom(true) const point = new BMap.Point(120.166754, 30.261346) map.centerAndZoom(point, 5) this.map = map this.map.centerAndZoom(point, 14) const marker = new BMap.Marker(point) // 创建标注 // 随便创建一个label盒子,id取为label const label = new BMap.Label('<div id="label"></div>') marker.setLabel(label) marker.addEventListener('click', () => { // 点击marker时,呼出弹窗,调用刚刚编写的函数即可 addWindow('label') }) marker.setTop(true) this.map.addOverlay(marker) } }, mounted () { this.init() } } </script> <style scoped lang="less"> #map { height: 500px; /deep/ #label { } } </style> 复制代码
以上是正常的创建地图容器的操作,调用即可
效果:
路由功能也能正常使用: