次要思路：
- 应用 input 用于输出，宽高刚好等于六个明码框就行
- 应用六个 div 用于展现输出的明码应用 * 号代替也可
- 每个明码块里写一个用于展现提示符的 div 依据 place 匹配提示符应该呈现的格子
- input 的层级须要高于六个明码展现块，设置 opacity: 0; 把 input 暗藏起来，这样用户就看不到 input 框，点击明码块的时候其实是点击的 input 框进行输出
- 明码块遍历明码数组做对应的展现就行
代码如下：
<template> <div class="salary-container"> <div class="dialog"> <div class="box-border"> <div class="box"> <input class="int" v-model="name" maxlength="6" type="text"> <div class="enter" v-for="(item, index) in password"> <!-- 跳跃的批示符 --> <div :class="{'tips': place == index}"></div> {{item}} </div> </div> </div> </div> </div></template><script>export default { data() { return { name: '', place: 0, password: ['','','','','',''] } }, created() { this.init() }, watch: { name(newV){ let arr = newV.split('') //转为数组 if(arr.length > 6){ arr = arr.splice(0, 6) //只取六位 } this.place = arr.length //更新批示符的地位 this.password = ['','','','','',''] arr.map((item, index) => { this.password[index] = item }) } },}</script><style lang="scss" scoped>@keyframes fade { //闪动的动画 from { opacity: 1.0; } 50% { opacity: 0.2; } to { opacity: 1.0; }}.dialog{ width: 100vw; height: 100vh; z-index: 999; background-color: rgba(0,0,0, .6); display: flex; justify-content: center; align-items: center; .box-border{ width: 500px; height: 200px; background-color: #fff; border: 1px solid #fff; box-shadow: 0px 0px 10px rgba(0,0,0, .6) inset; display: flex; justify-content: center; align-items: center; .box{ position: relative; display: flex; .enter{ width: 50px; height: 50px; border: 1px solid #000; margin: 0 5px 0 0; z-index: 100; display: flex; font-size: 30px; justify-content: center; align-items: center; //跳跃的批示符 .tips{ height: 30px; width: 1px; background-color: #000; animation: fade 1000ms infinite; } } .int{ border: none; display: inline-block; width: 100%; height: 50px; position: absolute; z-index: 999; opacity: 0; } } }}.salary-container{ padding:30px;}</style>效果图：