图片预览组件

图片预览组件

preview组件

主要功能

• 双击放大
• 图片移动
• 全屏展示

代码引入和使用

Vue的main.js全局引入
	import preview from 'vue-photo-preview'
	import 'vue-photo-preview/dist/skin.css'
	Vue.use(preview)
组件代码使用
	<--img标签内使用preview属性-->
	<image src='' alt='' preview />

效果预览

v-viewer组件

主要功能

• 滚轮/点击放大缩小
• 反转旋转
• 多图分页/单图展示
• 重置全屏
• 图片移动

代码引入

npm install v-viewer --save
#Vue
`引入`---全局
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

`引入`---局部
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

组件使用

`使用` ---指令，组件，api
1.v-viewer插件组件
<viewer>
    <img src="http://fastly.jsdelivr.net/gh/15826844126/blog@main/img/2.jpeg" width="300"   />
</viewer>

2. v-viewer指令
<div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
 </div>
...
data(){
   return{
        img=ages:[
            .....
        ]
    } 
}

3.v-viewer的Api
<button type="button" @click="show">查看图片</button>
...
data(){
    return{
        images:[
            .....
        ]
    }
}
methods:{
    show() {
        this.$viewerApi({
          images: this.images,
        })
     },
}

修改配置项

Viewer.setDefaults({
  'inline':false,//启用 inline 模式
  'button':true, //右上角叉掉按钮
  "navbar": false, //底部缩略图
  "title": true, //当前图片标题
  "toolbar": true, //底部工具栏
  "tooltip": true, //显示缩放百分比
  "movable": true, //是否可以移动
  "zoomable": true, //是否可以缩放
  "rotatable": true, //是否可旋转
  "scalable": true, //是否可翻转
  "transition": true, //使用 CSS3 过度
  "fullscreen": true, //播放时是否全屏
  "keyboard": true, //是否支持键盘
  //"url": "data-source",//坑
  defaultOptions: {
    zIndex: 9999
  },
});

解决配置项不生效

1. 配置项使用了Options对象包含内容

2. 配置项中有“ulr":"data-source",去掉即可

   网上百度出来的配置项大部分是在Options中设置，结果发现点击图片没有效果点击不动，如果改了Options后还是没有生效还有另外一个原因那就是配置项设置了"url": "data-source" ，把这个注释掉就ok了

效果预览

默认所有配置项都为true(修改见上)