当前位置: 首页 > 工具软件 > awesome-npm > 使用案例 >

如何正确的使用最新版本的vue-awesome-swiper?

唐煜
2023-12-01

最近要做一个走马灯形式的效果,是多个卡片式的效果。于是,想到了 vue-awesome-swiper这个插件。这是插件是基于swiper的。

首先,安装插件

npm install swiper vue-awesome-swiper --save
 
# or
yarn add swiper vue-awesome-swiper

全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

这时候会发现发错,爆出的错误是

css没有引入

经过查找

css的引入方式是:

import 'swiper/swiper-bundle.css'

最后附上局部使用vue-awesome-swipe的方式:

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

目前所用版本:

vue-awesome-swiper => ^4.1.1

swiper=> ^7.4.1

 类似资料: