vue-picture-preview
移動端Vue.js圖片預(yù)覽插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
安裝
npm
npm install --save vue-picture-preview
使用
首先在項目的入口文件中引入, 調(diào)用 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 指令來綁定他們的預(yù)覽功能
<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) 設(shè)置 isTitleEnable="false" 將禁用水平導(dǎo)航. 默認(rèn)值: true.
isHorizontalNavEnable: (boolean, optional) 設(shè)置 isHorizontalNavEnable="false" 將禁用底部標(biāo)題. 默認(rèn)值: true.
