vue-preview功能的实现
在移动端项目里面,社区和商城是非常重要的两个模块,社区模块就需要有类似朋友圈的效果展示;最开始了解到了photoswipe 做了一个小图放大图的效果,但是效果并不理想,无法实现多张图片左右滑动的功能,一定是自己忽略了什么问题!!!于是寻求更好的解决方案,后了解到vue-prewview 实现功能;1:webpack.base.conf.js { test: /vue-preview.
在移动端项目里面,社区和商城是非常重要的两个模块,社区模块就需要有类似朋友圈的效果展示;
最开始了解到了photoswipe 做了一个小图放大图的效果,但是效果并不理想,无法实现多张图片左右滑动的功能,一定是自己忽略了什么问题!!!于是寻求更好的解决方案,后了解到vue-prewview 实现功能;
1:webpack.base.conf.js
{
test: /vue-preview.src.*?js$/,
loader: 'babel'
}
2:main.js
import 'swiper/dist/css/swiper.css'
import VuePreview from 'vue-preview'
// defalut install
console.log(VuePreview);
Vue.use(VuePreview)
3:组件
<vue-preview :slides="slide1" @close="handleClose" class="ass"></vue-preview>
slide1: []';
handleClose () {
console.log('close event')}
4:改变样式
<style lang="less" ></style>
*不能加scoped
5:裁剪功能实现多张图片缩略图一致
用object-fit:cover,fill,none,contain;实现
更多推荐
所有评论(0)