fontFamily: '微软雅黑',
align: 'center',
lineHeight: parseFloat(height / 14),
},
//滑块组
moveGroup: {
draggable: true,
},
moveRect: {
x: 0.5,
y: 0.5,
width: height - 1,
height: height - 1,
fill: '#fff',
stroke: '#8d92a1',
strokeWidth: 1,
},
moveGroup_l: {
x: height / 3,
y: height / 3,
},
moveLine1: {
x: 0,
y: 0,
points: [0, 0, height / 6, height / 6, 0, height / 3],
stroke: '#8d92a1',
strokeWidth: 1,
lineCap: 'round',
lineJoin: 'round',
},
moveLine2: {
x: height / 6,
y: 0,
points: [0, 0, height / 6, height / 6, 0, height / 3],
stroke: '#8d92a1',
strokeWidth: 1,
lineCap: 'round',
lineJoin: 'round',
},
//创建遮罩层组
coverRect: {
width: height / 2,
height: height,
fill: '#8d92a1',
opacity: 0.8,
},
coverText: {
x: 0,
y: 0,
width: width - height,
height: height,
align: 'center',
text: '验证成功',
fontSize: 14,
fontFamily: '微软雅黑',
fontStyle: 'bold',
fill: '#fff',
lineHeight: parseFloat(height / 14),
},
//验证成功组
succCircle: {
x: height / 2,
y: height / 2,
radius: height / 4,
fill: '#8d92a1',
},
succLine: {
points: [height / 2 - height / 4 / 2, height / 2, height / 2 - height / 4 / 8, height / 2 + height / 4 / 2, height / 2 + height / 4 / 2, height / 2 - height / 4 / 2],
stroke: '#fff',
strokeWidth: 1,
lineCap: 'round',
lineJoin: 'round',
},
};
return {
Config,
success: 0, // 标记是否验证成功 0 失败 1 成功
};
},
mounted() {
// 给document绑定鼠标抬起事件
document.addEventListener('mouseup', this.moveGroupStop);
// 在组件注销的时候取消绑定
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('mouseup', this.moveGroupStop);
});
// 给滑块组绑定拖拽监听
this.$refs.moveGroup.getNode().dragBoundFunc((pos) => {
const { width, height } = this.captchaConfig;
let moveGroup = this.$refs.moveGroup.getNode();
let moveRect = this.$refs.moveRect.getNode();
let coverRect = this.$refs.coverRect.getNode();
let moveX = moveGroup.getAttrs().x ? moveGroup.getAttrs().x : 0;
coverRect.width(moveX + height / 2);
if (pos.x >= width - height) {
if (this.success == 0) {
this.success = 1;
this.$emit('eventCaptcha');
}
coverRect.opacity(1);
}
if (this.success == 0) {
if (pos.x < 0) {
return {
