网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
vue-picture-swipe是一个响应式,支持触摸的Vue.js图库组件,可在全屏模式窗口中展示您的图像。支持延迟加载,图像缩放和社交共享。基于photoswipe库。
使用方法
1.导入组件并注册
import VuePictureSwipe from 'vue-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);
new Vue({
el: '#app'
})
2.添加组件
<template>
<vue-picture-swipe :items="items"></vue-picture-swipe>
</template>
<script>
import VuePictureSwipe from 'vue-picture-swipe';
export default {
data() {
return {
items: [{
src: 'http://via.placeholder.com/600x400',
thumbnail: 'http://via.placeholder.com/64x64',
w: 600,
h: 400,
alt: 'some numbers on a grey background' // optional alt attribute for thumbnail image
},
{
src: 'http://via.placeholder.com/1200x900',
thumbnail: 'http://via.placeholder.com/64x64',
w: 1200,
h: 900
}
]};
}
}
</script>
转载请注明来源:响应式、支持触摸的Vue图像库(vue-picture-swipe)
本文永久链接地址:https://www.moyouyouw.cn/code/1314.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论