vue组件系列-预览、放大、缩小、旋转

2019独角兽企业重金招聘Python工程师标准>>>

这个用的是别人的，如果有什么想法，想个性化，估计改起来会很纠结。

安装    npm install v-viewer --save

卸载    npm uninstall v-viewer

 

注册

在main.js中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';

// 预览组件
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

// 引入jquery
import $ from 'jquery';

// 配置axios
// import Axios from 'axios'
import myhttp from '@/utils/http.js';
Vue.prototype.$post = myhttp.post;
Vue.prototype.$get = myhttp.get;
Vue.prototype.$postfile = myhttp.postfile;

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
    }
});

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	components: { App },
	template: '<App/>'
});

 

具体使用

        <viewer :images="images" v-show="show_img">
          <img v-for="src in images" :src="src" :key="src" />
        </viewer>

说明：

只要img中传入对应的图片的src即可，images是接口获取的图片地址数组 [‘images/img01.jpg’, ‘images/img02.jpg’, ‘images/img03.jpg’]

 

结果

转载于:https://my.oschina.net/qingqingdego/blog/3054514