176 lines
5.3 KiB
Vue
176 lines
5.3 KiB
Vue
<script>
|
|
/** 国际电话区号输入；地区列表按需请求，加载失败仍允许直接填写区号，不阻塞账号表单。 */
|
|
import "~/assets/styles/PhoneCodeField.CwyHXfML.css";
|
|
import { toDisplayString } from "vue";
|
|
import { renderList } from "vue";
|
|
import { useId } from "vue";
|
|
import { onBeforeUnmount } from "vue";
|
|
import { ref } from "vue";
|
|
import { createCommentVNode } from "vue";
|
|
import { createElementBlock } from "vue";
|
|
import { Fragment } from "vue";
|
|
import { createElementVNode } from "vue";
|
|
import { unref } from "vue";
|
|
import { defineComponent } from "vue";
|
|
import { openBlock } from "vue";
|
|
import { useApi } from "~/lib/auth.js";
|
|
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
|
var m = {
|
|
class: `phone-code-field`,
|
|
},
|
|
h = [`for`],
|
|
g = {
|
|
class: `phone-code-input`,
|
|
},
|
|
_ = [`id`, `value`, `list`, `disabled`],
|
|
v = [`id`],
|
|
y = [`value`],
|
|
b = {
|
|
key: 0,
|
|
role: `status`,
|
|
},
|
|
x = {
|
|
key: 1,
|
|
role: `status`,
|
|
},
|
|
S = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `PhoneCodeField`,
|
|
props: {
|
|
modelValue: {},
|
|
disabled: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
emits: [`update:modelValue`],
|
|
setup(u, { emit: p }) {
|
|
let S = u,
|
|
C = p,
|
|
w = useId(),
|
|
T = useApi(),
|
|
E = ref([]),
|
|
D = ref(!1),
|
|
O = ref(``),
|
|
k = !1;
|
|
onBeforeUnmount(() => {
|
|
k = !0;
|
|
});
|
|
async function A() {
|
|
// 只接受 1–4 位且首位非零的区号，列表加载后复用；卸载后的结果不回写。
|
|
if (!(D.value || E.value.length)) {
|
|
((D.value = !0), (O.value = ``));
|
|
try {
|
|
let e = await T.get(`/country`, void 0, !1);
|
|
if (k) return;
|
|
E.value = (e.list || [])
|
|
.filter((e) => /^[1-9]\d{0,3}$/.test(String(e.phone_code)))
|
|
.map((e) => ({
|
|
phone_code: String(e.phone_code),
|
|
name: e.name_zh || e.name || ``,
|
|
}));
|
|
} catch {
|
|
k || (O.value = `地区列表暂不可用，可直接填写国际区号`);
|
|
} finally {
|
|
k || (D.value = !1);
|
|
}
|
|
}
|
|
}
|
|
return (n, r) => (
|
|
openBlock(),
|
|
createElementBlock(`div`, m, [
|
|
createElementVNode(
|
|
`label`,
|
|
{
|
|
for: `${unref(w)}-phone-code`,
|
|
},
|
|
`国际区号`,
|
|
8,
|
|
h,
|
|
),
|
|
createElementVNode(`div`, g, [
|
|
(r[1] ||= createElementVNode(
|
|
`span`,
|
|
{
|
|
"aria-hidden": `true`,
|
|
},
|
|
`+`,
|
|
-1,
|
|
)),
|
|
createElementVNode(
|
|
`input`,
|
|
{
|
|
id: `${unref(w)}-phone-code`,
|
|
value: S.modelValue,
|
|
list: `${unref(w)}-countries`,
|
|
inputmode: `numeric`,
|
|
autocomplete: `tel-country-code`,
|
|
maxlength: `4`,
|
|
disabled: u.disabled,
|
|
onFocus: A,
|
|
onInput: (r[0] ||= (e) =>
|
|
C(
|
|
`update:modelValue`,
|
|
e.target.value.replace(/^\+/, ``).trim(),
|
|
)),
|
|
},
|
|
null,
|
|
40,
|
|
_,
|
|
),
|
|
]),
|
|
createElementVNode(
|
|
`datalist`,
|
|
{
|
|
id: `${unref(w)}-countries`,
|
|
},
|
|
[
|
|
(openBlock(!0),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(
|
|
unref(E),
|
|
(t, n) => (
|
|
openBlock(),
|
|
createElementBlock(
|
|
`option`,
|
|
{
|
|
key: `${t.phone_code}-${n}`,
|
|
value: t.phone_code,
|
|
},
|
|
toDisplayString(t.name) +
|
|
` +` +
|
|
toDisplayString(t.phone_code),
|
|
9,
|
|
y,
|
|
)
|
|
),
|
|
),
|
|
128,
|
|
)),
|
|
],
|
|
8,
|
|
v,
|
|
),
|
|
unref(D)
|
|
? (openBlock(), createElementBlock(`small`, b, `正在加载地区…`))
|
|
: createCommentVNode(``, !0),
|
|
unref(O)
|
|
? (openBlock(),
|
|
createElementBlock(`small`, x, toDisplayString(unref(O)), 1))
|
|
: createCommentVNode(``, !0),
|
|
])
|
|
);
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-24cb0489`]],
|
|
),
|
|
{
|
|
__name: `PhoneCodeField`,
|
|
},
|
|
);
|
|
export {};
|
|
export default S;
|
|
</script>
|