diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue index 8f6ec7cd1a..6af5e05773 100644 --- a/frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue +++ b/frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue @@ -23,12 +23,12 @@ - + + @@ -104,8 +108,9 @@ value: '' }, cursorPos: 0, - inputText: '', + inputDisplayText: '', // 输入框展示的值 inputPlaceholder: '', + showInputVal: false, ASYMMETRIC_CIPHER_TYPE: window.ASYMMETRIC_CIPHER_TYPE, ASYMMETRIC_PUBLIC_KEY: window.ASYMMETRIC_PUBLIC_KEY, ASYMMETRIC_PREFIX: window.ASYMMETRIC_PREFIX @@ -141,7 +146,7 @@ }, mounted () { if (this.localVal?.tag === 'value') { - this.inputText = this.localVal.value ? '******' : '' + this.inputDisplayText = this.localVal.value ? '******' : '' } }, methods: { @@ -150,9 +155,10 @@ tag: val, value: '' } - this.inputText = '' + this.inputDisplayText = '' this.change() }, + // 单行文本框输入 handleInput (e) { this.localVal.value = e.target.value this.inputPlaceholder = '' @@ -160,6 +166,7 @@ handleTextareaKeyDown (e) { this.cursorPos = e.target.selectionStart }, + // 多行文本框输入 handleTextareaInput (e) { const value = e.target.value const start = this.cursorPos > e.target.selectionStart ? e.target.selectionStart : this.cursorPos @@ -174,23 +181,27 @@ }, handleTextareaKeyUp (e) { this.inputPlaceholder = '' - this.inputText = e.target.value.replace(/[^\n]/g, '·') + this.inputDisplayText = e.target.value.replace(/[^\n]/g, '·') }, + // 获取焦点后清空密码 handleFocus () { if (this.localVal.value.length > 0) { this.inputPlaceholder = i18n.t('要修改密码请点击后重新输入密码') } this.localVal.value = '' - this.inputText = '' + this.inputDisplayText = '' this.change() }, // 输入框失焦后执行加密逻辑 handleBlur () { - this.inputText = this.textareaMode ? this.localVal.value.replace(/[^\n]/g, '·') : this.localVal.value + this.inputDisplayText = this.textareaMode ? this.localVal.value.replace(/[^\n]/g, '·') : this.localVal.value const encryptedVal = this.encryptPassword() this.localVal.value = encryptedVal this.change() }, + handleToggleEye () { + this.showInputVal = !this.showInputVal + }, handleSelectVariable (val) { this.localVal.value = val this.change() @@ -229,6 +240,12 @@ border-top-right-radius: 0; border-bottom-right-radius: 0; } + .value-edit-input { + display: flex; + align-items: center; + flex: 1; + position: relative; + } .value-input { flex: 1; padding: 0 10px; @@ -269,6 +286,18 @@ background-color: #ffffff; } } + .toggle-eye-icon { + position: absolute; + top: 50%; + right: 12px; + font-size: 14px; + color: #979ba5; + transform: translateY(-50%); + cursor: pointer; + &:hover { + color: #3a84ff; + } + } .select-var { flex: 1; border-top-left-radius: 0;