UFUse（1.6.2）

Appearance

On this page

EyeCryptButton ​

EyeCryptButton 是一个眼睛睁开/闭合的按钮，可以用于密码输入框的显示/隐藏密码。

依赖项：lottie-web

使用 ​

vue
<script setup lang="ts">
import EyeCryptButton from 'ufuse/src/components/EyeCryptButton/index.vue'
import { ref } from 'vue'

const crypt = ref(true)
</script>

<template>
  <div class="demo">
    <div class="flex items-center">
      <input :type="crypt ? 'password' : 'text'" value="000000">
      <!-- 指定尺寸 -->
      <EyeCryptButton v-model:crypt="crypt" color="#10b981" class="w-6 h-6" />
      <EyeCryptButton v-model:crypt="crypt" color="rgb(16, 185, 129)" class="w-6 h-6 ml-2" />
      <EyeCryptButton v-model:crypt="crypt" color="rgba(16, 185, 129, 0.5)" class="w-6 h-6 ml-2" />
    </div>
  </div>
</template>

预览 ​

API ​

ts
export interface EyeCryptButtonProps {
  /**
   * 是否是加密状态
   */
  crypt: boolean
  /**
   * 动画持续时长，单位：毫秒
   * @default 300
   */
  duration?: number
  /**
   * 颜色，rgb/rgba 或 六位十六进制颜色
   * @example 'rgb(255, 0, 0)'
   * @example 'rgba(255, 0, 0, 1)'
   * @example '#FF0000'
   */
  color?: string
}

export interface EyeCryptButtonEvents {
  (event: 'update:crypt', crypt: boolean): void
}

贡献者 ​

xieyuhang
cuijin