vue中的 v-viewer+懒加载+属性修改
安装配置npm install v-viewer --savev-viewer库npm install vue-lazyload --save-dev懒加载<template><div id="app"><viewer :images="images"><img v-for="src ...
·
安装配置
npm install v-viewer --save v-viewer库
npm install vue-lazyload --save-dev 懒加载
<template>
<div id="app">
<viewer :images="images">
<img v-for="src in images" v-lazy="src" :key="src">需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
</viewer>
</div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
import VueLazyload from 'vue-lazyload';
Vue.use(Viewer)
Vue.use(VueLazyload, {
error: 'dist/error.png',
loading: 'dist/loading.gif',
});
//可在下面设置中设置
Viewer.setDefaults({
'zIndex': 9999,
'inline': true,
'button': true,
'navbar': true,
'title': true,
'toolbar': true,
'tooltip': true,
'movable': true,
'zoomable': true,
'rotatable': true,
'scalable': true,
'transition': true,
'fullscreen': true,
'keyboard': true,
'url': 'data-source'
})
export default {
data() {
images: ['1.jpg', '2.jpg']
}
}
</script>
通过下面的属性,可修改对应的功能
更多推荐
已为社区贡献9条内容
所有评论(0)