Vant 프레임의 암호 입력 상자를 사용할 때 눈 아이콘이 사라지는 이유는 무엇입니까? 그것을 해결하는 방법?

vue3 vant 비밀번호 입력 상자 사용자 정의 디스플레이/숨기기 비밀번호 아이콘

vue3 및 vant 프레임 워크로 개발할 때는 자체 비밀번호 디스플레이/숨기기 기능으로 Vant 암호 입력 상자가 누락되거나 비정상적으로 표시되는 데 문제가 발생할 수 있습니다. 이는 일반적으로 브라우저의 기본 암호 입력 상자 스타일이 Vant 구성 요소 스타일과 충돌하여 발생합니다. 솔루션은 암호 표시/숨기기 기능을 사용자 정의하고 브라우저의 기본 아이콘을 숨기는 것입니다.

문제 설명 : Vant 비밀번호 입력 상자에는 첫 번째 초점이 초점을 맞추면 암호 디스플레이/숨기기 아이콘 (브라우저 기본 아이콘)이 표시되지만 초점을 잃은 후 아이콘이 사라집니다.

해결 방법 : CSS를 사용하여 브라우저 기본 아이콘을 숨기고 Vant에서 제공하는 v-model 사용하여 암호의 디스플레이/숨기기를 제어합니다.

CSS 코드 (브라우저 숨기기 기본 아이콘) :

 입력 [type = "password"] ::-webkit-toggle-password { /*chrome* /
  -webkit-appearance : 없음! 중요;
  디스플레이 : 없음! 중요;
}
입력 [type = "password"] ::-Moz-ui-password { /*firefox* /
  -Moz-appearance : 없음! 중요;
  디스플레이 : 없음! 중요;
}
입력 [type = "password"] ::-MS-Reveal { /*edge* /
  디스플레이 : 없음! 중요;
}

VUE 구성 요소 코드 (예 : 실제 상황에 따라 조정해야합니다) :

<template>
  <div>
    <input type="password" v-model="password" :type="showPassword ? 'text' : 'password'">
    <van-icon name="eye"></van-icon>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Icon } from 'vant';

export default {
  components: {
    [Icon.name]: Icon,
  },
  setup() {
    const password = ref('');
    const showPassword = ref(false);
    return { password, showPassword };
  },
};
</script>

이 코드는 Vant의 van-icon 구성 요소를 사용하여 사용자 정의 비밀번호 디스플레이/숨기기 아이콘을 생성하고 v-model 및 showPassword 변수를 통해 입력 상자의 type 속성을 동적으로 제어하여 비밀번호의 디스플레이 및 숨겨지는 것을 동적으로 제어합니다. 위의 CSS 코드를 프로젝트 스타일 시트에 추가해야합니다. 이 솔루션은 브라우저의 기본 스타일과 충돌을 피하고보다 일관된 사용자 경험을 제공합니다.

위 내용은 Vant 프레임의 암호 입력 상자를 사용할 때 눈 아이콘이 사라지는 이유는 무엇입니까? 그것을 해결하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!