总体思路：
动态添加 :ref=' ' 标识，通过this.$ref(' ') 操作 dom。
1、keyboardClick()：点击数字键盘的时候，把对应的值通过vue操作dom的形式，赋值给第一个dom值为“-”的span标签。
2、keyboardDelete()：点击删除的时候，通过vue操作dom的形式，将最后一个dom值不为“-”且原始数据对应的值不为“*”的span标签的值赋值为“-”。
3、keyboardSubmit()：点击提交的时候，通过vue操作dom的形式，获取所有span标签的值，拼在一起传给后端即可。
效果图：
1、html
注意: 每个span标签都有一个ref标识 :ref="'numder' + index"
<div class="price_tip" v-if="priceTip">
<div class="price_text">本次竞猜将消耗11个鸡蛋，请输入您的竞猜价格参与活动吧：</div>
<div class="price_number">
<span
v-for="(item, index) in hxPrice.split('')"
:key="item"
:ref="'numder' + index"
>{
{item == '*' ? '_' : item}}</span>
</div>
<div class="price_keyboard">
<div class="keyboard_left">
<div class="warp">
<div class="keyboard_numder" @click="keyboardClick(1)">1</div>
<div class="keyboard_numder" @click="keyboardClick(2)">2</div>
<div class="keyboard_numder" @click="keyboardClick(3)">3</div>
</div>
<div class="warp">
<div class="keyboard_numder" @click="keyboardClick(4)">4</div>
<div class="keyboard_numder" @click="keyboardClick(5)">5</div>
<div class="keyboard_numder" @click="keyboardClick(6)">6</div>
</div>
<div class="warp">
<div class="keyboard_numder" @click="keyboardClick(7)">7</div>
<div class="keyboard_numder" @click="keyboardClick(8)">8</div>
<div class="keyboard_numder" @click="keyboardClick(9)">9</div>
</div>
<div class="warp">
<div class="keyboard_zero" @click="keyboardClick(0)">0</div>
<div class="keyboard_point" @click="keyboardClick('.')">.</div>
</div>
</div>
<div class="keyboard_right">
<div class="keyboard_delete" @click="keyboardDelete">
<img src="./img/delete.png" alt="">
</div>
<div class="keyboard_submit" @click="keyboardSubmit">提交</div>
</div>
</div>
<div class="btn" @click="priceTip = false"></div>
<div class="vertical"></div>
</div>
2、js
export default {
data () {
return {
hxPrice: '**3**', // 后端返回的要竞猜的价格
hxPriceValue: '', // 提交竞猜价格
priceTip: true
}
}，
methods: {
// 猜价格输入点击
keyboardClick (number) {
for (let index = 0; index < this.hxPrice.length; index++) {
let value = this.$refs[`numder${
index}`][0].innerHTML
if (value == '_') {
// 1、点击数字键盘的时候，把对应的值通过vue操作dom的形式，赋值给第一个dom值为“-”的span标签。
this.$refs[`numder${
index}`][0].innerHTML = number
return
}
}
},
// 猜价格删除按键
keyboardDelete () {
let hxPriceArr = this.hxPrice.split('')
for (let index = this.hxPrice.length - 1; index >= 0; index--) {
let value = this.$refs[`numder${
index}`][0].innerHTML
// 2、点击删除的时候，通过vue操作dom的形式，将最后一个dom值不为“-”且原始数据对应的值不为“*”的span标签的值赋值为“-”。
if (value != '_' && hxPriceArr[index] == '*') {
this.$refs[`numder${
index}`][0].innerHTML = '_'
return
}
}
},
// 猜价格提交
keyboardSubmit () {
this.hxPriceValue = ''
for (let index = 0; index < this.hxPrice.length; index++) {
let value = this.$refs[`numder${
index}`][0].innerHTML
if (value == '_') {
// this.Native.tip('您输入的数据格式不正确，请重新输入~')
return
}
// 3、点击提交的时候，通过vue操作dom的形式，获取所有span标签的值，拼在一起传给后端
this.hxPriceValue = `${
this.hxPriceValue}${
value}`
}
this.priceTip = false
// 调接口即可
},
},
}
3、css
// 猜价格弹窗
.price_tip {
width: 100%;
background: #F8F8F8;
position: absolute;
bottom: 0;
.price_text {
margin: 48px 40px 0;
font-family: PingFangSC-Regular;
font-size: 32px;
color: #666666;
font-weight: 400;
text-align: left;
}
.price_number {
margin: 24px 40px;
background: #FFFFFF;
border-radius: 4px;
text-align: center;
height: 72px;
line-height: 72px;
font-family: YouSheBiaoTiHei;
font-size: 52px;
color: #576AFF;
font-weight: 800;
span {
margin-right: 0.32rem;
}
}
.price_keyboard {
background: #FFFFFF;
text-align: center;
display: flex;
.keyboard_left {
font-family: Roboto-Regular;
font-size: 60px;
color: #333333;
font-weight: 400;
box-sizing: border-box;
overflow: hidden;
flex: 1;
.warp {
display: flex;
}
.keyboard_numder {
flex: 1;
height: 106px;
line-height: 106px;
border-bottom: 1px solid #F1F1F1;
border-right: 1px solid #F1F1F1;
}
.keyboard_zero {
flex: 2;
border-right: 1px solid #F1F1F1;
}
.keyboard_point {
flex: 1;
}
}
.keyboard_right {
width: 186px;
float: right;
.keyboard_delete {
height: 106px;
display: flex;
align-items: center;
justify-content: center;
img {
height: 72px;
width: 72px;
}
}
.keyboard_submit {
height: 316px;
line-height: 316px;
background: #576AFF;
font-family: PingFangSC-Semibold;
font-size: 36px;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 600;
}
}
}
.btn {
width: .8rem;
height: .8rem;
background: url('./img/price_close.png') center no-repeat;
background-size: 100%;
position: absolute;
right: 0.32rem;
top: -1.12rem;
}
.vertical {
height: 56px;
width: 10px;
background-color: #fff;
position: absolute;
right: 50px;
top: -28px;
}
}