vue 幻灯片组件

Vue幻灯片放映 (vue-slideshows)

a slideshow component for vue.js.

vue.js的幻灯片组件。

安装 (Installation)

Using npm

使用npm

npm install vue-slideshows --save
#or
cnpm install vue-slideshows --save

用法 (Usage)

In main.js

在main.js中

import Vue from 'vue'
import slideShows from 'vue-slideshows'

Vue.use(slideShows)

// new Vue({ //... })

In_.vue

In_.vue

<slideshow :data="imgList" @jump="jumpTo" />

export default {
  name: "demo",
  data(){
    return {
      imgList: [
        // the object must have `src` property
        // `title` : img 's title
        // `src` : img 's src
        {title: "defalut" , src: "./images/1.jpg"},
        {title: "defalut2" , src: "./images/2.jpg"},
        // ...
      ]
    }
  },
  methods: {
    jumpTo(){
      // do somethig when you click the img ...
    }
  }
}

物产 (Properties)

属性	类型	说明	可选值	是否必需
w	String	轮播图宽度	100% (默认)	否
h	String	轮播图高度	340px ( 默认)	否
data	Array of object	轮播数据	默认展示的本地测试图片 使用 :data 覆盖即可	是
autoplay	Boolean	是否开启自动循环轮播	true (默认)	否
interval	Number	自动轮播间隔毫秒数	2000 (默认)	否

属性	类型	说明	任选值	是否必需
w	串	轮播图宽度	100％(最低)	否
H	串	轮播图高度	340px(默认)	否
数据	对象数组	轮播数据	默认展示的本地测试图片使用:data覆盖即可	是
自动播放	布尔型	是否开启自动循环轮播	true(最低)	否
间隔	数	自动轮播间隔毫秒数	2000(最低)	否

注意:

注意：

1. :data prop 必须是对象数组类型，且该对象中必须包含 src 字段 (图片地址)

   :data prop必须是对象类别类型，并且该对象中必须包含src细分(图片地址)

大事记 (Events)

@jump

@跳

点击某张图片时触发句柄

点击某张图片时触发句柄

<slideshow @jump="jumpTo" />

export default {
  name: "demo",
  data(){
    return {}
  },
  methods: {
    jumpTo(info){
      // `info` is the data of current img
      // do somethig when you click the img ...
    }
  }
}

翻译自: https://vuejsexamples.com/a-slideshow-component-for-vue-js/

vue 幻灯片组件