Package Exports

vue-picture-preview-fix

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-picture-preview-fix) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-picture-preview-fix

PS: fix src load error.

移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.

安装

NPM

npm install --save vue-picture-preview-fix

使用

首先在项目的入口文件中引入, 调用 Vue.use 安装。

import vuePicturePreview from 'vue-picture-preview-fix'
Vue.use(vuePicturePreview)

在根组件添加 lg-preview 组件的位置

<!-- Vue root compoment template -->
<div id="app">
    <router-view></router-view>
    <lg-preview></lg-preview>
</div>

对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能

<img v-for="(img,index) in imgs"
     v-preview="img.url"
     :src="img.url"
     :alt="img.title"
     :key="index"
     preview-title-enable="true"
     preview-nav-enable="true">

export default {
    data () {
        return {
            imgs: [
                {
                  url: 'http://covteam.u.qiniudn.com/ka2.jpg',
                  title: 'pic1'
                },
                {
                  url: 'http://covteam.u.qiniudn.com/poster.png',
                  title: 'pic2'
                }
            ]
        }
    }
}

<style scoped>
img {
   width: 100%;
   height: 100%;
}
</style>

API

isTitleEnable: (boolean, optional) 设置 preview-title-enable="false" 将禁用底部标题. 默认值: true.
isHorizontalNavEnable: (boolean, optional) 设置 preview-nav-enable="false" 将禁用水平导航. 默认值: true.