vue-awsome-swiper稳定版本3.1.3及使用方法，API见swiper官网https://www.swiper.com.cn/api/index.html

1.npm和yarn安装/卸载执行命令// 安装依赖npm installyarn install// npm安装/移除插件命令//页面相关引用都要清除npm install xxx —savenpm uninastall xxx —save// yarn安装/移除插件命令//页面相关引用都要清除yarn add xxxyarn remove xxx2.安装方法：npm安装npm install

吃痴鱼

5001人浏览 · 2021-06-23 10:56:12

吃痴鱼 · 2021-06-23 10:56:12 发布

1.npm和yarn安装/卸载执行命令

// 安装依赖
npm install
yarn install

// npm安装/移除插件命令
//页面相关引用都要清除

npm install xxx —save 
npm uninastall xxx —save

// yarn安装/移除插件命令
//页面相关引用都要清除

yarn add xxx
yarn remove xxx

2.安装方法：

npm安装

npm install vue-awesome-swiper@3.1.3 --save

yarn安装

yarn add vue-awesome-swiper@3.1.3

3.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">
            <swiper
                v-if="listData.length > 1"
                ref="mySwiper"
                class="item"
                :options="swiperOption"
            >
                <swiper-slide
                    v-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自己或子元素时，自动初始化swiper
                observeParents: true, // 修改swiper的父元素时，自动初始化swiper
                autoplay: {
                    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 = true
        this.$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&paramId=` + 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 = false
                this.listData.push(...res.rows)
                if (this.listData.length === res.total) {
                    clearInterval(this.timer)
                }
            })
        },
        // 轮播方法
        listSwiper() {
            this.swiperOption = { // 控制大于4张图片的时候自动轮播
                loop: true,
                mousewheel: true,
                observer: true, // 修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, // 修改swiper的父元素时，自动初始化swiper
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false // 手动滑动后继续自动播放
                },
                speed: 1000,
                direction: 'vertical',
                slidesPerView: 5,
                slidesPerGroup: 5
            }
           /* this.listData.length >= 5 ? this.swiperOption = { // 控制大于4张图片的时候自动轮播
             loop: true,
             observer: true, // 修改swiper自己或子元素时，自动初始化swiper
             observeParents: true, // 修改swiper的父元素时，自动初始化swiper
             autoplay: {
                 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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^