- Pasword alanları için şifreyi görüntüle-gizle özelliği

src/components/global/FormInput.vue

@@ -11,7 +11,7 @@
         </span>
         <input
           :value="modelValue"
-          :type="type"
+          :type="inputType"
           :placeholder="placeholder"
           :disabled="disabled"
           @input="OnInput"
@@ -22,12 +22,24 @@
           @keyup="OnKeyUp"
           :class="[
             invalidText !== undefined && invalidText !== '' ? 'invalid' : '',
-            iclass || ''
+            iclass || '',
+            isPasswordVisible || props.type === 'password' ? 'password-visible' : ''
           ]"
           :min="min"
           :max="max"
           :minlength="minlength"
           :maxlength="maxlength" />
+        <i
+          class="ico-c ico-password-visible"
+          v-if="props.type === 'password'"
+          @click="PasswordVisibleToggle">
+          <svg>
+            <use
+              :href="
+                '/src/assets/images/icons.svg#' + (isPasswordVisible ? 'eye' : 'eyeclose')
+              "></use>
+          </svg>
+        </i>
         <span
           class="form-item-alert"
           v-if="InvalidMessages.length > 0 && InvalidMessages !== ''">
@@ -82,9 +94,18 @@
     'keydown',
     'keyup'
   ])
-  const localValue = ref<any>()
+  const isPasswordVisible = ref<boolean>(false)
   const InvalidMessageText = reactive<Record<string, any>>({})
 
+  const inputType = computed(() => {
+    if (props.type !== 'password') {
+      return props.type
+    } else {
+      if (isPasswordVisible.value) return 'text'
+      else return 'password'
+    }
+  })
+
   const InvalidMessages = computed<string>(() => {
     let text = ''
     Object.keys(InvalidMessageText).forEach((k: string, i: number) => {
@@ -138,7 +159,9 @@
     emit('update:modelValue', (e.target as HTMLInputElement).value)
     emit('keyup', e)
   }
-  
+  const PasswordVisibleToggle = () => {
+    if (props.type === 'password') isPasswordVisible.value = !isPasswordVisible.value
+  }
   watch(
     () => props.invalidText,
     () => {
@@ -151,3 +174,16 @@
     }
   )
 </script>
+<style scoped>
+  .ico-password-visible {
+    position: absolute;
+    right: 8px;
+    top: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    cursor: pointer;
+  }
+  .password-visible {
+    padding: 8px 40px 8px 8px;
+  }
+</style>