新手入门,vue.js插件vue-awesome-swiper使用时遇到了些问题
就是效果实现了,但是不知道怎么调用swiper的API对swiper进行控制
效果实现代码:
<template>
<div class="swiperComponent">
<swiper :options="swiperOption">
<swiper-slide class="swiper-no-swiping" data-id="swiper" v-for="(slide, slideIndex) in answer">
<div>
{{ slide }}
<h3>{{slide.title}}</h3>
<label v-if="!slide.check" v-for="(option, index) in slide.options">
<!-- <input type="checkbox" :name="slide.item" :value="index" v-model="checkList.check"> -->
<input type="checkbox" :name="slide.item" :value="index" v-model="currentCheckList[slideIndex].currentOption">
<span>{{option}}</span>
</label>
<label v-else>
<input type="radio" :name="slide.item" :value="index" v-model="currentCheckList[slideIndex].currentOption">
<span>{{option}}</span>
</label>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
<div v-if="!lastPage" class="swiper-button-next swiper-button" slot="button-next" @click="nextPage">下一题</div>
</swiper>
<div v-if="lastPage" class="swiper-button-next swiper-button submit-button" @click="nextPage">提交答卷</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOption: {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationType: 'progress'
},
swiperSlides: [1, 2, 3, 4, 5],
currentPage: 1,
lastPage: false,
currentCheckList: []
}
}
// 代码片段
以上代码可以使用swiper了,请问我该怎么调用swiper的API
按照文档上这样做了
import Vue from 'vue'
import AwesomeSwiper from 'vue-awesome-swiper'
Vue.use(AwesomeSwiper)
之后该怎么办?
文档有写哦,
SPA模式下:用ref属性获取swiper实例对象,便可以在宿主组件使用swiper对象的所有方法和操作
SSR模式下:attr-name获取swiper实例对象,使用同上