基于Vue3+TypeScript实现防止支付密码被浏览器保存功能

<template>
  <el-input
    v-model="pwdSymbol"
    placeholder="请输入"
    type="text"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>
<script setup lang="ts">
const pwdSymbol = ref("");
const pwd = ref("");
const handleInput = (value: string) => {
  const newValue = value.replace(/●/g, "")
  const lastLength = pwdSymbol.value.length;
  if (newValue) {
    pwd.value += newValue;
  } else {
    if (!lastLength) {
      pwd.value = "";
    } else {
      const arr = pwd.value.split("");
      arr.splice(-1, 1);
      pwd.value = arr.join("");
    }
  }
  let data = "";
  for (let i = 0; i < value.length; i++) {
    data += "●";
  }
  pwdSymbol.value = data;
};
const handleBlur = () => {
  console.log(pwd.value);
};
</script>

// 设置input的ref
const elInputRef = ref();
const handleInput = (value: string) => {
  const el = elInputRef.value?.input;
  const cursorPos = el.selectionStart;
  const newValue = value.replace(/●/g, "");
  const lastLength = pwdSymbol.value.length;
  if (newValue) {
    if (cursorPos != lastLength) {
      // 说明不是往后添加，而是在中间插入
      const arr = pwd.value.split("");
      arr.splice(cursorPos - 1, 0, newValue);
      pwd.value = arr.join("");
    } else {
      if (value.length === 1) {
        // 防止选择内容直接替换
        pwd.value = newValue;
      } else {
        pwd.value += newValue;
      }
    }
  } else {
    if (!lastLength) {
      pwd.value = "";
    } else {
      // 需要辨别是删除还是撤回
      const arr = pwd.value.split("");
      arr.splice(cursorPos, 1);
      pwd.value = arr.join("");
    }
  }
  let data = "";
  for (let i = 0; i < value.length; i++) {
    data += "●";
  }
  pwdSymbol.value = data;
};
const handleKeydown = (e: KeyboardEvent) => {
  // 判断是否按下撤回快捷键（Windows: Ctrl+Z，Mac: Meta+Z）
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
    e.preventDefault(); // 阻止默认撤回行为
    console.log("用户进行了撤回操作");
  }
};