vant的NumberKeyboard 数字键盘存在样式bug及注册事件失效
直接引用vant的NumberKeyboard 数字键盘在项目中显示如下
然而官方的样式如下
出现问题
1.样式货不对板
2.close事件失效 , blur事件也无法关闭键盘
样式问题解决
第一
在移动端更改vant组件的样式 不能使用scoped和>>> 进行样式穿透
需要给它定义一个唯一样式名字,再更改
将字体改为黑色
第二
找ui设计一个键盘图标, 重新覆盖原有键盘的位置,并添加动画效果
(将键盘和新图标同处于一个父级盒子下, 解决动画不同步问题)
事件失效问题解决
将click事件注册在新的键盘图标位置
具体代码如下
<div class="account-check" >
<div>
<div class="input_Keyboard">
<van-field
type="text"
placeholder="请输入"
@touchstart.native.stop="show = true"
maxlength='28'
:disabled="secondObj.TransMode=='1'"
class="name-input"
:value="secondObj.PayeeAcctNo"
input-align="right"
:clearable="true"
@clear ="clearInput"
/>
<div class='close' :class="{close_btn_active:show}">
<van-number-keyboard :show="show1" v-model="secondObj.PayeeAcctNo" @blur="goblur"/>
<div class="close_btn" @click="show =false"></div>
</div>
</div>
</div>
// show:false,
// show1:true,
样式部分
<style lang='scss'>
.input_Keyboard{
.van-number-keyboard__body{
color: #000 !important;
// i:nth-last-child(3){
// background:url(../../../../assets/image/company/arrow2.png);
// }
}
}
</style>
<style scoped lang="scss">
.close{
transform: translateY(100%);
width: 100vw;
height: 216px;
position: fixed;
bottom: 0;
left:0;
z-index: 300;
background: #fff;
transition: .3s;
}
.close_btn_active{
transform: translateY(0) !important;
}
.close_btn{
width: 125px;
height:54px;
// background: #fff;
background: url(../../../../assets/image/company/keyboard.png) no-repeat center center;
background-size:40px 40px;
position: absolute;
bottom: 0;
left: 0;
z-index: 500;
}
最终效果如下