更新记录
0.0.1(2020-07-22) 下载此版本
首次发布
平台兼容性
仿网易云轮播图,走马灯,swiper,carousel
版本
0.0.1(2020-07-22)
示例图
用法
<template>
<carousel :img-list="imgList" url-key="url" @selected="selectedBanner"/>
</template>
<script>
import carousel from '@/components/vear-carousel/vear-carousel'
export default {
components: {
carousel
},
data() {
return {
imgList: [{
url: 'https://img9.51tietu.net/pic/2019-091200/vgkpidei2tjvgkpidei2tj.jpg',
id: 1
},{
url: 'https://img9.51tietu.net/pic/2019-091200/euzekmi5m23euzekmi5m23.jpg',
id: 2
},{
url: 'https://img9.51tietu.net/pic/2019-091200/143tt0ta4sr143tt0ta4sr.jpg',
id: 3
},{
url: 'https://img9.51tietu.net/pic/2019-091200/ff1vqwm3q33ff1vqwm3q33.jpg',
id: 4
},]
}
},
methods: {
selectedBanner(item, index) {
console.log('🥒', item, index)
}
}
}
</script>
传参
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
imgList | Array | [] | 图片数组,是个对象数组 |
urlKey | String | '' | 从子项对象里取出图片url的key |
事件
事件名 | 说明 |
---|---|
selected | selected(item, index),选中的图片item,选中的图片index |