@linan919/nan-image-slider NPM

nan-image-slider

介绍 Introduction

nan-image-slider是一个图片滚动组件，基于Vue-CLI 3.0 创建，CSS样式依赖SASS。以下简称"slider组件"。

安装 Install

npm install -D @linan-919/nan-image-slider

或

npm i -D @linan-919/nan-image-slider

使用 Useage

引入 Import

在你的组件脚本中使用import引入slider组件并作为子组件

向slider组件传值 Props

slider组件的props对象如下：

// 图片数据
imageDatas: {
	type: Array,
	required: true,
},
// 背景色
bgColor: {
	type: String,
	required: false,
}

事件监听 Listen Event

slider组件中位于中间的图片被点击时，会向父组件发送一个名为"nan-image-click"的事件，并传递该图片在数组中的索引（index），你可以在父组件中监听这一事件并进行你想要的操作，例如跳转链接或通过路由跳转页面。

注意 Attention

请至少传入 5 个图片数据

示例 Example

// YourComponent.vue

<template>
	<div class="your-component">
		<NanImageSlider :imageDatas="imgArr" @nan-image-click="nanImgClick" bgColor="white"/>
	</div>
</template>

<script>
import NanImageSlider from '@linan-919/nan-image-slider'

export default {
	name: 'YourComponent',

	components: {
		NanImageSlider
	},

	data () {
		return {
			imgArr: [
				{
					name:'img01', alt:'图片01', src:'require('./src/01.jpg')', routeTo:'hello', link:'01.com'
				},
				{
					name:'img02', alt:'图片02', src:'require('./src/02.jpg')', routeTo:'hello', link:'02.com'
				},
				{
					name:'img03', alt:'图片03', src:'require('./src/03.jpg')', routeTo:'hello', link:'03.com'
				},
				{
					name:'img04', alt:'图片04', src:'require('./src/04.jpg')', routeTo:'hello', link:'04.com'
				},
				{
					name:'img05', alt:'图片05', src:'require('./src/05.jpg')', routeTo:'hello', link:'05.com'
				},
			],
		}
	},

	methods: {
		nanImgClick (value) {
			// value is the index of imgArr
			...
		},
	},
}
</script>

<style scoped lang="scss">
	...
</style>