Vue 翻转图像效果组件– VueRollr

Vue 翻转图像效果组件– VueRollr
插件名称 VueRollr
发布时间 2020年7月15日
插件作者 japick

翻转图像效果,使访问者可以使用鼠标悬停在图像之间切换。还支持HTML5视频。

在移动设备上运行时,它会自动将图像转换为自动幻灯片显示。

安装和下载:

# NPM
$ npm i vuerollr --save

如何使用它:

1.导入VueRollr。

import VueRollr from 'vuerollr';

2.注册组件。

export default {
  components: {
    VueRollr
  }
}

3.将图像和视频添加到VueRollr组件。

<template>
  <div>
    <VueRollr>
      <img src="1.jpg">
      <img src="2.jpg">
      <video loop autoplay muted>
        <source src="3.mp4">
      </video>
    </VueRollr>
  </div>
</template>

4. Props 。

breakpoint: {
  type: Number,
  default: 768
},
speed: {
  type: Number,
  default: 1000
}