zerocar-preview

    1.3.1 • Public • Published

    Vue preview plugin

    一个Vue集成PhotoSwipe图片预览插件

    注意:此插件并没有提供新的功能,只是基于原作的基础之上,做了小小改动,从而解决了使用webpack打包压缩JS文件时报错的问题:ERROR in js/vendors.js from UglifyJs; Unexpected token: name ($vm) 1.3.0 修复图片在不同的地方预览后关闭图片始终会显示缩小到第一张图片上

    Requirements

    PhotoSwipe

    Based on

    vue-preview

    Installation

    npm i vue2-preview -S

    Usage

    使用须知:

    • 插件目前仅支持vue2.0以上版本
    • img标签上的class不能去掉

    如果你是使用vue-cli生成的项目,可能需要你修改webpack.base.conf.js文件中的loaders,添加一个loader。 原因:插件编写中使用了es6的语法,需要进行代码编译

    {
        test: /vue-preview.src.*?js$/,
        loader: 'babel'
    }

    Install plugin

    import VuePreview from 'vue2-preview'
    Vue.use(VuePreview)

    Examples

    <template>
      <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list, params, className)">
    </template>
    
    <script>
    export default {
        data () {
          return {
            list: [{
              src: 'https://placekitten.com/600/400',
              w: 600,
              h: 400
            }, {
              src: 'https://placekitten.com/1200/900',
              w: 1200,
              h: 900
            }]
          }
        }
      }
    </script>
    

    Mothods

    插件提供以下两个方法,vm代表组件实例

    vm.$preview.open(index, list, options)

    参数说明:

    参数 说明 类型 必需
    index 当前图片的索引值 Number
    list 图片列表 Array
    params 参数 String
    className 当前图片的className String
    options 预览插件的配置选项(参考PhotoSwipe配置 Object

    vm.$preview.close()

    License

    Install

    npm i zerocar-preview

    DownloadsWeekly Downloads

    16

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    10.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • lizhepeng