vue项目 预览照片的插件 v-viewer
查看图片主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。
1、首先是安装
npm install v-viewer --save
2、安装完在main.js里面引用(还要记得引用它的css样式)下面有两种调用方式
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css' // vue注册调用方法一:
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
//vue注册调用方法二:
Vue.use(Viewer);
Viewer.setDefaults({
Options: {
"inline": true, //启用 inline 模式 默认false
"button": true, //显示右上角关闭按钮 默认true
"navbar": true, //显示缩略图导航 默认true
"title": true, //显示当前图片的标题 默认true
"toolbar": true, // 显示工具栏 默认true
"tooltip": true, // 显示缩放百分比 默认true
"movable": true, //图片是否可移动 默认true
"zoomable": true, //图片是否可缩放 默认true
"rotatable": true, //图片是否可旋转 默认true
"scalable": true, //图片是否可翻转 默认true
"transition": true, //使用css3过度 默认true
"fullscreen": true, //是否全屏 默认true
"keyboard": true, //是否支持键盘 默认true
"url": "data-source" //设置大图片的URL
}
});
4、代码的使用
<template>
<viewer :images="images">
<img v-for="src in images" :src="src" :key="src">
</viewer>
</template>
说明:只要img中传入对应的图片的src即可,images是接口获取的图片地址数组 [‘images/img01.jpg’, ‘images/img02.jpg’, ‘images/img03.jpg’]
5、放大后效果图:
vue项目 预览照片的插件 v-viewer的更多相关文章
- 创建vue项目及引入插件
部署开发环境 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install ...
- vscode 中 vue项目使用eslint插件 检查代码
前言 本文章项目由vue-cli3创建 vscode版本1.36.1 eslint1.9.0 在网上找了一大堆文章,不知是什么原因,没有一篇可以直接使用的 折腾了许久,直接按eslint插件的说明,竟 ...
- vue项目中使用插件将字符串装化为格式化的json数据(可伸缩)
插件地址:https://www.npmjs.com/package/vue-json-viewer 第一步:安装vue-json-viewer插件 $ npm install vue-json-vi ...
- vue项目使用vue-photo-preview插件实现点击图片放大预览和移动
官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...
- 适用于vue项目的打印插件(转载)
出处:https://www.cnblogs.com/lvyueyang/p/9847813.html // 使用时请尽量在nickTick中调用此方法 //打印 export default (re ...
- 适用于vue项目的打印插件
此方法只适用于现代浏览器,IE10以下就别用了 // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN i ...
- 手动搭建webpack + vue项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- vue项目全局引入vue-awesome-swiper插件做出轮播效果
在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...
- 创建一个vue 项目 必备的几个插件
第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm install -g cnpm - ...
随机推荐
- web service服务是查询QQ用户是否在线
使用php5开发客户端: <?php try { //$client = new SoapClient("HelloService.wsdl",array('encoding ...
- nodejs-路由(待补充)
path Router 1 2 3 4 5 var express = require('express'); var Router = express.Router(); Router.get('/ ...
- idea常用方便的快捷键
Ctrl+D 复制行Ctrl+F 查找文本Ctrl+G 定位到某行Ctrl+H 显示类结构图(类的继承层次)Ctrl+I 实现方法ctrl+J 显示所有快捷键模板ctrl+k 提交代码到SVNCrtl ...
- HDU 5167
范围 内的斐波那契的数不多,求出范围内的数,再暴力枚举即可. #include <iostream> #include <cstdio> #include <algori ...
- POJ 3301
开始就是瞄着三分来做的,但看题目,感觉是旋转卡壳吧..可是,用了旋转卡壳还三分条毛啊.. 可以令正方形不旋转,而改为令点绕原点旋转,这样,很好的解决了问题,就可以比较X轴最大长度和Y轴最大长度来确定正 ...
- iOS_自己定义毛玻璃效果
终于效果图: 关键代码: UIImage分类代码 // // UIImage+BlurGlass.h // 帅哥_团购 // // Created by beyond on 14-8-30. // C ...
- R语言基础-数组和列表
数组(array) 一维数据是向量,二维数据是矩阵,数组是向量和矩阵的直接推广,是由三维或三维以上的数据构成的. 数组函数是array(),语法是:array(dadta, dim),当中data必须 ...
- 用shell脚本实现linux系统上wifi模式(STA和soft AP)的转换
转载请注明出处:http://blog.csdn.net/hellomxj1/ 功能:在linux系统上实现wifi STA与AP功能的转换 实现成果:1.加入wifipassword账户add_wi ...
- hdoj--2098--分拆素数和(枚举)
分拆素数和 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- Sort和UnSort的小技巧
Sort和UnSort的小技巧: 记录sortidx,对sortidx再从小到大排序就可以得到用于还原的unsortidx. 对于序列A: sort_idx = np.argsort(A) un_so ...