1.npm和yarn安装/卸载执行命令
// 安装依赖
npm install
yarn install// npm安装/移除插件命令
//页面相关引用都要清除npm install xxx —save
npm uninastall xxx —save// yarn安装/移除插件命令
//页面相关引用都要清除yarn add xxx
yarn remove xxx2.安装方法：
npm安装
npm install vue-awesome-swiper@3.1.3 --saveyarn安装
yarn add vue-awesome-swiper@3.1.33.vue-awsome-swiper引用方式
按照组件形式局部导入：
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {name: 'Index',components: {swiper,swiperSlide},data(){return{}}
}或者全局导入(大家不推荐，我也不推荐)：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'// require styles
import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)
案列：
<template><div v-loading="loading" class="table-container" element-loading-background="rgba(0, 0, 0, 0)"><div class="table_head"><ul class="table_head--list"><li class="smooth">xxx</li><li class="smooth">xxx</li><li class="smooth">xxx</li><li class="danger">xxx</li><li class="orange">xxx</li><li class="warn">xxx</li><li class="green">xxx</li></ul></div><!-- 滚动--><div class="seamless-warp" @mouseenter="on_top_enter" @mouseleave="on_top_leave"><swiperv-if="listData.length > 1"ref="mySwiper"class="item":options="swiperOption"><swiper-slidev-for="(item,index) in listData":key="index"class="swiperslide"><div class="listdata" @click.stop.prevent="router(item.id)"><span class="title" v-text="$isEmpty(item.profile.realName)?'-':item.profile.realName" /><span class="date" v-text="$isEmpty(item.profile.phone)?'-':item.profile.phone" /><span class="date" v-text="$isEmpty(item.profile.idCard)?'-':item.profile.idCard" /><span class="date" v-text="trainTime(item.labourTrainingPlan, '3')" /><span class="date" v-text="trainTime(item.labourTrainingPlan, '1')" /><span class="date" v-text="trainTime(item.labourTrainingPlan, '2')" /><span class="date" v-text="trainTime(item.labourTrainingPlan, '4')" /></div></swiper-slide></swiper><div v-else class="is-swiper-none titleblue">暂无数据</div></div></div></template><script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { listEmployee, trainCount } from '@/api/qzg'
const vm = this
export default {name: 'Index',components: {swiper,swiperSlide},data() {return {current: 1,timer: undefined,queryParams: {teamId: this.$store.getters.teamId,projectId: this.$store.getters.projectId,contractSectId: undefined},contractId: '',sysId: '',// swiper轮播swiperOption: { // swiper3/* autoplay: { // 自动轮播delay: 3000,disableOnInteraction: false},*//* loop: true,observer: true, // 修改swiper自己或子元素时，自动初始化swiperobserveParents: true, // 修改swiper的父元素时，自动初始化swiperautoplay: {delay: 3000,disableOnInteraction: false // 手动滑动后继续自动播放},direction: 'vertical',slidesPerView : 7,centeredSlides: false,centeredSlidesBounds: false*/},// 数据数组listData: [],loading: false}},computed: {mySwiper() {return this.$refs.mySwiper.swiper},trainTime() {return (value, type) => {const results = value.filter(item => item.trainingType === type)return this.$isNotEmpty(results) ? results[0].trainingTime : '-'}}},created() {this.loading = truethis.$nextTick(() => {this.listSwiper()})this.getOptions()this.timer = setInterval(() => {this.current++this.getOptions()}, 5000)this.loading = true},methods: {router(id) {this.sysId = 'fc68a49a549df12e9a6ab6cb81065f82'this.$store.dispatch('setSystemId', this.sysId).then(() => {window.open(`${process.env.VUE_APP_ADDRESS}labour/employee/addPages?type=edit¶mId=` + id, '_blank')})},// 获取接口数据getOptions() {listEmployee({current: this.current,pageSize: 15,params: {teamId: this.$store.getters.teamId,projectId: this.$store.getters.projectId,status: '0'}}).then(res => {this.loading = falsethis.listData.push(...res.rows)if (this.listData.length === res.total) {clearInterval(this.timer)}})},// 轮播方法listSwiper() {this.swiperOption = { // 控制大于4张图片的时候自动轮播loop: true,mousewheel: true,observer: true, // 修改swiper自己或子元素时，自动初始化swiperobserveParents: true, // 修改swiper的父元素时，自动初始化swiperautoplay: {delay: 3000,disableOnInteraction: false // 手动滑动后继续自动播放},speed: 1000,direction: 'vertical',slidesPerView: 5,slidesPerGroup: 5}/* this.listData.length >= 5 ? this.swiperOption = { // 控制大于4张图片的时候自动轮播loop: true,observer: true, // 修改swiper自己或子元素时，自动初始化swiperobserveParents: true, // 修改swiper的父元素时，自动初始化swiperautoplay: {delay: 5000,disableOnInteraction: false // 手动滑动后继续自动播放},speed:1000,direction: 'vertical',slidesPerView : 5, // 显示5条数据slidesPerGroup : 5, // 5条数据为一组} : this.swiperOption = {autoplay: false,slidesPerView: 5, //direction: 'vertical',loop: false, // 无限轮播simulateTouch: false // 禁止鼠标模拟}*/},// 鼠标进入停止自动轮播on_top_enter() {this.mySwiper.autoplay.stop()},// 鼠标移除自动轮播on_top_leave() {this.mySwiper.autoplay.start()}}
}
</script><style lang="scss" scoped>.table-container{width: 100%;height: 100%;overflow: hidden;.table_head{width: 100%;height: 20%;&--list{width: 100%;height: 40px;display: flex;justify-content: space-between;align-items: center;font-size: 14px;color: #ffffff;margin:0;background: linear-gradient(0deg, rgba(13, 95, 215, 0.1),rgba(13, 95, 215, 0.3));& > li{width: 13%;text-align: center;/*flex: 1;*/}& > li:first-child,& > li:nth-child(2){width: 7%;}}}
/*.swiper-slide-active{background: rgba(0, 26, 68, 0.7);}*/.seamless-warp {height: 80%;overflow: hidden;padding: 5px 0;display: flex;justify-content:center;align-items: center;.item{color: #fff;list-style: none;.listdata{width: 100%;/*height: 27px;*/display: flex;justify-content: space-between;align-items: center;cursor: pointer;& > span{/*flex: 1;*/width: 13%;font-size: 12px;text-align: center;}& > span:first-child,& > span:nth-child(2){width: 7%;}}/*.swiperslide:nth-child(2n){background: rgba(0, 26, 68, 1);}*/}}}</style>
<style lang="scss" scoped>.swiper-container{width: 100%;height: 100%;}.swiperslide{display: flex;align-items: center;}.swiperslide:nth-of-type(odd){background: rgba(0, 26, 68, 1);}
</style>