vue3 中地图弹框引用组件模板：

项目中使用vue3往往会引用地图组件，或地图框架，往往会在地图弹框嵌入自己想要的模板，例如mapbox弹框引用echarts和element-plus组件

问题描述

第一种方式直接用 createApp mount 挂载

// 1. 地图弹框new mapboxgl.Popup({offset: {'top': [0, 0],'top-left': [0, 0],'top-right': [0, 0],}}).setLngLat(coordinates).setMaxWidth('none').setHTML('<div id="test"></div>').addTo(state.map);// 2. 需要引入模板 Test 这里全局注册Element-plusconst newPopup = defineComponent({extends: Test,setup() {const title = ref('原始标题')onMounted(()=>{title.value = '这是更改的标题'})return { title };},});nextTick(() => {const app1 = createApp(newPopup)app1.use(ElementPlus)app1.mount('#test');});// 3. Test.vue<template>
<div><h1>{{ title }}</h1><el-tag type="success">这是Element-plus的el-tag组件</el-tag><h1>{{test}}</h1>
</div>
</template>

第二种方式利用 createVNode 和 render 函数

function install(app) {let div = document.createElement("div");app.appendChild(div)let vm = createVNode(WindowInfo, {option: option1, option: option2}, {default: () => {}})vm.appContext = app._contextrender(vm, div)}引用 install 即可

效果图

第一种方式效果图

说明

刚入手开发，特以此作记录，分享给需要的小伙伴们
对于第二种方式不太明白

基于vue3原生地图弹框嵌入vue3模板相关推荐

Js简朴原生实现弹框
Js简朴原生实现弹框 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
地图弹框选择地点,返回经纬度
之前做过一个点击弹出地图,选择,然后返回地点的坐标经纬的的功能,当时花了比较长的时间,过后,整理一下. 随便选取一个位置这个需要去百度地图申请账号和AK,然后引用, 百度地图的地址:百度地图地址要 ...
js原生alert弹框美化
1.说明通过自定义方式美化弹框,使用alert弹框错误提示 2.示例 html代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
原生js弹框Alert插件
下载地址一款纯JavaScript库弹出对话框插件,可以创建警报通知,确认弹出框,提示消息等效果.cuteAlert({ type: "success", title: &quo ...
百度地图在VUE项目中插入点位及点位信息弹框
在项目中需要使用地图功能,效果图如下: 具体步骤如下: 1.申请百度地图密钥 2.安装vue-baidu-map 3.在main.js中引入vue-baidu-map.js import BaiduM ...
安卓仿Toasty消息弹框
Toast是安卓非常常用的消息弹框之一,但是原生的弹框过于朴素,无法适应不同场景的样式需求,因此设计一个类似于Toasty的弹框构建工具. 不废话直接上代码 import android.conten ...
一款基于VUE的动态化弹出层插件
public-layer 官网 link. 这是一个基于 vue 的动态弹框插件它对标的是layer.js,和layer不同的是: 1.它零依赖不需要Jquery支持 2.它支持vue,却不限于vu ...
mapbox使用，包括绘制、加载、修改、删除点和面，显示弹框等
加载地图数据 mapbox api地址:http://www.mapbox.cn/mapbox-gl-js/api/ mapbox-gl-draw git地址: https://github.com/ ...
最新技术栈Vue3+TS基于唯杰地图开发的CAD云端图纸管理平台案例代码开源了
系统介绍唯杰地图云端图纸管理平台利用最新技术栈Vue+TypeScript基于唯杰地图二次开发的系统. 实现了对AutoCAD格式的DWG图纸的云端管理查看功能. 大致功能如下: CAD图纸的在线 ...

基于vue3原生地图弹框嵌入vue3模板

vue3 中地图弹框引用组件模板：

问题描述

效果图

说明

基于vue3原生地图弹框嵌入vue3模板相关推荐

最新文章

热门文章