前言
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>
使用案例【案例源码】
我将改视频轮播图组件进行了封装、只需要再其它页面引入该组件、传入视频链接列表。就可以实现视频轮播图效果,案例代码较多,再我的个人公众号 回复 视频轮播图 即可获取到案例源码。
部分源码展示