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

以你之姓@ 2024-03-22 14:22 8阅读 0赞

### 效果 ###

![请添加图片描述][819f0e5a89654795bb515bc20058d9b8.gif]

### demo ###

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

### demo预览地址 ###

[https://zqy233.github.io/svg-zoom-drag-vue-demo/\#/][https_zqy233.github.io_svg-zoom-drag-vue-demo]

### demo完整代码地址 ###

[https://github.com/zqy233/svg-zoom-drag-vue-demo][https_github.com_zqy233_svg-zoom-drag-vue-demo]

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

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

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

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`

[819f0e5a89654795bb515bc20058d9b8.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/35438cb6d04d4f36ae243779c96d3bfc.png
[https_zqy233.github.io_svg-zoom-drag-vue-demo]: https://zqy233.github.io/svg-zoom-drag-vue-demo/#/
[https_github.com_zqy233_svg-zoom-drag-vue-demo]: https://github.com/zqy233/svg-zoom-drag-vue-demo