uniapp微信小程序实现意见反馈封装

uniapp yekong

uniapp微信小程序开发过程中,需要实现联系客服的功能,这里我们使用微信自带的联系客服,需要使用button按钮的open-type="feedback",为了可以在多个地方使用,保持主页面代码的整洁,我们对这个功能进行封装,另外一个相似的功能是:uniapp微信小程序实现联系客服

uniapp微信小程序实现意见反馈封装

关键代码

	<button open-type="feedback" class="button-style">
		<slot></slot>
	</button>

封装复用

<template>
	<button open-type="feedback" class="button-style">
		<slot></slot>
	</button>
</template>

<script>
</script>

<style lang="scss">
	.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; //黑色边框去掉了
	}
</style>

使用

<feedback>
	<div class="aboutBodyItem">
		<image class="icon" src="/static/my/icon8.png">
		</image>
		<text>意见反馈</text>
	</div>
</feedback>
喜欢