本文介绍了如何在Vue应用中集成vue-monoplasty-slide-verify组件，实现自定义拼图位置并配合后台控制验证过程，包括成功/失败触发时机的设置。详细讲解了组件参数配置、事件处理以及如何配合后台生成随机位置进行验证。
自定义拼图出现位置, 配合后台控制成功/失败触发时机
安装 vue-monoplasty-slide-verify
npm install --save vue-monoplasty-slide-verify
在main.js中引入全局组件SlideVerify
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
参数详情可参考: https://gitee.com/monoplasty/vue-monoplasty-slide-verify
在组件中使用 (不需要后台配合使用)
<template>
<slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" :accuracy="accuracy"></slide-verify>
<button @click="handleClick">在父组件可以点我刷新哦</button>
<div>{{msg}}</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑动->',
// 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
accuracy: 1,
}
},
methods: {
onSuccess(times){
console.log('验证通过，耗时 +' times + '毫秒');
this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
},
onFail(){
console.log('验证不通过');
this.msg = ''
},
onRefresh(){
console.log('点击了刷新小图标');
this.msg = ''
},
onFulfilled() {
console.log('刷新成功啦！');
},
onAgain() {
console.log('检测到非人为操作的哦！');
this.msg = 'try again';
// 刷新
this.$refs.slideblock.reset();
},
handleClick() {
this.$refs.slideblock.reset();
},
}
}
</script>
配合后台随机生成位置, 控制成功/失败事件, 使用方式如下
<template>
<div class="about">
<!--
l => 拼图矩形部分的宽度
r => 拼图圆环部分的直径
w => 画布宽度
h => 画布高度
xl => 拼图出现的 x 轴坐标
yl => 拼图出现的 y 轴坐标
text => 底部滑动部分显示提示内容
imgs => 显示图片数组(若传值,则从数组中随机选取图片)
-->
<slide-verify ref="slideblock" :l="40" :r="8" :w="300" :h="200" :xl="xl" :yl="yl" @again="onAgain" @fulfilled="onFulfilled" @sureEndMove="sureEndMove" @fail="onFail" @refresh="onRefresh" :slider-text="text"></slide-verify>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: '',
text: '向右滑动验证',
imgs: [],
xl: 150,
yl: 100
}
},
methods: {
success() {
// 成功回调
this.$refs.slideblock.sureSuccess('123456789')
},
error() {
// 失败回调
this.$refs.slideblock.sureError('abcdefg')
},
sureEndMove(client, times) {
/**
* 鼠标抬起触发事件
* 在这里执行请求
* 这里为模拟判断, 可根据需求在此处进行请求, 获取状态, 判断是否执行 成功/失败 方法
* */
console.log('位置', client);
if (client >= this.xl-5 && client <= this.xl+5) {
this.success()
this.msg = `登录成功, 耗时${(times / 1000).toFixed(1)}s`
console.log(`login success, 耗时${(times / 1000).toFixed(1)}s`);
} else {
this.error()
this.msg = '重新验证'
}
},
onFail() {
console.log('验证不通过');
this.msg = '重新验证'
},
onRefresh() {
console.log('点击了刷新小图标');
this.msg = ''
},
onFulfilled() {
this.$refs.slideblock.reset();
console.log('刷新成功啦！');
},
onAgain() {
console.log('检测到非人为操作的哦！');
// 刷新
this.$refs.slideblock.reset();
},
handleClick() {
// 父组件直接可以调用刷新方法
this.$refs.slideblock.reset();
},
}
}
</script>
注: 此方式需修改源码, 修改后代码入下, 其余功能可自由发挥
文件目录为 node_modules/vue-monoplasty-slide-verify/dist/slide-verify.js 文件, 直接替换文件内容即可
! function (e, t) {
"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define
.amd ? define("SlideVerify", [], t) : "object" == typeof exports ? exports.SlideVerify = t() : e.SlideVerify = t()
}("undefined" != typeof self ? self : this, function () {
return function (e) {
function t(n) {
if (i[n]) return i[n].exports;
var s = i[n] = {
i: n,
l: !1,
exports: {}
};
return e[n].call(s.exports, s, s.exports, t), s.l = !0, s.exports
}
var i = {};
return t.m = e, t.c = i, t.d = function (e, i, n) {
t.o(e, i) || Object.defineProperty(e, i, {
configurable: !1,
enumerable: !0,
get: n
})
}, t.n = function (e) {
var i = e && e.__esModule ? function () {
return e.default
} : function () {
return e
};
return t.d(i, "a", i), i
}, t.o = function (e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}, t.p = "/dist/", t(t.s = 2)
}([function (e, t) {
e.exports =
"data:image/png;base64,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"
}, function (e, t, i) {
"use strict";
function n(e, t) {
return e + t
}
function s(e) {
return e * e
}
var r = Math.PI;
t.a = {
name: "SlideVerify",
props: {
l: {
type: Number,
default: 42
},
r: {
type: Number,
default: 10
},
w: {
type: Number,
default: 310
},
h: {
type: Number,
default: 155
},
sliderText: {
type: String,
default: "Slide filled right"
},
accuracy: {
type: Number,
default: 5
},
show: {
type: Boolean,
default: !0
},
imgs: {
type: Array,
default: function () {
return []
}
},
xl: { // x轴的位置坐标
type: Number,
default: 100
},
yl: { // y轴的位置坐标
type: Number,
default: 100
}
},
data: function () {
return {
containerActive: !1,
containerSuccess: !1,
containerFail: !1,
canvasCtx: null,
blockCtx: null,
block: null,
block_x: void 0,
block_y: void 0,
L: this.l + 2 * this.r + 3,
img: void 0,
originX: void 0,
originY: void 0,
isMouseDown: !1,
trail: [],
sliderLeft: 0,
sliderMaskWidth: 0,
success: !1,
loadBlock: !0,
timestamp: null
}
},
mounted: function () {
this.init()
},
methods: {
init: function () {
this.initDom(), this.initImg(), this.bindEvents()
},
initDom: function () {
this.block = this.$refs.block, this.canvasCtx = this.$refs.canvas.getContext("2d"), this.blockCtx = this.block
.getContext("2d")
},
initImg: function () {
console.log(this.createImg())
var e = this,
t = this.createImg(function () {
e.loadBlock = !1, e.drawBlock(), e.canvasCtx.drawImage(t, 0, 0, e.w, e.h), e.blockCtx.drawImage(t, 0, 0,
e.w, e.h);
var i = e.block_x,
n = e.block_y,
s = e.r,
r = e.L,
a = n - 2 * s - 1,
o = e.blockCtx.getImageData(i, a, r, r);
e.block.width = r, e.blockCtx.putImageData(o, 0, a)
});
this.img = t
},
drawBlock: function () {
// this.block_x = this.getRandomNumberByRange(this.L + 10, this.w - (this.L + 10)), this.block_y = this.getRandomNumberByRange(
// 10 + 2 * this.r, this.h - (this.L + 10)), this.draw(this.canvasCtx, this.block_x, this.block_y, "fill"),
this.block_x = this.xl, this.block_y = this.yl, this.draw(this.canvasCtx, this.block_x, this.block_y, "fill"),
this.draw(this.blockCtx, this.block_x, this.block_y, "clip")
},
draw: function (e, t, i, n) {
var s = this.l,
a = this.r;
e.beginPath(), e.moveTo(t, i), e.arc(t + s / 2, i - a + 2, a, .72 * r, 2.26 * r), e.lineTo(t + s, i), e.arc(
t + s + a - 2, i + s / 2, a, 1.21 * r, 2.78 * r), e.lineTo(t + s, i + s), e.lineTo(t, i + s), e.arc(t + a -
2, i + s / 2, a + .4, 2.76 * r, 1.24 * r, !0), e.lineTo(t, i), e.lineWidth = 2, e.fillStyle =
"rgba(255, 255, 255, 0.7)", e.strokeStyle = "rgba(255, 255, 255, 0.7)", e.stroke(), e[n](), e.globalCompositeOperation =
"destination-over"
},
createImg: function (e) {
var t = this,
i = document.createElement("img");
return i.crossOrigin = "Anonymous", i.onload = e, i.onerror = function () {
i.src = t.getRandomImg()
}, i.src = this.getRandomImg(), i
},
getRandomImg: function () {
var e = this.imgs.length;
return e > 0 ? this.imgs[this.getRandomNumberByRange(0, e) - 1] : "https://picsum.photos/300/150/?image=" + this
.getRandomNumberByRange(0, 1084)
},
getRandomNumberByRange: function (e, t) {
return Math.round(Math.random() * (t - e) + e)
},
refresh: function () {
this.reset(), this.$emit("refresh")
},
sliderDown: function (e) {
this.success || (this.originX = e.clientX, this.originY = e.clientY, this.isMouseDown = !0, this.timestamp = +
new Date)
},
touchStartEvent: function (e) {
this.success || (this.originX = e.changedTouches[0].pageX, this.originY = e.changedTouches[0].pageY, this.isMouseDown = !
0, this.timestamp = +new Date)
},
bindEvents: function () { // 鼠标放开事件
var e = this;
document.addEventListener("mousemove", function (t) {
if (!e.isMouseDown) return !1;
var i = t.clientX - e.originX,
n = t.clientY - e.originY;
if (i < 0 || i + 38 >= e.w) return !1;
e.sliderLeft = i + "px";
var s = (e.w - 40 - 20) / (e.w - 40) * i;
e.block.style.left = s + "px", e.containerActive = !0, e.sliderMaskWidth = i + "px", e.trail.push(n)
}), document.addEventListener("mouseup", function (t) {
if (!e.isMouseDown) return !1;
if (e.isMouseDown = !1, t.clientX === e.originX) return !1;
e.containerActive = !1, e.timestamp = +new Date - e.timestamp;
console.log(22222, parseInt(e.block.style.left));
e.$emit('sureEndMove', parseInt(e.block.style.left), e.timestamp)
// var i = e.verify(),
// n = i.spliced,
// s = i.TuringTest;
// if (n) {
// if (-1 === e.accuracy) return e.containerSuccess = !0, e.success = !0, void e.$emit("success", e.timestamp);
// s ? (e.containerSuccess = !0, e.success = !0, e.$emit("success", e.timestamp)) : (e.containerFail = !0,
// e.$emit("again"))
// } else e.containerFail = !0, e.$emit("fail"), setTimeout(function() {
// e.reset()
// }, 1e3)
})
},
// 成功执行函数
sureSuccess: function (val) {
var e = this;
console.log(val);
var i = e.verify(),
n = i.spliced,
s = i.TuringTest;
if (n) {
if (-1 === e.accuracy) return e.containerSuccess = !0, e.success = !0, void e.$emit("success", e.timestamp);
s ? (e.containerSuccess = !0, e.success = !0, e.$emit("success", e.timestamp)) : (e.containerFail = !0,
e.$emit("again"))
}
},
// 失败调用函数
sureError: function () {
var e = this;
e.containerFail = !0, e.$emit('fulfilled')
e.reset()
// setTimeout(function () {
// e.reset()
// e.$emit('fulfilled')
// }, 1e3)
},
touchMoveEvent: function (e) {
if (!this.isMouseDown) return !1;
var t = e.changedTouches[0].pageX - this.originX,
i = e.changedTouches[0].pageY - this.originY;
if (t < 0 || t + 38 >= this.w) return !1;
this.sliderLeft = t + "px";
var n = (this.w - 40 - 20) / (this.w - 40) * t;
this.block.style.left = n + "px", this.containerActive = !0, this.sliderMaskWidth = t + "px", this.trail.push(
i)
},
touchEndEvent: function (e) {
var t = this;
if (!this.isMouseDown) return !1;
if (this.isMouseDown = !1, e.changedTouches[0].pageX === this.originX) return !1;
this.containerActive = !1, this.timestamp = +new Date - this.timestamp;
var i = this.verify(),
n = i.spliced,
s = i.TuringTest;
if (n) {
if (-1 === this.accuracy) return this.containerSuccess = !0, this.success = !0, void this.$emit("success",
this.timestamp);
s ? (this.containerSuccess = !0, this.success = !0, this.$emit("success", this.timestamp)) : (this.containerFail = !
0, this.$emit("again"))
} else this.containerFail = !0, this.$emit("fail"), setTimeout(function () {
t.reset()
}, 1e3)
},
verify: function () {
var e = this.trail,
t = e.reduce(n) / e.length,
i = e.map(function (e) {
return e - t
}),
r = Math.sqrt(i.map(s).reduce(n) / e.length),
a = parseInt(this.block.style.left),
o = this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;
return {
spliced: Math.abs(a - this.block_x) <= o,
TuringTest: t !== r
}
},
reset: function () {
this.success = !1, this.containerActive = !1, this.containerSuccess = !1, this.containerFail = !1, this.sliderLeft =
0, this.block.style.left = 0, this.sliderMaskWidth = 0;
var e = this.w,
t = this.h;
this.canvasCtx.clearRect(0, 0, e, t), this.blockCtx.clearRect(0, 0, e, t), this.block.width = e, this.img.src =
this.getRandomImg()
// , this.$emit("fulfilled")
}
}
}
}, function (e, t, i) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var n = i(3),
s = {
install: function (e) {
e.component(n.a.name, n.a)
}
};
"undefined" != typeof window && window.Vue && window.Vue.use(n.a), t.default = s
}, function (e, t, i) {
"use strict";
function n(e) {
i(4)
}
var s = i(1),
r = i(11),
a = i(10),
o = n,
c = a(s.a, r.a, !1, o, "data-v-b2d04a40", null);
t.a = c.exports
}, function (e, t, i) {
var n = i(5);
"string" == typeof n && (n = [
[e.i, n, ""]
]), n.locals && (e.exports = n.locals);
i(8)("6b4c9876", n, !0, {})
}, function (e, t, i) {
var n = i(6);
t = e.exports = i(7)(!1), t.push([e.i,
".slide-verify[data-v-b2d04a40]{position:relative}.slider-verify-loading[data-v-b2d04a40]{position:absolute;top:0;right:0;left:0;bottom:0;background:hsla(0,0%,100%,.9);z-index:999;animation:loading-data-v-b2d04a40 1.5s infinite}@keyframes loading-data-v-b2d04a40{0%{opacity:.7}to{opacity:1}}.slide-verify-block[data-v-b2d04a40]{position:absolute;left:0;top:0}.slide-verify-refresh-icon[data-v-b2d04a40]{position:absolute;right:0;top:0;width:34px;height:34px;cursor:pointer;background:url(" +
n(i(0)) +
") 0 -437px;background-size:34px 471px}.slide-verify-slider[data-v-b2d04a40]{position:relative;text-align:center;width:100%;height:40px;line-height:40px;margin-top:15px;background:#f7f9fa;color:#45494c;border:1px solid #e4e7eb}.slide-verify-slider-mask[data-v-b2d04a40]{position:absolute;left:0;top:0;height:40px;border:0 solid #1991fa;background:#d1e9fe}.slide-verify-slider-mask-item[data-v-b2d04a40]{position:absolute;top:0;left:0;width:40px;height:40px;background:#fff;box-shadow:0 0 3px rgba(0,0,0,.3);cursor:pointer;transition:background .2s linear}.slide-verify-slider-mask-item[data-v-b2d04a40]:hover{background:#1991fa}.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon[data-v-b2d04a40]{background-position:0 -13px}.slide-verify-slider-mask-item-icon[data-v-b2d04a40]{position:absolute;top:15px;left:13px;width:14px;height:12px;background:url(" +
n(i(0)) +
") 0 -26px;background-size:34px 471px}.container-active .slide-verify-slider-mask-item[data-v-b2d04a40]{height:38px;top:-1px;border:1px solid #1991fa}.container-active .slide-verify-slider-mask[data-v-b2d04a40]{height:38px;border-width:1px}.container-success .slide-verify-slider-mask-item[data-v-b2d04a40]{height:38px;top:-1px;border:1px solid #52ccba;background-color:#52ccba!important}.container-success .slide-verify-slider-mask[data-v-b2d04a40]{height:38px;border:1px solid #52ccba;background-color:#d2f4ef}.container-success .slide-verify-slider-mask-item-icon[data-v-b2d04a40]{background-position:0 0!important}.container-fail .slide-verify-slider-mask-item[data-v-b2d04a40]{height:38px;top:-1px;border:1px solid #f57a7a;background-color:#f57a7a!important}.container-fail .slide-verify-slider-mask[data-v-b2d04a40]{height:38px;border:1px solid #f57a7a;background-color:#fce1e1}.container-fail .slide-verify-slider-mask-item-icon[data-v-b2d04a40]{top:14px;background-position:0 -82px!important}.container-active .slide-verify-slider-text[data-v-b2d04a40],.container-fail .slide-verify-slider-text[data-v-b2d04a40],.container-success .slide-verify-slider-text[data-v-b2d04a40]{display:none}",
""
])
}, function (e, t) {
e.exports = function (e) {
return "string" != typeof e ? e : (/^['"].*['"]$/.test(e) && (e = e.slice(1, -1)), /["'() \t\n]/.test(e) ? '"' +
e.replace(/"/g, '\\"').replace(/\n/g, "\\n") + '"' : e)
}
}, function (e, t) {
function i(e, t) {
var i = e[1] || "",
s = e[3];
if (!s) return i;
if (t && "function" == typeof btoa) {
var r = n(s);
return [i].concat(s.sources.map(function (e) {
return "/*# sourceURL=" + s.sourceRoot + e + " */"
})).concat([r]).join("\n")
}
return [i].join("\n")
}
function n(e) {
return "/*# sourceMappingURL=data:application/json;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(
JSON.stringify(e)))) + " */"
}
e.exports = function (e) {
var t = [];
return t.toString = function () {
return this.map(function (t) {
var n = i(t, e);
return t[2] ? "@media " + t[2] + "{" + n + "}" : n
}).join("")
}, t.i = function (e, i) {
"string" == typeof e && (e = [
[null, e, ""]
]);
for (var n = {}, s = 0; s < this.length; s++) {
var r = this[s][0];
"number" == typeof r && (n[r] = !0)
}
for (s = 0; s < e.length; s++) {
var a = e[s];
"number" == typeof a[0] && n[a[0]] || (i && !a[2] ? a[2] = i : i && (a[2] = "(" + a[2] + ") and (" + i + ")"),
t.push(a))
}
}, t
}
}, function (e, t, i) {
function n(e) {
for (var t = 0; t < e.length; t++) {
var i = e[t],
n = l[i.id];
if (n) {
n.refs++;
for (var s = 0; s < n.parts.length; s++) n.parts[s](i.parts[s]);
for (; s < i.parts.length; s++) n.parts.push(r(i.parts[s]));
n.parts.length > i.parts.length && (n.parts.length = i.parts.length)
} else {
for (var a = [], s = 0; s < i.parts.length; s++) a.push(r(i.parts[s]));
l[i.id] = {
id: i.id,
refs: 1,
parts: a
}
}
}
}
function s() {
var e = document.createElement("style");
return e.type = "text/css", u.appendChild(e), e
}
function r(e) {
var t, i, n = document.querySelector("style[" + g + '~="' + e.id + '"]');
if (n) {
if (h) return v;
n.parentNode.removeChild(n)
}
if (b) {
var r = p++;
n = f || (f = s()), t = a.bind(null, n, r, !1), i = a.bind(null, n, r, !0)
} else n = s(), t = o.bind(null, n), i = function () {
n.parentNode.removeChild(n)
};
return t(e),
function (n) {
if (n) {
if (n.css === e.css && n.media === e.media && n.sourceMap === e.sourceMap) return;
t(e = n)
} else i()
}
}
function a(e, t, i, n) {
var s = i ? "" : n.css;
if (e.styleSheet) e.styleSheet.cssText = A(t, s);
else {
var r = document.createTextNode(s),
a = e.childNodes;
a[t] && e.removeChild(a[t]), a.length ? e.insertBefore(r, a[t]) : e.appendChild(r)
}
}
function o(e, t) {
var i = t.css,
n = t.media,
s = t.sourceMap;
if (n && e.setAttribute("media", n), m.ssrId && e.setAttribute(g, t.id), s && (i += "\n/*# sourceURL=" + s.sources[
0] + " */", i += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(
JSON.stringify(s)))) + " */"), e.styleSheet) e.styleSheet.cssText = i;
else {
for (; e.firstChild;) e.removeChild(e.firstChild);
e.appendChild(document.createTextNode(i))
}
}
var c = "undefined" != typeof document;
if ("undefined" != typeof DEBUG && DEBUG && !c) throw new Error(
"vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
);
var d = i(9),
l = {},
u = c && (document.head || document.getElementsByTagName("head")[0]),
f = null,
p = 0,
h = !1,
v = function () { },
m = null,
g = "data-vue-ssr-id",
b = "undefined" != typeof navigator && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase());
e.exports = function (e, t, i, s) {
h = i, m = s || {};
var r = d(e, t);
return n(r),
function (t) {
for (var i = [], s = 0; s < r.length; s++) {
var a = r[s],
o = l[a.id];
o.refs--, i.push(o)
}
t ? (r = d(e, t), n(r)) : r = [];
for (var s = 0; s < i.length; s++) {
var o = i[s];
if (0 === o.refs) {
for (var c = 0; c < o.parts.length; c++) o.parts[c]();
delete l[o.id]
}
}
}
};
var A = function () {
var e = [];
return function (t, i) {
return e[t] = i, e.filter(Boolean).join("\n")
}
}()
}, function (e, t) {
e.exports = function (e, t) {
for (var i = [], n = {}, s = 0; s < t.length; s++) {
var r = t[s],
a = r[0],
o = r[1],
c = r[2],
d = r[3],
l = {
id: e + ":" + s,
css: o,
media: c,
sourceMap: d
};
n[a] ? n[a].parts.push(l) : i.push(n[a] = {
id: a,
parts: [l]
})
}
return i
}
}, function (e, t) {
e.exports = function (e, t, i, n, s, r) {
var a, o = e = e || {},
c = typeof e.default;
"object" !== c && "function" !== c || (a = e, o = e.default);
var d = "function" == typeof o ? o.options : o;
t && (d.render = t.render, d.staticRenderFns = t.staticRenderFns, d._compiled = !0), i && (d.functional = !0),
s && (d._scopeId = s);
var l;
if (r ? (l = function (e) {
e = e || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext,
e || "undefined" == typeof __VUE_SSR_CONTEXT__ || (e = __VUE_SSR_CONTEXT__), n && n.call(this, e), e && e._registeredComponents &&
e._registeredComponents.add(r)
}, d._ssrRegister = l) : n && (l = n), l) {
var u = d.functional,
f = u ? d.render : d.beforeCreate;
u ? (d._injectStyles = l, d.render = function (e, t) {
return l.call(t), f(e, t)
}) : d.beforeCreate = f ? [].concat(f, l) : [l]
}
return {
esModule: a,
exports: o,
options: d
}
}
}, function (e, t, i) {
"use strict";
var n = function () {
var e = this,
t = e.$createElement,
i = e._self._c || t;
return i("div", {
staticClass: "slide-verify",
style: {
width: e.w + "px"
},
attrs: {
id: "slideVerify",
onselectstart: "return false;"
}
}, [i("div", {
class: {
"slider-verify-loading": e.loadBlock
}
}), e._v(" "), i("canvas", {
ref: "canvas",
attrs: {
width: e.w,
height: e.h
}
}), e._v(" "), e.show ? i("div", {
staticClass: "slide-verify-refresh-icon",
on: {
click: e.refresh
}
}) : e._e(), e._v(" "), i("canvas", {
ref: "block",
staticClass: "slide-verify-block",
attrs: {
width: e.w,
height: e.h
}
}), e._v(" "), i("div", {
staticClass: "slide-verify-slider",
class: {
"container-active": e.containerActive, "container-success": e.containerSuccess, "container-fail": e.containerFail
}
}, [i("div", {
staticClass: "slide-verify-slider-mask",
style: {
width: e.sliderMaskWidth
}
}, [i("div", {
staticClass: "slide-verify-slider-mask-item",
style: {
left: e.sliderLeft
},
on: {
mousedown: e.sliderDown,
touchstart: e.touchStartEvent,
touchmove: e.touchMoveEvent,
touchend: e.touchEndEvent
}
}, [i("div", {
staticClass: "slide-verify-slider-mask-item-icon"
})])]), e._v(" "), i("span", {
staticClass: "slide-verify-slider-text"
}, [e._v(e._s(e.sliderText))])])])
},
s = [],
r = {
render: n,
staticRenderFns: s
};
t.a = r
}])
});
//# sourceMappingURL=slide-verify.js.map
2693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
