因为有要button和view显示的样式相同的需要
所以要去掉按钮的边框，圆角，背景色，文字需要居左对齐，代码如下：
关键是按钮的样式：
1. 去掉边框：
.user-phone-btn::after {
border: none;
}
2. 去掉圆角（注意border-radius: 0以下两处都要写）：
.user-phone-btn {
border-radius:;
}
.user-phone-btn::after {
border-radius:;
}
3. 去掉背景：设置背景颜色和父view背景颜色相同即可
4. 文字左对齐（要设置margin-lef和padding-left）：
.user-phone-btn {
margin-left: 0rpx;
padding-left: 0rpx;
}
5. 修改button高度：需要设置line-height属性，值与height设置相同即可，不然按钮中的文字显示不会居中
具体代码如下：
// .wxml
<view wx:if='{{hasBindingPhoneNumber}}' class='user-phone' >123456789012</view>
<button wx:else class='user-phone-btn' open-type="getPhoneNumber" lang="zh_CN" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindgetphonenumber="bindGetPhoneNumber" hover-class="other-button-hover">buttonText</button>
// .js文件
Page({ /**
* 页面的初始数据
*/
data: {
defaultSize: 'default',
disabled: false,
plain: false,
loading: false,
},
})
.user-phone {
color: white;
font-size: 28rpx;
}
.user-phone-btn {
background-color: #FF8EAC;
font-size: 28rpx;
border-radius:;
color:white;
margin-left: 0rpx;
padding-left: 0rpx;
height: 60rpx;
line-height: 60rpx;
}
.user-phone-btn::after {
border: none;
border-radius:;
}