|
@@ -0,0 +1,35 @@
|
|
|
+{{define "component/passwordInput"}}
|
|
|
+<template>
|
|
|
+ <a-input :value="value" :type="showPassword ? 'text' : 'password'"
|
|
|
+ :placeholder="placeholder"
|
|
|
+ @input="$emit('input', $event.target.value)">
|
|
|
+ <template v-if="icon" #prefix>
|
|
|
+ <a-icon :type="icon" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
|
|
|
+ </template>
|
|
|
+ <template #addonAfter>
|
|
|
+ <a-icon :type="showPassword ? 'eye-invisible' : 'eye'"
|
|
|
+ @click="toggleShowPassword"
|
|
|
+ :style="'font-size: 16px;' + themeSwitcher.textStyle" />
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+</template>
|
|
|
+{{end}}
|
|
|
+
|
|
|
+{{define "component/password"}}
|
|
|
+<script>
|
|
|
+ Vue.component('password-input', {
|
|
|
+ props: ["title", "value", "placeholder", "icon"],
|
|
|
+ template: `{{template "component/passwordInput"}}`,
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showPassword: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleShowPassword() {
|
|
|
+ this.showPassword = !this.showPassword;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+</script>
|
|
|
+{{end}}
|