uniapp微信小程序开发中,经常需要用到按钮来获取电话号码等信息,但是很多地方并不是按钮样式,所以我们需要对按钮进行改造,让其像普通的div一样。
<button v-if="!isLogin" class="button-style homeHead" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">
<div class="homeHeadUser">
<image src="/userhead.png"></image>
</div>
<div class="homeHeadInfo">
<div class="login1">点击登录/注册</div>
<div class="loginDesc">可展示全部信息</div>
</div>
</button>
.button-style {
background: none;
/* 清除背景 */
border: none;
/* 清除所有边框 */
padding: 0;
/* 清除内边距 */
margin: 0;
/* 清除外边距 */
color: inherit;
/* 继承文字颜色 */
text-align: left;
/* 文字对齐方式 */
box-shadow: none;
/* 移除阴影 */
line-height: normal;
/* 设置正常行高 */
font-size: 16px;
/* 可调整字体大小 */
outline: none;
/* 移除焦点轮廓线 */
}
.button-style::after {
border: none; //黑色边框去掉了
}