vue中svg缩放拖拽组件

2022-01-05  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读