vue-preview功能的实现

  • Post author:
  • Post category:vue


在移动端项目里面,社区和商城是非常重要的两个模块,社区模块就需要有类似朋友圈的效果展示;

最开始了解到了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;实现



版权声明:本文为weixin_38938009原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。