Swiper+Vue的自定义指令实现轮播图封装

在vue-cli的脚手架环境下,可能会涉及到轮播图组件的复用,下面就来对轮播图的组件进行封装。
1、安装Swiper插件

在项目的根目录下打开命令行:

npm install swiper

检查是否安装完成,可以在package.json的文件中查看。如果有swiper表示安装完成。
Swiper+Vue的自定义指令实现轮播图封装_第1张图片

2、准备好一个轮播图组件



好了,这个轮播图的组件已经准备好了,接下来就是轮播图组件的使用了。

3、自定义指令v-swiper

Swiper插件提供的使用轮播图的方法是要通过new Swiper()方法来实现的,因为考虑到轮播图组件的复用性,我们自定义了一个指令来完成Swiper的实例化。
我们在src目录下,新建一个文件(文件名自定义),然后在文件里面创建一个js文件用来写自定义指令。笔者的目录是:src/depswiper/swip.js

import Vue from "vue"  //引入vue环境
import Swiper from "swiper"  //引入swiper第三方插件
//通过Vue.directive自定义一个指令
Vue.directive("swiper",{
//通过 inserted方法,在指令插入时候加入参数,完成实例化
    inserted(el,binding,vnode){
        //代表最后一个元素插入完毕了,再进进行一次实例化操作就可以了
        if(binding.value.current === binding.value.length-1){
            new Swiper("."+binding.value.swipe,{ //默认swiper执行3次,因为插入了3个swiper-slide的真实dom,我们要确定   是否完成所有的swiper-slide,然后再实例化,不然会报错。
                pagination:{
                    el:".swiper-pagination"
                }
            })
        }
    }
})
4、引入自定义指令

自定义指令v-swiper的js文件完成以后,需要在主入口的js文件中引入,这样才能使用。
在main.js文件中引入(路径一定要写对):

import Vue from 'vue'
import App from './App.vue'
import router from './router'

//加载自定义指令文件swip.js,@在vue-cli中默认表示src目录
import "@depswiper/swip.js"

new Vue({
  router,  
  render: h => h(App)
}).$mount('#app')
5、轮播图+自定义指令使用

我们在哪个组件里面需要用到轮播图,就在哪个组件里面引用。



                    
                    

你可能感兴趣的:(Swiper+Vue的自定义指令实现轮播图封装)