vue 幻灯片组件_vue.js的幻灯片组件

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

<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(最低)	否

注意:

注意：

: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 幻灯片组件

vue 幻灯片组件_vue.js的幻灯片组件相关推荐

vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vuejs 传参向子组件父组件_VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
vue 动态路由_Vue.js应用性能优化三
在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码.虽然按照路由拆分代码非常有用,但在用户访问我们的站点后,仍然有很多内部代码不需要.在本 ...
vue滚动条禁止_vue.js中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 思路是这样的,当弹窗弹出时候,让b ...
angularjs1访问子组件_Vue学习笔记之组件的应用
Vue组件的应用: 1.基础使用:第一步创建组件,第二步注册组件,第三步使用组件.在注册组件是需要用到template的属性. 全局组件和局部组件组件的嵌套(父子组件):注意先后顺序,先声明,后面才 ...
vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...
vue vuex 挂载_vue.js,javascript_Vuex的初始化失败，一直显示没有挂载到根组件上，奇怪了！，vue.js,javascript - phpStudy...
Vuex的初始化失败,一直显示没有挂载到根组件上,奇怪了! 代码如下 import 'babel-polyfill' import Vue from 'vue' import VueRouter fr ...

vue 幻灯片组件_vue.js的幻灯片组件

Vue幻灯片放映 (vue-slideshows)

安装 (Installation)

用法 (Usage)

物产 (Properties)

大事记 (Events)

vue 幻灯片组件_vue.js的幻灯片组件相关推荐

最新文章

热门文章