flamingo-ui
Version:
火烈鸟UI组件库
235 lines (234 loc) • 7.74 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import "./PhoneVerified-sfc.css";
import { reactive, toRefs, watch, ref, nextTick } from "vue";
import { debounce } from "../utils/index";
import { CountDown } from "vant";
const __vue_sfc__ = {
name: "PhoneVerified",
components: {
[CountDown.name]: CountDown
},
props: {
// 允许触碰遮罩层关闭
closeOnClickOverlay: {
type: Boolean,
default: false
},
phone: {
type: String,
default: "13268089583"
},
time: {
type: [Number, String],
default: 6e4
},
submit: Function,
getcode: Function,
// 移除弹窗方法
remove: Function
},
setup(props, ctx) {
const data = reactive({
// 组件显示
show: true,
canGetCode: false
});
watch(() => data.show, () => {
if (data.show == false) {
props.remove();
}
});
const close = () => {
props.closeOnClickOverlay ? data.show = false : "";
};
const confirm = () => {
data.show = false;
};
const verificationCodes = ref(["", "", "", "", "", ""]);
const handlePhone = (phone) => {
return phone.slice(0, 3) + "****" + phone.slice(-4);
};
const handleInput = (index, event) => {
const value = event.target.value;
verificationCodes.value[index] = value;
if (verificationCodes.value.join("").length === 6) {
event.target.blur();
props.submit(verificationCodes.value.join(""), data);
}
if (value && index < verificationCodes.value.length - 1) {
const nextInput = event.target.nextElementSibling;
if (nextInput) {
nextTick(() => {
nextInput.focus();
});
}
}
};
const handleKeyDown = (index, event) => {
if (event.key === "Backspace" && !event.target.value && index > 0) {
const prevInput = event.target.previousElementSibling;
if (prevInput) {
nextTick(() => {
prevInput.focus();
});
}
}
};
const countDownDom = ref(null);
const countDownFinished = () => {
data.canGetCode = true;
};
const reset = () => {
data.canGetCode = false;
countDownDom.value.reset();
};
const handleGetCode = debounce(() => {
props.getcode(reset);
});
return __spreadProps(__spreadValues({}, toRefs(data)), {
close,
confirm,
handlePhone,
verificationCodes,
handleInput,
handleKeyDown,
countDownDom,
countDownFinished,
handleGetCode,
reset
});
}
};
import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, vModelText as _vModelText, withDirectives as _withDirectives, vShow as _vShow, resolveComponent as _resolveComponent, createVNode as _createVNode, createTextVNode as _createTextVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = /* @__PURE__ */ _createElementVNode(
"p",
{ class: "fmg-phone-verified-title" },
"\u8F93\u5165\u9A8C\u8BC1\u7801",
-1
/* HOISTED */
);
const _hoisted_2 = /* @__PURE__ */ _createElementVNode(
"p",
{ class: "fmg-phone-verified-tip" },
"\u9A8C\u8BC1\u7801\u5DF2\u53D1\u9001\u5230\u624B\u673A\u53F7",
-1
/* HOISTED */
);
const _hoisted_3 = { class: "fmg-phone-verified-phone" };
const _hoisted_4 = { class: "fmg-phone-verified-code" };
const _hoisted_5 = ["onUpdate:modelValue", "onInput", "onKeydown"];
const _hoisted_6 = { class: "fmg-phone-verified-getcode" };
function __vue_render__(_ctx, _cache) {
const _component_van_count_down = _resolveComponent("van-count-down");
return _openBlock(), _createElementBlock(
"div",
{
class: _normalizeClass(["fmg-phone-verified", { "fmg-phone-verified-hide": !_ctx.show }]),
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.close && _ctx.close(...args)),
onTouchmove: _cache[4] || (_cache[4] = _withModifiers(() => {
}, ["prevent"]))
},
[
_createElementVNode("div", {
class: "fmg-phone-verified-wrapper",
onClick: _cache[2] || (_cache[2] = _withModifiers(() => {
}, ["stop"]))
}, [
_hoisted_1,
_createElementVNode("img", {
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.confirm && _ctx.confirm(...args)),
class: "fmg-phone-verified-icon",
src: "https://gres.guopan.cn/png/20230313/payment-close.png",
alt: ""
}),
_hoisted_2,
_createElementVNode(
"p",
_hoisted_3,
_toDisplayString(_ctx.handlePhone(_ctx.phone)),
1
/* TEXT */
),
_createElementVNode("div", _hoisted_4, [
(_openBlock(true), _createElementBlock(
_Fragment,
null,
_renderList(_ctx.verificationCodes, (code, index) => {
return _withDirectives((_openBlock(), _createElementBlock("input", {
type: "number",
key: index,
"onUpdate:modelValue": ($event) => _ctx.verificationCodes[index] = $event,
onInput: ($event) => _ctx.handleInput(index, $event),
onKeydown: ($event) => _ctx.handleKeyDown(index, $event),
maxlength: "1",
class: "verification-input"
}, null, 40, _hoisted_5)), [
[_vModelText, _ctx.verificationCodes[index]]
]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_withDirectives(_createElementVNode(
"p",
{
class: "fmg-phone-verified-getcode",
style: { "color": "#3CA0E6" },
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleGetCode())
},
"\u91CD\u65B0\u83B7\u53D6\u9A8C\u8BC1\u7801 ",
512
/* NEED_PATCH */
), [
[_vShow, _ctx.canGetCode]
]),
_withDirectives(_createElementVNode(
"p",
_hoisted_6,
[
_createTextVNode("\u518D\u6B21\u53D1\u9001\u9A8C\u8BC1\u7801\uFF08"),
_createVNode(_component_van_count_down, {
ref: "countDownDom",
time: _ctx.time,
format: "ss\u79D2",
"auto-start": true,
onFinish: _ctx.countDownFinished
}, null, 8, ["time", "onFinish"]),
_createTextVNode("\uFF09 ")
],
512
/* NEED_PATCH */
), [
[_vShow, !_ctx.canGetCode]
])
])
],
34
/* CLASS, HYDRATE_EVENTS */
);
}
__vue_sfc__.render = __vue_render__;
__vue_sfc__._scopeId = "data-v-5af7ccff";
var stdin_default = __vue_sfc__;
export {
stdin_default as default
};