JSPM

vue-picture-preview

0.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 109
  • Score
    100M100P100Q79824F
  • License MIT

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

Package Exports

  • vue-picture-preview

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

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

img img img

安装

npm

npm install --save vue-picture-preview

使用

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

import vuePicturePreview from 'vue-picture-preview'
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 in imgs" v-preview="img" :src="img">
export default {
    data () {
        return {
            imgs: ['http://covteam.u.qiniudn.com/ka2.jpg', 'http://covteam.u.qiniudn.com/poster.png']
        }
    }
}

API

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