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;