Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: 密码tag支持小眼睛查看输入值 #7113

Merged
merged 1 commit into from
Oct 10, 2023
Merged

feature: 密码tag支持小眼睛查看输入值 #7113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 40 additions & 11 deletions frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
<bk-option id="value" :name="$t('password_手动输入')"></bk-option>
<bk-option id="variable" :name="$t('password_使用密码变量')"></bk-option>
</bk-select>
<template v-if="localVal.tag === 'value'">
<div v-if="localVal.tag === 'value'" class="value-edit-input">
<input
v-if="!textareaMode"
class="value-input"
type="password"
:value="inputText"
:type="showInputVal ? 'input' : 'password'"
:value="inputDisplayText"
:placeholder="inputPlaceholder"
:disabled="!editable || !formMode || disabled"
@input="handleInput"
Expand All @@ -39,7 +39,7 @@
class="value-textarea"
type="textarea"
rows="4"
:value="inputText"
:value="inputDisplayText"
:placeholder="inputPlaceholder"
:disabled="!editable || !formMode || disabled"
@keydown="handleTextareaKeyDown"
Expand All @@ -48,7 +48,11 @@
@focus="handleFocus"
@blur="handleBlur">
</textarea>
</template>
<i
v-if="inputDisplayText.length > 0"
:class="['bk-icon toggle-eye-icon', showInputVal ? 'icon-eye' : 'icon-eye-slash']"
@click="showInputVal = !showInputVal" />
</div>
<bk-select v-else class="select-var" :value="localVal.value" @selected="handleSelectVariable">
<bk-option v-for="item in variables" :key="item.id" :id="item.id" :name="item.id"></bk-option>
</bk-select>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -140,7 +145,7 @@
},
mounted () {
if (this.localVal?.tag === 'value') {
this.inputText = this.localVal.value ? '******' : ''
this.inputDisplayText = this.localVal.value ? '******' : ''
}
},
methods: {
Expand All @@ -149,16 +154,18 @@
tag: val,
value: ''
}
this.inputText = ''
this.inputDisplayText = ''
this.change()
},
// 单行文本框输入
handleInput (e) {
this.localVal.value = e.target.value
this.inputPlaceholder = ''
},
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
Expand All @@ -173,23 +180,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()
Expand Down Expand Up @@ -228,6 +239,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;
Expand Down Expand Up @@ -268,6 +285,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;
Expand Down
Loading