Element UI + Swiper 實現表單驗證

swiper如今已是成熟階段，各方面都很穩定。

也不侷限一個輪播圖用到swiper，很強。

公司項目脫離不了element ，swiper也是

利用swiper取消了自動輪播，改成手動滑動，用表單代替圖片，這樣就一屏屏form表單

滑動到下一屏時，會觸發element 裏表單驗證，表單未填寫會禁止用戶滑動到下一頁。

swiperOption: { //  swiper相關配置
        pagination: {
          el: '.swiper-pagination'  // 幾個小點分頁器
        },
        paginationClickable: true, 
        autoplay: 1500, 
        cancelable: false,
        autoplayDisableOnInteraction: false,
        loop: false,
        autoHeight: true,
        touchMoveStopPropagation: true, // 阻止touchMove冒泡事件
        allowSlideNext: false, // 禁止用戶向右或向上滑動

        coverflow: {
          rotate: 30,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows: true
        },
        on: {
        // swiper內置方法，當每一頁發生移動時觸發驗證方法
          sliderMove: () => {
        // 箭頭函數裏獲取到swiper的實例，this->Swiper
            let swiper = this.$refs.mySwiper.swiper
            let i = swiper.activeIndex // 變量名i存取swiper的每一頁索引
            if (i === 0) {
            //下面是element 提供的表單驗證
              this.$refs['form'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未填寫完表單')
                }
              })
            } else if (i === 1) {
              this.$refs['formList'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未輸入完表單')
                }
              })
            } else if (i === 2) {
              this.$refs['formScend'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未輸入完表單')
                }
              })
            } else if (i === 3) {
              this.$refs['formTrist'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未輸入完表單')
                }
              })
            } else if (i === 4) {
              this.$refs['formFive'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未輸入完表單')
                }
              })
            } else if (i === 5) {
              this.$refs['formSix'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未輸入完表單')
                }
              })
            }
          }
        }
      },
複製代碼

固然當時也遇到了問題，如下總結：

1. swiper相關配置在vue data裏，想用swiper內置的方法，就得首先改變this指向，讓指向Swiper實例，this---Swiper

2. let swiper = this.$refs.mySwiper.swiper ，報錯mySwiper找不到，想要找到前提是得在swiper結構上加上ref="mySwiper"，告訴mySwiper是誰

<swiper :options="swiperOption" ref="mySwiper">
..... //
</swiper>
複製代碼

3. 表單填寫完，滑動到下一頁時，驗證會當即觸發，不會等到再次滑動時觸發。方法里加上條件if判斷當前頁索引是幾，再去觸發方方法

功能算得上是很簡單，不難，也沒有什麼邏輯性。最主要的是細節處理

若是你以爲對你有幫助，煩請點個讚唄👍