v-pwdvisible 指令

介绍

v-pwdvisible 指令用于为密码输入框添加密码可见性切换功能。当应用于 type="password" 的输入框时，会在输入框右侧显示一个眼睛图标，用户可以通过点击图标在明文和密文之间切换显示状态。

使用方法

将 v-pwdvisible 指令添加到 type="password" 的输入框上：

查看代码

vue

<template>
  <div class="pwdvisible-demo">
    <input type="password" v-pwdvisible placeholder="请输入密码" class="password-input" value="19700101000000" />
  </div>
</template>

<script setup>
import { vPwdvisible } from '@cp-vuedir/core'
</script>

<style scoped>
.pwdvisible-demo {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.password-input {
  width: 300px;
  padding: 8px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  font-size: 14px;
  color: var(--vp-c-text-1);
  transition: border-color 0.2s;
  background-color: var(--vp-c-bg);
}

.password-input:focus {
  outline: none;
  border-color: var(--vp-c-brand);
}

.password-input::placeholder {
  color: var(--vp-c-text-3);
}
</style>

注意事项

使用限制

该指令仅适用于 type="password" 的input元素
如果应用于其他类型的元素，将会在控制台显示警告信息

样式说明

眼睛图标会自动定位在输入框右侧
图标大小和位置已经过优化，确保在大多数场景下都能正常显示
图标颜色会继承当前文本颜色，可以通过 CSS 的 color 属性进行自定义

v-pwdvisible 指令 ​

介绍 ​

使用方法 ​

注意事项 ​

v-pwdvisible 指令

介绍

使用方法

注意事项