SpringBoot+Vue+ElementUI 实现视频播放 轮播图效果

前言

 Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用。视频轮播图我抽离成为一个组件、再其它Vue页面 直接引入该组件。传入视频链接列表就可以了。可以使用假数据、也可以使用后台查询到的视频链接地址替换。

使用步骤

1、 安装 vue-awesome-swiper

npm install vue-awesome-swiper@3.1.3 -S

 如果报错的话、建议使用管理员命令窗口再次执行：

2、引入到项目

全局引入

import Vue from 'vue'

// 引入 vue-awesome-swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'

//引入 vue-awesome-swiper 样式
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */)

局部引入

<script>
//页面引入vue-awesome-swiper 及其样式
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    // 注册 vue-awesome-swiper 组件
    swiper,
    swiperSlide
  },
};
</script>

使用案例【案例源码】

 我将改视频轮播图组件进行了封装、只需要再其它页面引入该组件、传入视频链接列表。就可以实现视频轮播图效果，案例代码较多，再我的个人公众号 回复 视频轮播图 即可获取到案例源码。

部分源码展示