移動端Vue.js圖檔預覽插件

vue-picture-preview

移動端Vue.js圖檔預覽插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.

安裝

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,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.