npm install --save vue-monoplasty-slide-verify

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼圖驗(yàn)證碼

Vue.use(SlideVerify)

<!-- 拼圖驗(yàn)證碼 -->
<div v-show="flag" class="testCode">
? <p class="closeBtn"><i class="el-icon-close" @click="flag=!flag"></i></p>
? <slide-verify?
? ? :l="42"
? ? :r="20"
? ? :w="362"
? ? :h="140"
? ? slider-text="向右滑動"
? ? @success="onSuccess"
? ? @fail="onFail"
? ? @refresh="onRefresh"
? ? :style="{width:'362px'}"
? ? class="slide-box"
? ? ref="slideBlock"
? ? v-show="flag"
? ></slide-verify>
</div>

return {
?? ?msg: '',
? ? flag: false,
}
methods: {
?? ?// 拼圖成功
? ? onSuccess (){
? ? ? this.getLogin()
? ? },
? ? // 拼圖失敗
? ? onFail (){
? ? ? this.msg = ''
? ? },
? ? // 拼圖刷新
? ? onRefresh (){
? ? ? this.msg = ''
? ? },
? ? // 登錄請求接口
? ? getLogin () {
? ? ? const loginData = {
? ? ? ? account: '',
? ? ? ? phone: this.ruleForm.userName,
? ? ? ? // Password: sha3.sha3_256(md5(this.ruleForm.password)), // 加密
? ? ? ? password: this.ruleForm.password,
? ? ? ? email: '',
? ? ? ? accountType: 2, // 登錄類型手機(jī)號
? ? ? ? checkCode: ''
? ? ? }
? ? ? // 接口
? ? ? userLogin(loginData)
? ? ? ? .then(res => {
? ? ? ? ? console.log(res)
? ? ? ? })
? ? ? ? .catch(res => {
? ? ? ? ? console.log(res)
? ? ? ? })
? ? },
? ? // 點(diǎn)擊登錄校驗(yàn)-拼圖出現(xiàn)
? ? submitForm (formName) {
? ? ? // 表單校驗(yàn)
? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? // 驗(yàn)證通過
? ? ? ? if (valid) {
? ? ? ? ? // 拼圖出現(xiàn)
? ? ? ? ? this.flag = true
? ? ? ? } else {
? ? ? ? ? console.log('error submit!!')
? ? ? ? ? return false
? ? ? ? }
? ? ? })
? ? }
}