You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.1 KiB
75 lines
2.1 KiB
import { defineComponent, ref, onBeforeUnmount, openBlock, createElementBlock, toDisplayString } from "vue";
|
|
const _hoisted_1 = ["disabled", "loading"];
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
name: "index",
|
|
props: {
|
|
duration: { default: 60 },
|
|
initText: { default: "\u83B7\u53D6\u9A8C\u8BC1\u7801" },
|
|
runText: { default: "{%s}s \u540E\u91CD\u65B0\u53D1\u9001" },
|
|
loadingText: { default: "\u6B63\u5728\u53D1\u9001" },
|
|
resetText: { default: "\u91CD\u65B0\u83B7\u53D6" }
|
|
},
|
|
emits: ["update:modelValue", "send"],
|
|
setup(__props, { emit: emits }) {
|
|
const props = __props;
|
|
const text = ref(props.initText);
|
|
const isDisabled = ref(false);
|
|
const isLoading = ref(false);
|
|
let timeID;
|
|
onBeforeUnmount(() => {
|
|
stop();
|
|
});
|
|
function stop() {
|
|
clearInterval(timeID);
|
|
text.value = props.resetText;
|
|
isLoading.value = false;
|
|
isDisabled.value = false;
|
|
emits("update:modelValue", false);
|
|
}
|
|
function getText(second) {
|
|
return props.runText.replace(/\{([^{]*?)%s(.*?)\}/g, String(second));
|
|
}
|
|
function run() {
|
|
isLoading.value = false;
|
|
let number = props.duration;
|
|
text.value = getText(number);
|
|
clearInterval(timeID);
|
|
timeID = setInterval(() => {
|
|
number--;
|
|
text.value = getText(number);
|
|
if (number <= 0) {
|
|
stop();
|
|
}
|
|
}, 1e3);
|
|
}
|
|
function onClick() {
|
|
if (isDisabled.value)
|
|
return;
|
|
if (isLoading.value)
|
|
return;
|
|
emits("send", () => {
|
|
isDisabled.value = true;
|
|
isLoading.value = true;
|
|
text.value = props.loadingText;
|
|
}, (isDone = true) => {
|
|
if (isDone) {
|
|
run();
|
|
} else {
|
|
stop();
|
|
}
|
|
});
|
|
}
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: "ps-send",
|
|
onClick,
|
|
disabled: isDisabled.value,
|
|
loading: isLoading.value,
|
|
type: "button",
|
|
size: "small"
|
|
}, toDisplayString(text.value), 9, _hoisted_1);
|
|
};
|
|
}
|
|
});
|
|
_sfc_main.name = "ps-captcha";
|
|
export { _sfc_main as PsCaptcha, _sfc_main as default };
|
|
|