Develop an npm library for vue custom commands-Series 1: demo preview-vue custom commands to realize zooming in and out and dragging of svg images in the center

Effect

demo

1. Zoom in and zoom out based on the center of the svg viewbox attribute
2. Smooth dragging based on svg viewbox properties

demo preview address

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

demo complete code address

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

It has been published as an npm package and can be installed and used directly

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

View 2

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");

View 3

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");

Bind two commands to 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>

important point

The directive treats the first child element of the bound element as svg, so please pay attention to the bound element

const svgDom = el.firstChild as SVGSVGElement;

This is designed to matchv-html

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