前端拼圖滑動驗證，兼容IE

1、前提：

剛開始引用這個插件時，是不兼容 IE的，修改了一行代碼    ctx.globalCompositeOperation = 'lighter'

2、調研：

這兩項經測試是可以正常顯示的，個人認爲lighter顯示更好。

3、效果圖 

代碼插件已上傳，歡迎來取，有用記得點贊哦~

4、應用此插件

• 登錄頁面引用
• template

• //用戶名
  //密碼
  //點擊完成驗證
  <div @click="clickVerify" class="login-click-verification">
                  {{clickVerify_word}}
              </div>
  //登錄按鈕
  //圖片驗證的引入
  <slide-verify v-if="verifyPhone" class="verify-place" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" :imgs="imgs">
  </slide-verify>

  script

• export default {
      data() {
        return {
          verifyPhone: false, //圖片驗證
          clickVerify_word:"點擊完成驗證",
          username: "", //用戶名
          password: "", //密碼
          dialog: "", //錯誤提示
          loading: false, //等待圈
        }
      },
  methods: {
        clickVerify() {
          this.dialog = "";
          this.verifyPhone = true;
        },
         onSuccess() {
          this.verifyPhone = false;
         this.clickVerify_word = "已驗證成功"
         },
  }

  css

.login-click-verification{
     background-color: rgb(232,240,254);
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    text-align: center;
    font-size: 2vh;
    line-height: 2.5;
    color: #409EFF;
    cursor: pointer;
    margin: 8px 0;
}

5、下載本資源，放置於：

將lib.zip放置於src文件夾下

main.js加入：  import SlideVerify from './lib/index' //驗證圖插件

                         Vue.use(SlideVerify)