@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
271 lines (267 loc) • 6.93 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _sfc_main = {
name: "dragVerify",
props: {
isPassing: {
type: Boolean,
default: false
},
width: {
type: Number,
default: 250
},
height: {
type: Number,
default: 40
},
text: {
type: String,
default: "swiping to the right side"
},
successText: {
type: String,
default: "success"
},
background: {
type: String,
default: "#eee"
},
progressBarBg: {
type: String,
default: "#76c61d"
},
completedBg: {
type: String,
default: "#76c61d"
},
circle: {
type: Boolean,
default: false
},
radius: {
type: String,
default: "4px"
},
handlerIcon: {
type: String
},
successIcon: {
type: String
},
handlerBg: {
type: String,
default: "#fff"
},
textSize: {
type: String,
default: "14px"
},
textColor: {
type: String,
default: "#333"
},
imgsrc: {
type: String
},
showTips: {
type: Boolean,
default: true
},
successTip: {
type: String,
default: "\u9A8C\u8BC1\u901A\u8FC7"
},
failTip: {
type: String,
default: "\u9A8C\u8BC1\u5931\u8D25"
},
diffDegree: {
type: Number,
default: 10
},
minDegree: {
type: Number,
default: 90
},
maxDegree: {
type: Number,
default: 270
}
},
mounted: function() {
const dragEl = this.$refs.dragVerify;
dragEl.style.setProperty("--textColor", this.textColor);
dragEl.style.setProperty("--width", Math.floor(this.width / 2) + "px");
dragEl.style.setProperty("--pwidth", -Math.floor(this.width / 2) + "px");
},
computed: {
handlerStyle: function() {
return {
width: this.height + "px",
height: this.height + "px",
background: this.handlerBg
};
},
message: function() {
return this.isPassing ? "" : this.text;
},
successMessage: function() {
return this.isPassing ? this.successText : "";
},
dragVerifyStyle: function() {
return {
width: this.width + "px",
height: this.height + "px",
lineHeight: this.height + "px",
marginTop: "20px",
background: this.background,
borderRadius: this.circle ? this.height / 2 + "px" : this.radius
};
},
dragVerifyImgStyle: function() {
return {
width: this.width + "px",
height: this.width + "px",
position: "relative",
overflow: "hidden",
"border-radius": "50%"
};
},
progressBarStyle: function() {
return {
background: this.progressBarBg,
height: this.height + "px",
borderRadius: this.circle ? this.height / 2 + "px 0 0 " + this.height / 2 + "px" : this.radius
};
},
textStyle: function() {
return {
height: this.height + "px",
width: this.width + "px",
fontSize: this.textSize
};
},
factor: function() {
if (this.minDegree == this.maxDegree) {
return Math.floor(1 + Math.random() * 6) / 10 + 1;
}
return 1;
}
},
data() {
return {
isMoving: false,
x: 0,
isOk: false,
showBar: false,
showErrorTip: false,
ranRotate: 0,
cRotate: 0,
imgStyle: {}
};
},
methods: {
checkimgLoaded: function() {
var minDegree = this.minDegree;
var maxDegree = this.maxDegree;
var ranRotate = Math.floor(minDegree + Math.random() * (maxDegree - minDegree));
this.ranRotate = ranRotate;
this.imgStyle = {
transform: `rotateZ(${ranRotate}deg)`
};
},
dragStart: function(e) {
if (!this.isPassing) {
this.isMoving = true;
this.x = e.pageX || e.touches[0].pageX;
}
this.showBar = true;
this.showErrorTip = false;
this.$emit("handlerMove");
},
dragMoving: function(e) {
if (this.isMoving && !this.isPassing) {
var _x = (e.pageX || e.touches[0].pageX) - this.x;
var handler = this.$refs.handler;
handler.style.left = _x + "px";
var progressBar = this.$refs.progressBar;
progressBar.style.width = _x + this.height / 2 + "px";
var cRotate = Math.ceil(_x / (this.width - this.height) * this.maxDegree * this.factor);
this.cRotate = cRotate;
var rotate = this.ranRotate - cRotate;
this.imgStyle = {
transform: `rotateZ(${rotate}deg)`
};
}
},
dragFinish: function(e) {
if (this.isMoving && !this.isPassing) {
if (Math.abs(this.ranRotate - this.cRotate) > this.diffDegree) {
this.isOk = true;
this.imgStyle = {
transform: `rotateZ(${this.ranRotate}deg)`
};
var that = this;
setTimeout(function() {
var handler = that.$refs.handler;
var progressBar = that.$refs.progressBar;
handler.style.left = "0";
progressBar.style.width = "0";
that.isOk = false;
}, 500);
this.showErrorTip = true;
this.$emit("passfail");
} else {
this.passVerify();
}
this.isMoving = false;
}
},
passVerify: function() {
this.$emit("update:isPassing", true);
this.isMoving = false;
var handler = this.$refs.handler;
handler.children[0].className = this.successIcon;
this.$refs.progressBar.style.background = this.completedBg;
this.$refs.message.style["-webkit-text-fill-color"] = "unset";
this.$refs.message.style.animation = "slidetounlock2 3s infinite";
this.$refs.progressBar.style.color = "#fff";
this.$refs.progressBar.style.fontSize = this.textSize;
this.$emit("passcallback");
},
reset: function() {
this.reImg();
this.checkimgLoaded();
},
reImg: function() {
this.$emit("update:isPassing", false);
const oriData = this.$options.data();
for (const key in oriData) {
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
this[key] = oriData[key];
}
}
var handler = this.$refs.handler;
var message = this.$refs.message;
handler.style.left = "0";
this.$refs.progressBar.style.width = "0";
handler.children[0].className = this.handlerIcon;
message.style["-webkit-text-fill-color"] = "transparent";
message.style.animation = "slidetounlock 3s infinite";
message.style.color = this.background;
},
refreshimg: function() {
this.$emit("refresh");
}
},
watch: {
imgsrc: {
immediate: false,
handler: function() {
this.reImg();
}
}
}
};
exports.default = _sfc_main;