༺࿈网页小地图插件࿈༻

背景

看到Axhub上面有这么一个小地图插件，不过鼠标拖拽事件有BUG且不能自定义，并且发现小地图中的元素和原页面元素不是相同的dom结构，需要额外生成一套，也就是说其他开发者即使把这个js库扒下来也是无法使用的，于是就自己写了一套js库，并且支持定制化。

注意事项

插件仅支持在客户端渲染，请勿在ssr项目的服务端代码中使用
初始化时小地图并不会立即显示，这跟小地图的使用特性有关，推荐初始化时指向一个全局变量，在项目中需要的地方使用变量.init()或者变量.reRender()函数来显示它
虽然init和reRender的作用都是显示重绘后的小地图，不过首次显示时请务必执行一次init函数，它会进行一些额外的事件填充。

TODO

增加对移动端的支持，并自动识别是否为移动端，无需开发者传入额外参数
节省开发成本，页面内容变更时自动的实时更新小地图，无需开发者手动的频繁调用reRender函数
浏览器窗口大小发生变化时小地图的一些表现逻辑优化（主要体现为性能优化）

资源链接

标签引入：https://ymrlqy.top/support/miniMap/miniMap.min.js
npm包：https://www.npmjs.com/package/page-mini-map
Gitee：https://gitee.com/lqy178/mini-map

Props

字段	类型	默认值	说明
size	number	300	地图大小-宽度
borderColor	String	#328756	预览框颜色
offset	Array	[10, 10]	距离顶部和右侧分别多少距离
extraStyle	String	border-radius: 8px;	额外的自定义样式
removeScript	Boolean	true	渲染为dom时是否移除副本中所有的script标签
renderDom	Boolean/ElementNode	false	小地图是否渲染为dom元素，可以指定渲染元素，false代表渲染为canvas，为true则尝试渲染id为app的元素副本，为element-node时则渲染指定元素副本（如：document.getElementsByClassName('body')[0]）

Events

事件名	入参	回参	作用
init	无	无	由于小地图的逻辑特殊性，可能会存在全局引入然后在个别页面显示的问题，所以初始化小地图后并不会立即渲染，需要开发者在需要的时刻手动调用一次`init函数
remove	无	无	销毁小地图，移除dom节点小地图相关元素和事件，后面依旧可以通过初始化指向的全局变量显示，且配置保留
reRender	Object:Props	无	重绘小地图内容，在页面内容更新后手动调用

npm方式


xxxxxxxxxx
1
npm i page-mini-map -S
2

3
import 'page-mini-map';
4
// 或者
5
import MiniMap from 'page-mini-map';
6
// 或者
7
const MiniMap = require('page-mini-map');

标签方式


xxxxxxxxxx
1
1
<script src="https://ymrlqy.top/support/miniMap/miniMap.min.js" type="text/javascript" charset="utf-8"></script>

使用示例

App.vue


x
1
import { getCurrentInstance, onMounted } from "vue";
2
const globalData = getCurrentInstance().appContext.config.globalProperties;
3
// 初始化MiniMap对象并绑定到全局对象上
4
globalData.miniMap = new MiniMap({
5
    size: 400,
6
    borderColor: '#4FC07F',
7
    offset: [10, 10],
8
    extraStyle: 'border-radius: 8px;'
9
});
10
// 全局移除事件
11
globalData.removeMiniMap = () => {
12
    globalData.miniMap && globalData.miniMap.remove();
13
}
14
// 全局重绘事件
15
globalData.reRender = (option) => {
16
    globalData.miniMap && globalData.miniMap.reRender(option);
17
}
18
// 初始化完毕后执行一次init方法用来挂载元素和事件到dom上
19
onMounted(() => {
20
    globalData.miniMap.init();
21
});

test.vue


x
10
1
import { getCurrentInstance, onMounted } from "vue";
2
import { useRoute } from 'vue-router';
3
const globalData = getCurrentInstance().appContext.config.globalProperties;
4
const $route = useRoute();
5
// dom挂载后延迟执行或者在某些异步函数的回调中执行一次重绘
6
onMounted(() => {
7
    setTimeout(() => {
8
        globalData.reRender && globalData.reRender({
9
            renderDom: !!$route.query.isRenderDom
10
        });
11
    }, 500);
12
});
13
// 或者点击某个按钮后执行重绘
14
const clickMeToRenderPointDom = () => {
15
    globalData.reRender && globalData.reRender({
16
        renderDom: document.getElementById('test')
17
    });
18
};