༺࿈网页小地图插件࿈༻

背景

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

注意事项

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

TODO

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

资源链接

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

示例demo

https://ymrlqy.top/support/miniMap/README.html

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方式

npm i page-mini-map -S

import 'page-mini-map';
// 或者
import MiniMap from 'page-mini-map';
// 或者
const MiniMap = require('page-mini-map');

标签方式

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

使用示例

App.vue

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

test.vue

import { getCurrentInstance, onMounted } from "vue";
import { useRoute } from 'vue-router';
const globalData = getCurrentInstance().appContext.config.globalProperties;
const $route = useRoute();
// dom挂载后延迟执行或者在某些异步函数的回调中执行一次重绘
onMounted(() => {
    setTimeout(() => {
        globalData.reRender && globalData.reRender({
            renderDom: !!$route.query.isRenderDom
        });
    }, 500);
});
// 或者点击某个按钮后执行重绘
const clickMeToRenderPointDom = () => {
    globalData.reRender && globalData.reRender({
		renderDom: document.getElementById('test')
	});
};