Vue - 简单实现一个命令式弹窗组件

Posted 2023-04-26

参考技术A

在日常工作中弹窗组件是很常用的组件，但用得多还是别人的，空闲时间就自己来简单实现一个弹窗组件

涉及知识点：extend、 el

使用方式：

index.vue ：组件布局、样式、交互逻辑

index.js ：挂载组件、暴露方法

在此之前，了解下涉及的知识点

1. extend

使用这个api，可以将引入的vue组件变成vue构造函数，实例化后方便进行扩展

2. $mount

我们希望弹窗组件是在使用时才显示出来，那么就需要动态的向body中添加元素。使用$mount方法可以手动挂载一个vue实例，和 extend 刚好搭配使用，这个也是弹窗组件命令式的关键。

3. $el

既然要添加dom元素，通过实例的$el属性，正好可以取到dom元素，之后就是使用原生方法进行添加节点啦~

index.vue

index.js

main.js

上面我对外暴露的对象中含有install方法，这里可以使用Vue.use注册组件（使用Vue.use后，会查找install方法进行调用），将组件调用方法挂载到Vue原型上。

这个弹窗组件比较简陋，还有很多地方可以完善

3、Vue3.0 实现一个简单的气泡弹窗

参考技术A Map是OpenLayers的核心组件。要渲染地图需要一个View，一个或多个layers以及一个目标容器target。

Overlay是要在地图上显示并附加到单个地图位置的元素。像一样 module:ol/control/Control~Control ，叠加层是可见的小部件。与“控件”不同，它们不在屏幕上的固定位置，而是绑定到地理坐标，因此平移地图将移动“叠加层”，但不会移动“控件”。

点击地图获取到屏幕坐标e.coordinate，通过 toLonLat将屏幕坐标转换成地理坐标，然后将地理坐标与Overlay绑定，并添加到Map上面。

将Overlay绑定的地理坐标置为undefined，popupCloser Dom元素失去焦点，从而达到关闭弹窗的效果。