uniapp 微信小程序按钮移除默认样式

uniapp yekong

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; //黑色边框去掉了
	}
喜欢