자바스크립트로 Vue 3 비번 보이기/숨기기 구현하기

>>아이콘 클릭 전

>> 아이콘 클릭 후

아이콘을 누르면 비밀번호가 노출되게 하는 기능을 완성했다.

 

 

일단은 template 창에 해당 input을 만들어준다.

이때, 처음에는 비밀번호 형식으로 입력하고 싶으니까 type을 password로 지정해준다.

    <div>
      <font-awesome-icon icon="fa-solid fa-lock" class="icon-aligned-left" />
      <input
        type="password"
        class="account-input"
        id="password"
        placeholder="비밀번호를 입력하세요"
        v-model='state.creds.password'
        autocomplete="off"
      />
      <font-awesome-icon icon="fa-solid fa-eye" class="icon-aligned-right" @click="showPwd" />
    </div>

왼쪽 옆에 있는 자물쇠모양 아이콘과 눈모양 아이콘은 fontawesome에서 가져왔다.

그리고, 눈모양 아이콘에 클릭이벤트를 추가해준다.

나는 showPwd라는 함수를 만들었다.

그리고 나서 script창의 setup안에 함수를 쓰면 된다.

 

    setup() {
      const showPwd = function() {
        var pwd = document.getElementById("password");
        if (pwd.type=="text") {
          pwd.type = "password"
        } else {
          pwd.type="text"
        }
      }
      return {
        showPwd
      }

password라는 id를 가진 element를 불러와서,

타입이 password이면 text로, text이면 password로 바꿔주게끔 만들었다.

이걸로 로그인 페이지는 구현 끝~