直接在外层包裹view,button的方法会不生效
<view class="userLoginBox">
<button class="userLogin" plain open-type="getPhoneNumber" @getphonenumber="handlePhoneNumber">
<image class="btn-img" src="/static/static/imagesNew/icon_button_default.png" mode="aspectFill" />
{{ loginTitle }}
</button>
</view>
在button 里面加image ,外层不包裹view即可
<button class="userLogin" plain open-type="getPhoneNumber" @getphonenumber="handlePhoneNumber">
<image class="btn-img" src="/static/static/imagesNew/icon_button_default.png" mode="aspectFill" />
{{ loginTitle }}
</button>
取消uni-app 的默认 button 样式
button[plain] {
border: 0;
}
.userLogin {
background-color: none;
position: relative;
width: 100%;
height: 160rpx;
color: #F9D1FF;
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
>image {
position: absolute;
width: 100%;
height: 160rpx;
height: 160rpx;
z-index: -1;
}
&::after {
background: none;
border-radius: none;
border: none;
background-color: none;
}
}