Vue

表單密碼的顯示與隱藏

javaScript 表單密碼的顯示與隱藏

流程綁定按鈕 ＝>切換表單type 與icon 圖示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//html
<div class="app">
   <div class="login">
      <div class="item">
        <input>
      </div>
     
     <div class="item pad">
    <input type="password" class="input password">
    <i class="togglePassword fa-solid fa-eye not-eye" ></i>
     </div>
</div> 
</div>


//js
//綁定按鈕
const eyeIcon = document.querySelector("i");
const password = document.querySelector(".password");

eyeIcon.addEventListener("click", function () {
  const vm = this;
  const type = password.getAttribute("type") === "password" ? "text" : "password";
  password.setAttribute("type", type);
  vm.classList.toggle("not-eye");
});

Vue3表單密碼的顯示與隱藏

流程綁定按鈕 ＝>切換表單type 與icon 圖示(class)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
    <div class="login">
        <div class="item">
        <input>
        </div>
        <div class="item pad">
            <input  :type="passwordVisible === false ? 'password' : 'input'" class="input">
            <i class="fa-solid" 
        @click="passwordVisible = !passwordVisible" :class="passwordVisible === false ? 'not-eye' : 'fa-eye'">
        </i>
        </div>
    </div> 
</template>



<script setup lang="ts">
   /* const store = useAuthStore()
    const {  formRef, loginForms, rulesLogin, validatorMessage, passwordVisible } = storeToRefs(store)
    const {  submitForm, resetForm  } = store*/


    import { ref } from 'vue';
    const passwordVisible = ref(false);
</script>