vue 實現滑動塊解鎖示例詳解

yarn add  element-ui -S   or   npm i element-ui -S

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
+  import ElementUI from 'element-ui'  
+  import 'element-ui/lib/theme-chalk/index.css'
    Vue.config.productionTip = false
+  Vue.use(ElementUI)
    new Vue({
      router,
      store,
 +   el: '#app',
      render: h => h(App)
    }).$mount('#app')

<template>
  <div class="about">
  +   <el-button type="primary">主要按鈕</el-button>
    <h1>This is an about page</h1>
  </div>
</template>

<template>
  <div class="login-container">
    <div class="login-header">
      <h1>xxx系統</h1>
    </div>
   <div class="login-body">
      <div class="login-form-container">
        <el-form
          ref="loginFormRef"
          class="form-style"
          :label-position="`right`"
          :model="loginFormData"
          status-icon
        >
          <el-form-item
            name="username"
            prop="username"
            >
            <el-input
              v-model="loginFormData.username"
              placeholder="請輸入用戶名"
              prefix-icon="el-icon-user"
              clearable
            />
          </el-form-item>
          <el-form-item
            class="el-item-style"
            name="password"
            prop="password"
          >
            <!-- 密碼框 -->
            <el-input
              prefix-icon="el-icon-lock"
              v-model="loginFormData.password"
              :type="`${hasOpenEye? 'text':'password'}`"
              placeholder="請輸入密碼">
              <i
                slot="suffix"
                :class="[hasOpenEye ? 'el-icon-unlock' : 'el-icon-lock']"
                style="font-size: 14px; cursor: pointer"
                @click="hasOpenEye = !hasOpenEye"/>
            </el-input>
          </el-form-item>
          <el-form-item class="el-item-style">
            <el-button
              :loading="false"
              style="
                width: 100%;
                height: 46px;
                line-height: 15px;
                font-size: 23px;
              "
              type="primary"
              @click="login"
            >登錄</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 登錄表單數據
  data () {
  return {
    loginFormData: {
      username: "123232",
      password: "21232"
    },
    hasOpenEye : false, // 是否顯示密碼
  }
  },
  components: {},
  methods: {
    login () {},
  },
}
</script>

<style lang="less" scoped>
.login-container {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  user-select: none;
  flex-direction: column;
  .login-header {
    display: flex;
    align-items: center;
    padding-left: 50px;
    cursor: pointer;
  }
  .login-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #322b34;
    font-size: 12px;
  }
  .login-header,
  .login-footer {
    height: 10%;
  }
  .login-body {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    .login-form-container {
      width: 30%;
      border: 1px solid mix(pink, #000, 80);
      box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3),
        rgba(0, 0, 0, 0.3)
      );
      padding: 20px 30px;
      border-radius: 5px;
    }
  }
}
</style>

import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

<template>
  <div>
    <!-- title="滑塊驗證碼" -->
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="dialogBeforeClose"
      :close-on-click-modal="false"
    >
      <div class="flex">
        <slide-verify
          ref="slideblock"
          :w="fullWidth"
          :h="fullHeight"
          :accuracy="accuracy"
          :slider-text="text"
          :imgs="imgList"
          @again="onAgain"
          @fulfilled="onFulfilled"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'verify',
  data() {
    return {
      dialogVisible: false,
      fullWidth: 450,
      fullHeight: 304,
      msg: '',
      text: '請向右滑動滑塊完成驗證',
      // 精確度小，可允許的誤差范圍小；為1時，則表示滑塊要與凹槽完全重疊，才能驗證成功。默認值為5
      accuracy: 3,
      imgList: [
      // 圖片的路徑：
        require('../assets/3.jpg')
      ]
    }
  },
  mounted() {},
  methods: {
    dialogBeforeClose() {
      this.dialogVisible = false
    },
    onSuccess() {
      console.log('驗證通過')
      this.msg = 'login success'
      this.dialogVisible = false
      this.$emit('verifySuccess')
       this.$message.success("驗證成功")
       this.$router.push('/a')
    },
    onFail() {
      console.log('驗證不通過')
      this.msg = '驗證不通過'
        this.$message.error('驗證失敗')
    },
    onRefresh() {
      console.log('點擊瞭刷新小圖標')
      this.msg = ''
    },
    onFulfilled() {
      console.log('刷新成功啦！')
    },
    onAgain() {
      console.log('檢測到非人為操作的哦！')
      this.msg = 'try again'
      // 刷新
      this.$refs.slideblock.reset()
    },
    handleClick() {
      // 父組件直接可以調用刷新方法
      this.$refs.slideblock.reset()
      console.log(23333);
    }
  }
}
</script>

<style lang="less" scoped>
.flex{
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .el-dialog {
  width: 500px;
  border-radius: 16px;
  margin: auto;
}
/deep/ .el-dialog__header {
  display: none;
}
/deep/ .slide-verify-slider {
  border-radius: 33px;
}
/deep/ .slide-verify-slider-mask {
  border-radius: 33px 0 0 33px;
}
</style>

import verify from "../components/verify.vue";
export default {
 components: {
    verify
  },
}

<template>
   <el-form>
   ......
   </el-form>
+ <verify ref="verify"></verify>
</template>

login () {
      this.$refs.verify.dialogVisible = true
  },