修复密码输入可访问性并统一新手机号为中国大陆区号

2026-11-06 04:53:45 +08:00
1 parent 990b802553
commit f6ab3c9087
@@ -0,0 +1,95 @@
+<script setup>
+/** 复用 PrimeVue 的密码/反馈状态，只统一原生输入语义与可键盘访问的显隐操作。 */
+import { computed, nextTick, ref, useSlots } from "vue";
+import Password from "primevue/password";
+
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  autocomplete: { type: String, default: undefined },
+  inputProps: { type: Object, default: () => ({}) },
+  disabled: Boolean,
+});
+const slots = useSlots();
+const forwardedSlots = () =>
+  Object.keys(slots).filter(
+    (name) => !["maskicon", "unmaskicon"].includes(name),
+  );
+// autocomplete 属于真实 input，而不是 Password 的包装 DIV；保留已有 aria 等输入属性。
+const nativeProps = computed(() => ({
+  ...props.inputProps,
+  autocomplete: props.autocomplete ?? props.inputProps?.autocomplete ?? "off",
+}));
+const toggleButton = ref(null);
+async function togglePassword(callback) {
+  callback();
+  // PrimeVue切换两个显隐slot时会替换按钮；把焦点交回新按钮，键盘才能连续显示/隐藏。
+  await nextTick();
+  toggleButton.value?.focus();
+}
+</script>
+
+<template>
+  <Password
+    v-bind="$attrs"
+    class="password-field"
+    :input-props="nativeProps"
+    :disabled="disabled"
+  >
+    <template v-for="name in forwardedSlots()" #[name]="scope">
+      <slot :name="name" v-bind="scope" />
+    </template>
+    <template #unmaskicon="{ toggleCallback, class: iconClass }">
+      <button
+        ref="toggleButton"
+        type="button"
+        :class="['password-toggle', iconClass]"
+        aria-label="显示密码"
+        aria-pressed="false"
+        :disabled="disabled"
+        @click="togglePassword(toggleCallback)"
+      >
+        <i class="pi pi-eye" aria-hidden="true" />
+      </button>
+    </template>
+    <template #maskicon="{ toggleCallback, class: iconClass }">
+      <button
+        ref="toggleButton"
+        type="button"
+        :class="['password-toggle', iconClass]"
+        aria-label="隐藏密码"
+        aria-pressed="true"
+        :disabled="disabled"
+        @click="togglePassword(toggleCallback)"
+      >
+        <i class="pi pi-eye-slash" aria-hidden="true" />
+      </button>
+    </template>
+  </Password>
+</template>
+
+<style scoped>
+.password-field .password-toggle {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  color: var(--p-text-muted-color);
+  background: transparent;
+  border: 0;
+  border-radius: var(--p-form-field-border-radius, 6px);
+  cursor: pointer;
+}
+.password-field .password-toggle:focus-visible {
+  outline: 2px solid var(--p-primary-color);
+  outline-offset: -3px;
+}
+.password-field .password-toggle:disabled {
+  cursor: not-allowed;
+}
+</style>