vue-concise-slider vue滑动组件【黑马web前端】

npm install vue-concise-slider --save

<template>
  <!--  制作一个框架包裹slider,设置宽度和高度 -->
   <div style="width:100%;margin:20px auto;height:400px">
        <!-- 配置slider组件  -->
        <slider ref="slider" :options="options">
            <!-- 使用slideritem组件   -->
            <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
            <!-- 设置loading,可自定义 -->
            <div slot="loading">loading...</div>
        </slider>
   </div>
  </template>
  <script>
  // import slider components
  import { slider, slideritem } from 'vue-concise-slider'
  export default {
     el: '#app',
     data () {
        return {
          //data list [array]
          someList:[
            {
              html: 'slide1',
              style: {
                'background': '#1bbc9b'
              }
            },
            {
              html: 'slide2',
              style: {
                'background': '#4bbfc3'
              }
            },
            {
              html: 'slide3',
              style: {
                'background': '#7baabe'
              }
            }
          ],
          //Slider configuration [obj]
          options: {
            currentPage: 0
          }
        }
      },
      components: {
        slider,
        slideritem
      }
  }
  </script>