Vue与SpringBoot（四）实现图片走马灯效果

1、需要在页面上实现图片走马灯效果，同时点击图片查看详情效果

2、实现代码：

（1）跑马灯图片页面代码

 <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="item in books" :key="item.id">
      <div class="cover" @click="viewBook(item)">
      <h3 class="medium"><img :src="item.cover" alt="封面"></h3>
      </div>
    </el-carousel-item>
  </el-carousel>

<!--点击图片的弹出页 -->
<book-view ref="bookViewCard"></book-view>

js处理：

import BookView from './bookView'
export default {
  name: 'Appindex',
  components: {BookView},
  data () {
    return {
      books: [],
      currentPage: 1,
      pagesize: 5
    }
  },
  mounted: function () {
    this.loadbooks()
  },
  methods: {
    loadbooks () {
      var _this = this
      this.$axios.get('/books').then(resp => {
        if (resp && resp.status === 200) {
          _this.books = resp.data
        }
      })
    },
    viewBook (book) {
      this.$refs.bookViewCard.dialogFormVisible = true
      this.$refs.bookViewCard.bookViewCard = {
        id: book.id,
        title: book.title,
        author: book.author,
        date: book.date,
        press: book.press,
        cover: book.cover,
        abs: book.abs,
        press:book.press,
        cname: book.cname
      }
    }
  }
}

（2）弹出页代码

   <template>   
   <el-dialog
      title="图书信息详情"
      :visible.sync="dialogFormVisible">
      <el-card class="box-card" ref="bookViewCard">
        <div>
            <el-row>
            <el-col :span="12"><img :src="bookViewCard.cover" alt="封面" width="200px"></el-col>
            <el-col :span="12"> <div class="title">{{bookViewCard.title}}</div><br />
            <div class="author">作者：{{bookViewCard.author}}<br />
                               出版时间：{{bookViewCard.date}} <br />
                               图书分类：{{bookViewCard.cname}} <br />
                               出版社：{{bookViewCard.press}}</div> </el-col>
            </el-row>
        </div>
        <div class="abs"><br />{{bookViewCard.abs}}</div>
     </el-card>
    </el-dialog>
    </template>

<script>
export default {
  name: 'BookView',
  data () {
    return {
      bookViewCard: '',
      dialogFormVisible: false
    }
  },
  methods: {
  }
}
</script>

<style>
  .title {
    color: #000;
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
    margin: 0;
  }
  .author {
    text-align: left;
    line-height: 25px;
  }  
  .abs {
    text-align: left;
    line-height: 25px;
  }  
</style>

 

其中需要注意的情况有：click点击事件，

import页面的ref