xh-image-preview

基于vue图片预览插件

说明

具有预览图片基本功能：放大、缩小、1:1、旋转、拖拽、左右切换
灵活配置：支持图片预览窗尺寸、操作按钮键可配置

使用

#安装
npm install xh-image-preview
#引入
import xhImagePreview from 'xh-image-preview'
Vue.use(xhImagePreview)

基本用法

#预览单张图
<imagePreview :visible.sync="visible" :images="images"></imagePreview>#预览多张图
#支持左右切换，defaultImage为打开窗口第一张图片，默认为传入图片数组中第一张
<imagePreview :visible.sync="visible" :images="images" :defaultImage="defaultImage"></imagePreview>

属性设置

#设置图片预览窗尺寸：600px*500px
<imagePreview :visible.sync="visible" :images="images" width="600px" height="500px"></imagePreview>#设置图片操作按钮键:默认zoomIn,zoomOut,actualSize,rotate,total
<imagePreview :visible.sync="visible" :images="images" layout="zoomIn,zoomOut,rotate"></imagePreview>

属性介绍

参数	说明	类型	可选值	默认值
images	预览图片集	Array	—	—
defaultImage	默认图片	string	—	images[0]
width/height	预览窗宽/高	String	—	750px/536px
layout	操作按钮，参数名用逗号分隔	String	zoomIn,zoomOut, actualSize,rotate,total	zoomIn,zoomOut, actualSize,rotate,total

方法

方法名称	说明
prev	预览上一张图片
next	预览下一张图片
rotate	逆时针旋转图片
zoomIn	放大图片
zoomOut	缩小图片
actualSize	预览图片1:1尺寸

详情见xh-image-preview https://www.npmjs.com/package/xh-image-preview

基于Vue框架的预览组件xh-image-preview相关推荐

基于vue的图片预览组件-图片列表
不多说,开局一张图: 主要的使用方法也简单,在控制台执行npm install sen-preview-photo --save然后在 import senPreviewPhoto from 's ...
VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
基于vue3的pdf预览组件
最近在预览pdf.word等文件时,基于vue3封装的预览组件. 首先将pdf或word等文件拆分成一张张图片. ## 需要将pdf 拆解成一张张图片### 安装方式 ``` npm i pdf-pr ...
vue 封装图片预览组件
因项目需要,自己封装了个vue图片预览组件 <template><div class="imgs_previews animated" @mousewheel.p ...
基于React的图片预览组件
一. 需求:最近项目中遇到要进行图片预览的需求,在网上找了一大圈可用的图片预览组件,起初选择react-wx-images-viewer作为预览组件二次开发,但后来发现虽然这个组件在Git上113个s ...
VUE+ELE图片预览组件
1.首先添加图片点击事件 <el-image :src="xxx" @click="handlePreview()" /> 2.增加预览组件imag ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
基于vue的老虎机活动抽奖组件
slot-machine slot-machine 是一个基于vue框架的老虎机抽奖组件,安装即用! 看下demo效果图: 老虎机组件相关地址老虎机demo 关于自定义样式考虑到不同项目的自 ...

基于Vue框架的预览组件xh-image-preview

xh-image-preview

说明

使用

基本用法

属性设置

属性介绍

方法

基于Vue框架的预览组件xh-image-preview相关推荐

最新文章

热门文章