需求:用户进入页面的时候,希望光标聚焦,但是不要弹出软键盘
思路:
在用户点击之前使用div盒子替代,利用伪元素做出聚焦的样式,当用户点击修改的时候,再触发聚焦事件
data() {
return {
isShow: true
};
},
<van-row class="div-radius">
<van-col span="24">
<div class='flex username' v-if='isShow'>
<div class='leftName'>姓名</div>
<div class='flex1' @click='inputUsername'>
<span class='blinker'>{
{
username}}</span>
</div>
</div>
<van-field
v-else
v-model="username"
name="用户名"
ref="username"
label="姓名"
placeholder="请输入姓名"
:rules="[{ required: true, message: '请输入姓名' }]"
/>
</van-col>
</van-row>
inputUsername() {
this.isShow = false;
this.$nextTick(() => {
this.$refs.username.focus();
});
}
.flex{
display: flex;
align-items: center;
}
.flex1{
flex:1;
}
.username{
color: #323233;
font-size: 0.875rem;
padding: 0.625rem 1rem;
line-height: 1.5rem;
.leftName{
width: 6.2em;
margin-right: 0.75rem;
}
.rightInfo{
line-height: 1.5rem;
}
}
.blinker{
position: relative;
}
.blinker:after {
position: absolute;
right: -.1rem;
top:0;
-webkit-animation-name: blinker;
animation-name: blinker;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1);
-webkit-animation-duration: 1s;
animation-duration: 1s;
display: inline-block;
content: '';
width: .0625rem;
height: 1rem;
margin-left: .15625rem;
border-radius: .09375rem;
box-shadow: 0 0 .3125rem rgba(255, 255, 255, 0.3);
background: #000;
}
@-webkit-keyframes blinker {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes blinker {
from {
opacity: 1;
}
to {
opacity: 0;
}
}