美文网首页
vue中svg缩放拖拽组件

vue中svg缩放拖拽组件

作者: 色即是猫 | 来源:发表于2022-01-05 14:43 被阅读0次

vue-svg-pan-zoom 组件

安装组件:
方式1、执行 npm install --save vue-svg-pan-zoom
方式2、执行 cnpm install vue-svg-pan-zoom

//页面代码

<template>
<SvgPanZoom
      class=""
      style="width: 100%;height:calc(100vh - 460px);"
      :zoomEnabled="true"
      :controlIconsEnabled="false"
      :fit="false"
      :center="true"
      :customEventsHandler="eventsHandler"
    >
 <svg  style="width: 100%;height: 180px" viewBox="0 0 707.8 195.12"></svg>
</SvgPanZoom>
</template>

<script>
//引用组件
  import SvgPanZoom from 'vue-svg-pan-zoom'
  export default {
    components: { SvgPanZoom }//控件声明
  };
</script>

相关文章

网友评论

      本文标题:vue中svg缩放拖拽组件

      本文链接:https://www.haomeiwen.com/subject/yrahcrtx.html