支付宝小程序使用 CSS 自定义智能客服组件的页面布局

布局

<view class="contact-box">
  <text>这是客服按钮</text>
  <contact-button tnt-inst-id="" scene="" />
</view>

样式

最主要是父标签中的position: relative属性。

以及子标签中的position: absolute、opacity: 0、z-index，否则无法响应contact-button的点击事件

.contact-box {
    width: 500rpx;
    height: 92rpx;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #F8F8F8;
    background: #00cc88;
    border-radius: 16rpx;
}

.contact-box contact-button {
    width: 100%;
    height: 100%;
    position: absolute;
      left: 0;
      top: 0;
    opacity: 0;
    z-index: 100;
}

参考

https://open.alipay.com/portal/forum/post/79701031