在vue页面用能放大缩小拖拽svg
在vue页面里, 能放大缩小拖拽svg, 用 vue-svg-pan-zoom 组件,githbu地址https://github.com/yanick/vue-svg-pan-zoom安装方法:如果没有安装,页面又用到了,vue的命令行会提示npm install --save vue-svg-pan-zoom 安装,如果真执行这行语句,会需要很长时间,如果安装有问题,回滚的同时还会删除其他安装
·
在vue页面里, 能放大缩小拖拽svg, 用 vue-svg-pan-zoom 组件,githbu地址 https://github.com/yanick/vue-svg-pan-zoom
安装方法:
如果没有安装,页面又用到了,vue的命令行会提示 npm install --save vue-svg-pan-zoom 安装,如果真执行这行语句,会需要很长时间,如果安装有问题,回滚的同时还会删除其他安装好的组件,然后还得执行 cnpm i 指令再安装,比较麻烦。
执行 cnpm install vue-svg-pan-zoom ,几秒钟就安装好了。
调用方法:
<template> <SvgPanZoom style="width: 500px; height: 500px; border:1px solid black;" :zoomEnabled="true" :controlIconsEnabled="true" :fit="false" :center="true" > <svg width="100%" :height="$route.name=='name'?850:350" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-200 200 3500 1000" style="background-color:#16181d"> <circle x="10" y="10" r="5" /> </svg> </SvgPanZoom >` </template> <script> import SvgPanZoom from "vue-svg-pan-zoom"; export default { components: { SvgPanZoom } }; </script>
更多推荐
已为社区贡献1条内容
所有评论(0)