import 导入
1 import banner1 from "../../assets/img/banner/banner1.jpeg"2 import banner2 from "../../assets/img/banner/banner2.jpeg"
3 import banner3 from "../../assets/img/banner/banner3.jpeg"
require导入
1require("./../../assets/img/banner/banner1.jpeg")2require("./../../assets/img/banner/banner2.jpeg")
3require("./../../assets/img/banner/banner3.jpeg")
这两种方式都可以，
SliderIndex.vue
1<template>2 <div style="width:1080px;margin: 0 auto ">
3 <slider :sliderArray="sliderArray"></slider>
4 </div>
5</template>
6<script>
7 import slider from "./Slider"
8 import banner1 from "../../assets/img/banner/banner1.jpeg"
9 import banner2 from "../../assets/img/banner/banner2.jpeg"
10 import banner3 from "../../assets/img/banner/banner3.jpeg"
11 export default {
12 name: "SliderIndex",
13 components:{
14 slider:slider
15 },
16 data(){
17 return{
18 sliderArray:[banner1,banner2,banner3]
19 }
20 }
21 }
22</script>
23
24<style scoped>
25
26</style>
Slide.vue
1<template>2 <div class="banner-container">
3 <ul class="images">
4 <li v-for="(item,i) of sliderArray" :key="i">
5 <a href="javascript:void(0)"><img :src=item alt=""></a>
6 </li>
7 </ul>
8 <ul class="dots">
9 <li v-for="(item,i) of sliderArray" :key=\'i\'></li>
10 </ul>
11 </div>
12</template>
13
14<script>
15 export default {
16 name: "Slider",
17 props:{
18 sliderArray:{
19 require:true,
20 type:Array,
21 }
22 }
23 }
24</script>
25
26<style scoped>
27 /* 样式 */
28 .banner-container {
29 height: 350px;
30 position: relative;
31 overflow: hidden;
32 }
33 .banner-container li {
34 display: block;
35 width: 1080px;
36 height: 100%;
37 float: left;
38 }
39 .images {
40 height: 100%;
41 transition: 0.5s;
42 }
43 .banner-container img {
44 width: 1080px;
45 height: 100%;
46 }
47 .dots {
48 position: absolute;
49 bottom: 10px;
50 right: 10px;
51 display: flex;
52 }
53 .dots li {
54 width: 10px;
55 cursor: pointer;
56 height: 10px;
57 margin: 0 3px;
58 border-radius: 50%;
59 border: 1px solid;
60 color: #fff;
61 }
62 .dots li.active {
63 background: #fff;
64 }
65</style>