以and design vue 為例：

圖標用來顯隱賬號密碼

html：

 <a-form-model-item label="賬號密碼:" prop="password"><a-input v-if="passwordTab" ref="passwordInput" v-model="form.password" type="text" style="width: 280px" @input="inputPassword"><template #suffix><svg-icon v-if="!passwordTab" class="icons-dg" style="color: rgba(0, 0, 0, 0.65)" iconClass="dg-nosee" @click="changeVent('passwordTab',true)" /><i v-else class="el-icon-view icons-dg" @click="changeVent('passwordTab',false)" /></template></a-input><a-input v-else ref="passwordInput" v-model="password" type="text" style="width: 280px" @input="inputPassword"><template #suffix><svg-icon v-if="!passwordTab" class="icons-dg" style="color: rgba(0, 0, 0, 0.65)" iconClass="dg-nosee" @click="changeVent('passwordTab',true)" /><i v-else class="el-icon-view icons-dg" @click="changeVent('passwordTab',false)" /></template></a-input></a-form-model-item>

js：

會生成*號字符串并把原值v-model賦值給form.password表單。自行修改，我這邊的表單結構是：

form:{ password,...[more]}

    inputPassword(e) {const value = e.target.value // 當前的值const oldVal = this.form.password // 之前的值let passwordShow = '' // 當前輸入下需要顯示的值，及n個*的字符串let text = '' // 當前input事件輸入的值，如果是刪除就沒有值// 當前input指針的位置，不一定是在最后const startPoint = e.target.selectionStartconst endPoint = e.target.selectionEndif (!value) {this.form.password = ''this.password = ''return}let leftNum = 0 // 輸入后左邊保留多少let rightNum = 0 // 輸入后右邊保留多少let isLeft = truefor (let i = 0; i < value.length; i++) {passwordShow += '*'if (value[i] == '*') {if (isLeft) {leftNum++} else {rightNum++}continue}text += value[i]isLeft = false}if (text) {this.form.password =oldVal.slice(0, leftNum) +text +oldVal.slice(oldVal.length - rightNum)} else {this.form.password =oldVal.slice(0, startPoint) +oldVal.slice(oldVal.length - leftNum - rightNum + startPoint)}this.password = passwordShowthis.$nextTick(() => {e.target.setSelectionRange(startPoint, startPoint)})},

?這個是把顯示隱藏賬號密碼做個false和true處理

 changeVent(type, val) {this[type] = val},

data對象：

data(){return{passwordTab: false,password: '',form:{password:''
}
}
}

?效果：