去除ios上点击微信开放标签时出现的黑色阴影

mewmew1

已于 2023-05-26 14:36:59 修改

阅读量455

点赞数 1

文章标签：前端 vue

于 2023-05-26 14:35:59 首次发布

本文链接：https://blog.csdn.net/mewmew1/article/details/130885878

版权

文章介绍了如何通过在开放标签和插槽按钮上设置样式-webkit-tap-highlight-color:transparent来消除iOS设备上点击时出现的黑色高亮条。特别是强调了插槽按钮应使用button标签而不是p标签，以避免此问题。提供的代码示例展示了具体的实现方法。

摘要由CSDN通过智能技术生成

1.在开放标签和插槽按钮上添加样式 -webkit-tap-highlight-color:transparent !important
2.插槽按钮需使用button标签，使用p标签点击时ios上会出现黑色小横条
代码：

<wx-open-launch-weapp
            v-if="isWx"
            id="doc-launch-btn-doctor"
            username="gh_xxxxxxxxxxxx"
            :env-version="EnvVersion"
            :path="/pages/index/index?companyCode=enter "
          >
            <script type="text/wxtag-template">
              <style>.btn{ width:100%;
                height:100%;
                border: 0;
                outline: none;
                opacity:0;
                z-index:99;
                position:absolute;
                top:0;
                left:0;
                -webkit-tap-highlight-color:transparent !important
                }</style>
              <button class="btn"></button>
            </script>
          </wx-open-launch-weapp>
          <style scoped lang="scss">
#doc-launch-btn-doctor{
 -webkit-tap-highlight-color:transparent !important
}
</style>