Vue.js的360°产品图片查看器 - vue-360

Vue.js的360°产品图片查看器 - vue-360
插件名称 vue-360
发布时间 2020年6月11日
插件作者 rajeevgade

适用于Vue.js应用程序的全功能,启用触摸功能的360°产品图像查看器。

更多功能:

  • 自动播放
  • 图像放大/缩小
  • 逐帧旋转图像
  • 全屏模式

安装和下载:

# NPM
$ npm install vue-360 --save

如何使用它:

1.导入360°产品图像查看器。

import VueThreeSixty from 'vue-360'
import 'vue-360/dist/css/style.css'

2.注册组件。

Vue.use(VueThreeSixty)

3.将组件添加到模板,并按如下所示定义图像路径:

<vue-three-sixty 
  :amount=36
  imagePath="https://yourdomain.com/image-folder"
  fileName="image_{index}.jpg"
/>

4.所有可能的props。

imagePath: {
  type: String,
  require: true,
  default: ''
},
fileName: {
  type: String,
  require: true,
  default: ''
},
spinReverse: {
  type: Boolean,
  require: true,
  default: false,
},
amount: {
  type: Number,
  require: true,
  default: 24,
},
autoplay: {
  type: Boolean,
  require: false,
  default: false
},
loop: {
  type: Number,
  require: false,
  default: 1
},
boxShadow: {
  type: Boolean,
  require: false,
  default: false
},
buttonClass: {
  type: String,
  require: false,
  default: 'light'
},
hotspots: {
  type: Array,
  require: true,
  default: () => []
},
identifier: {
  type: String,
  require: true,
  default: () => uuidv1()
},
paddingIndex: {
  type: Boolean,
  require: false,
  default: false
}

变更日志:

02/03/2021

  • 增加了scrollImage道具(让您在转轮事件中滚动浏览图像)
  • 添加了disableZoom道具(让您禁用查看器上的缩放功能)

02/01/2021

  • disableZoom道具增加禁用缩放功能