vue-piczoom：https://www.npmjs.com/package/vue-piczoom/v/1.0.6

使用图片放大镜插件 vue-piczoom

安装
npm install vue-piczoom --save

使用

<template><div class="wrap"><!-- 组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内 --><div style="width: 500px; height: 500px"><!-- 第三步：标签使用 --><pic-zoom url="/static/img/1.jpg" :scale="3"></pic-zoom></div></div>
</template>
<script>
// 第一步：引入vue-piczoom
import PicZoom from "vue-piczoom";
export default {// 第二部：注册组件components: {PicZoom,},data() {return {};},
};
</script>
<style scoped>
</style>

Config 配置

参数	说明	默认值
url	图片地址	string required
big-url	大图地址	string null
scale	图片放大倍数	number 2.5
scroll	放大时页面是否可滚动	boolean fasle
show-edit	是否显示旋转图片按钮	boolean fasle

Vue - 图片放大镜（vue-piczoom）相关推荐

vue图片放大镜效果
放大镜功能实现步骤一.通过VuePhotoZoomPro插件实现 1.安装VuePhotoZoomPro 2.在项目页面引入 3.在项目中使用二.基本API 三.案例 1.封装成组件magnifi ...
vue 图片裁剪工具_使用Vue.js的图片裁剪工具，包括预览
vue 图片裁剪工具 Vue作物 (vue-crop) Images Crop tool with Vue.js including preview. 使用Vue.js的图片裁剪工具,包括预览. Vi ...
vue中如何实现图片放大镜功能
vue中图片放大镜功能 1.在vue项目中不可避免的会做一个图片放大镜的弄能(例如.商城.店铺等),今天同事问了这个功能恰好以前写过,因此记录一下. 2.废话不多说直接上代码: 父组件中: <t ...
Vue实现放大镜，但是放大图片跟着鼠标移动
Vue实现放大镜,但是放大图片跟着鼠标移动问题出现在:ref="big"放错位置,应该放在ing中 <template><div class="spe ...
pc 图片预览放大端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
[vue] 怎么解决vue打包后静态资源图片失效的问题？
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
vue图片滚动抽奖_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
VUE图片预览放大缩小插件viewer
VUE图片预览放大缩小插件viewer 一.安装依赖 npm install v-viewer --save 二.main.js内引用并注册调用 //main.js import Viewer fro ...
svg图片在vue项目中的应用
svg图片在vue项目中的应用一.安装 svg-sprite-loader 插件 npm install svg-sprite-loader 二.基于 vue-cli2.x 项目 webpack 配 ...

Vue - 图片放大镜（vue-piczoom）

使用图片放大镜插件 vue-piczoom

Vue - 图片放大镜（vue-piczoom）相关推荐

最新文章

热门文章