Vue.js的3D产品微调器

Vue.js的3D产品微调器
插件名称 vue-product-spinner
发布时间 2020年6月9日
插件作者 micheleriva

没有为Vue.js构建依赖项的3D产品微调器。

路线图

  •  添加图像预加载器
  •  添加自动旋转
  •  添加挂钩
  •  解决基本错误
  •  添加“鼠标移动”支持
  •  添加“鼠标滚动”支持
  •  添加滑块支持
  •  添加触摸屏支持

安装

npm

npm i vue-product-spinner

yarn

yarn add vue-product-spinner

UMD build

<script src="https://cdn.jsdelivr.net/npm/vue-product-spinner@latest/dist/VueProductSpinner.umd.min.js" type="text/javascript"></script>

用法

VueProductSpinner将允许您添加任何组件以处理图像预取时间。
您可以按以下方式使用它:

<template>
  <VueProductSpinner 
    :imgs="imgs" 
    :slider="true"
  >
    <PreloadSpinnerComponent />
  </VueProductSpinner>
</template>

<script>
  import VueProductSpinner from 'vue-product-spinner'
  import PreloadSpinnerComponent from 'some-library'

  export default {
    components: {
      VueProductSpinner
    },
    data() {
      return {
        images: [
          'img1.jpg',
          'img2.jpg',
          'img3.jpg'
        ]
      }
    }
  }
</script>

props

Prop 名称类型是必须的默认值描述
imagesstring[]required[] 要显示的图像数组
infiniteBoolean可选true 无限循环
speedNumber 可选 3 旋转速度
touchDragBoolean 可选 true 处理触摸事件
mouseWheelBoolean 可选 true 处理鼠标滚轮事件
mouseDragBoolean 可选 true 处理鼠标拖动事件
sliderBoolean 可选 false 显示滑杆输入
sliderClassString 可选 自定义滑块CSS类