photo-preview-for-vue

一款超简单的图片预览工具

特点

没有任何配置，没做任何兼容。如果要兼容低版本浏览器，自行在项目中配置Babel。

使用

npm下载插件

npm install photo-preview-for-vue

在main.js引入模块，并加载模块。注意了，必须想使用Vue.use加载才能正常使用，十分依赖vue。

import photoPreviewForVue from 'photo-preview-for-vue'
Vue.use(photoPreviewForVue)

第一种使用方式

在img标签中使用

<!-- 在img标签添加preview属性 preview值相同即表示为同一组 -->
<img src="xxx.jpg" preview="0" title="描述文字">

第二种使用方式

使用函数形式

// 引入模块
import { photoPreview } from 'photo-preview-for-vue'

// 打开预览
const closePreview = photoPreview({
  // 图片列表
  lists: [{
    src: 'xxx.jpg',
    title: '描述文字'
  }],
  // 预览的索引
  current: 0,
  // 预览关闭的回调
  closeCallback: () => {},
  // 预览切换土拍你的回调 data是图片的当前数据，current 是索引
  changeCallback: ({data, current}) => {}
})

// 通过返回值来关闭预览
closePreview()

除了使用photoPreview的返回值关闭预览，还可以引入closePreview来关闭预览

// 引入模块
import { photoPreview, closePreview } from 'photo-preview-for-vue'

// 打开预览
photoPreview({
  // 图片列表
  lists: [{
    src: 'xxx.jpg',
    title: '描述文字'
  }],
  // 预览的索引
  current: 0,
  // 预览关闭的回调
  closeCallback: () => {},
  // 预览切换土拍你的回调 data是图片的当前数据，current 是索引
  changeCallback: ({data, current}) => {}
})

// 关闭预览
closePreview()

第三种使用方式

使用预览面板组件

<template>
  <div>
    <button @click="previewForComponent">打开</button>
    <photo-perview v-model="visible" :image-lists="list" :default-current="current" @change="previewChange" />
  </div>
</template>

<script>
import { PhotoPerview } from 'photo-preview-for-vue'
export default {
  name: 'App',
  components: {
    PhotoPerview
  },
  data() {
    return {
      list: [
        {
          src: require('./assets/xxx.jpg'),
          title: '描述'
        }
      ],
      current: 0,
      visible: false
    }
  },
  methods: {
    previewForComponent() {
      this.visible = true
    },
    previewChange({ current }) {
      this.current = current
    }
  }
}
</script>

注意事项

如果是使用第一种方式，当图片是动态加载时，请在图片加载后使用$previewRefresh来重新加载预览。

<img src="xxx.jpg" preview="0" title="描述文字" @load="$previewRefresh">

由于预览是个单例，在打开新的预览时，是会先关闭旧的预览。