lingling
/
welfare-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移除验证码封装

This commit is contained in:
qinjie 2021-09-09 18:06:31 +08:00
parent f8978d2e44
commit c01a762812
1 changed files with 0 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/vaptcha/Vaptcha.vue
View File

@ -1,123 +0,0 @@
<template>
<!-- 点击式按钮建议高度介于36px与46px -->
<div id="vaptchaContainer" style="width: 300px;height: 36px;">
<!--vaptcha-container是用来引入VAPTCHA的容器，下面代码为预加载动画，仅供参考-->
<div class="vaptcha-init-main">
<div class="vaptcha-init-loading">
<a href="/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background: new 0 0 50 50; width: 14px; height: 14px; vertical-align: middle" xml:space="preserve">
<rect x="0" y="9.22656" width="4" height="12.5469" fill="#CCCCCC">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="10" y="5.22656" width="4" height="20.5469" fill="#CCCCCC">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="20" y="8.77344" width="4" height="13.4531" fill="#CCCCCC">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</a>
<span class="vaptcha-text">Vaptcha Initializing...</span>
</div>
</div>
</div>
</template>
<script>
const extend = function (to, _from) {
for (const key in _from) {
to[key] = _from[key];
}
return to;
}
export default {
props: {
type: {
type: String,
default: 'click'
},
scene: {
type: String,
default: ''
},
vpStyle: {
type: String,
default: 'dark'
},
color: {
type: String,
default: '#3C8AFF'
},
lang: {
type: String,
default: 'zh-CN'
}
},
mounted() {
var config = extend({
vid: '6121123db849dfa2f02958c6',
container: this.$refs.vaptcha,
style: this.vpStyle
}, this.$props)
this.loadV2Script().then(() => {
window.vaptcha(config).then(obj => {
this.$emit('input', obj)
obj.render()
})
})
},
methods: {
loadV2Script() {
if (typeof window.vaptcha === 'function') { //如果已经加载就直接放回
return Promise.resolve()
} else {
return new Promise(resolve => {
var script = document.createElement('script')
script.src = 'https://v-cn.vaptcha.com/v3.js'
script.async = true
script.onload = script.onreadystatechange = function () {
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
resolve()
script.onload = script.onreadystatechange = null
}
}
document.getElementsByTagName("head")[0].appendChild(script)
})
}
}
}
}
</script>
<style>
.vaptcha-init-main {
display: table;
width: 100%;
height: 100%;
background-color: #eeeeee;
}
.vaptcha-init-loading {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vaptcha-init-loading > a {
display: inline-block;
width: 18px;
height: 18px;
border: none;
}
.vaptcha-init-loading .vaptcha-text {
font-family: sans-serif;
font-size: 12px;
color: #cccccc;
vertical-align: middle;
}
</style>