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