开发一个vue自定义指令的npm库-系列一：demo预览-vue自定义命令实现svg图片居中放大缩小与拖动

效果

demo

1. 基于svg viewbox属性居中进行放大缩小
2. 基于svg viewbox属性进行平滑拖动

demo预览地址

https://zqy233.github.io/svg-zoom-drag-vue-demo/#/

demo完整代码地址

https://github.com/zqy233/svg-zoom-drag-vue-demo

已经发布为npm包，可以直接安装使用

npm i -s svg-zoom-drag-vue-directives

Vue2

import Vue from "vue";
import App from "./App.vue";

import {
    
     svgWheel, svgDrag } from "svg-zoom-drag-vue-directives";
svgWheel(Vue);
svgDrag(Vue);

new Vue({
    
    
  render: (h) => h(App),
}).$mount("#app");

Vue3

import {
    
     createApp } from "vue";
import App from "./App.vue";

import {
    
     svgWheel, svgDrag } from "svg-zoom-drag-vue-directives";
const app = createApp(App);
svgWheel(app);
svgDrag(app);

app.mount("#app");

绑定两个命令到dom上

<template>
  <div id="svg" v-html="svgString" v-svgWheel v-svgDrag></div>
</template>
<script setup lang="ts">
import {
    
     svgText } from "./svgText";
const svgString = ref("");
onMounted(() => {
    
    
  svgString.value = svgText;
});
</script>
<style>
* {
    
    
  margin: 0;
  padding: 0;
}
#svg {
    
    
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
svg {
    
    
  width: 100% !important;
  height: 100% !important;
  user-select: none;
}
</style>

注意点

指令将绑定元素的第一个子元素当做 svg，所以请注意绑定的元素

const svgDom = el.firstChild as SVGSVGElement;

这样设计是为了搭配v-html

<div id="svg" v-html="svgString" v-svgWheel v-svgDrag></div>