vue中使用swiper插件

最新推荐文章于 2025-05-31 20:13:02 发布

张大晴

最新推荐文章于 2025-05-31 20:13:02 发布

阅读量375

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/zhangshab/article/details/100073963

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue项目中使用Swiper插件的步骤，包括查看swiper文档，引入swiper到项目，以及解决在main.js和.vue文件中使用时遇到的`Uncaught TypeError`问题。错误产生原因是webpack 2不支持import和module.exports混用，解决方法是删除.babelrc文件中'plugins': ['transform-runtime']这一项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.看swiper文档，如何使用swiper （版本swiper-3.4.2完整压缩包）

例子：

swiper文档地址：https://3.swiper.com.cn/demo/index.html

在官网上找到了一个例子。如何看其对应代码

将swiper引入到vue项目中

在vue相中使用：

main.js文件中

某一个.vue文件中使用该插件：

<template>
    <div>
        <!-- 查询部分 -->
        <div>
            <search-panel>
                <el-form :model="form" ref="formFiled" class="form" inline label-position="right">
                    <el-row>
                        <el-col :span="6" :offset="7">
                            <el-form-item class="card-search search-input">
                                <el-input placeholder="请输入相应证件号" v-model="form.cardNo" suffix-icon="el-icon-search">
                                    <el-select v-model="searchSelect" slot="prepend">
                                        <el-option v-for="item in searchSelectData" 
                                            :key="item.value"
                                            :label="item.label" 
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-input>

                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item class="search-input search-for-noSelect">
                                <el-input clearable v-model="form.name" 
                                    placeholder="请输入客户姓名"
                                    prefix-icon="el-icon-user"
                                    suffix-icon="el-icon-search">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-button v-if="disabledQuery" type="success" class="search-btn" 
                                size="medium" style="margin-right: 16px;">查询
                            </el-button>

                            <el-button v-if="!disabledQuery" :loading="true" type="success" size="medium" style="margin-right: 16px;"
                                        disabled>查询中
                            </el-button>
                            <el-button type="success" size="medium" class="search-reset" 
                                style="margin-right: 26px;">重置
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </search-panel>
        </div>
        <!-- 内容展示部分 -->
        <div class="content-con content-height">
            <div class="real-content">
               
                <!-- swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in 9" :key="index">
                            <!-- 标题 -->
                            <div class="title-card" :class="swiperClass[index%4]">
                                <span class="line-shu">|</span>Slide {{index}}
                            </div>
                            <!-- 内容 -->
                            <div class="content-card" :class="swiperClass[index%4]">
                                <p>
                                    <span class="left-span">保单号:</span><span class="left-right">231004****09220***</span>
                                </p>
                                <p>
                                    <span class="left-span">保单状态:</span><span class="left-right">有效</span>
                                </p>
                                <p>
                                    <span class="left-span">生效期:</span><span class="left-right">2019.08.22</span>
                                </p>
                                <!-- <p>
                                    <span class="left-span">保单号:</span><span>22222222222</span>
                                </p> -->
                            </div>
                        </div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
              
               
                <!-- 表格 -->
                <div class="custom-table-con">
                    
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import searchPanel from "@/components/searchPanel";
export default {
    data(){
        return {
            form:{
                name:'',
                cardNo:''
            },
            searchSelect:'选项1',
            searchSelectData:[{
                value: '选项1',
                label: '身份证'
            }, {
                value: '选项2',
                label: '护照'
            }, {
                value: '选项3',
                label: '军官证'
            }, {
                value: '选项4',
                label: '驾照'
            }, {
                value: '选项5',
                label: '户口本'
            }],
            swiperClass:["swiper0","swiper1","swiper2","swiper3"],
            disabledQuery: true
        }
    },
    components:{
        searchPanel
    },
    mounted(){
        this.initSwiper();
    },
    methods:{
        initSwiper(){
            var swiper = new Swiper('.swiper-container', {
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                slidesPerView: 4,
                spaceBetween: 20
            });
        }
    }
}
</script>

<style lang="less" scoped>
    @import "../../style/basicStyle.less";
    @pWidth: 12px;
    .content-height{
        height: calc(100% - 116px);
        padding-top: 22px;
        padding-left: 28px; 
        padding-right: 28px; 
        .real-content{
            height: 100%;
            // background: pink;
            .swiper-container{
                height: 245px;
            }
            
            
        }
        .swiper-button-next,.swiper-button-prev{
            background-image:url("../../assets/image/insurancePolicySearch/right.png");
            background-size: 100% 100%;
            width: 44px !important;
        }
        .swiper-button-prev{
            transform: rotate(-180deg);
        }
            
        .swiper-slide{
            font-size: 16px;
            border-radius: 4px;
            box-shadow: 2px 2px 10px #dad9d9;
            height: 240px;
            cursor: pointer;
            .title-card{
                height: 48px;
                line-height: 48px;
                padding-left: 14px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }
            .line-shu{
                display: inline-block;
                font-weight: bold;
                margin-right: 10px; 
            }
            .content-card{
                font-size: 14px;
                background: #ffffff;
                height: calc(100% - 48px);
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;

目录结构：