page-mini-map v1.0.1

༺࿈网页小地图插件࿈༻

背景

看到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

Events

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')
	});
};