Skip to content

浮动模式

Cap 可以自动隐藏 CAPTCHA,等按钮被按下时再显示。用法是在触发元素上添加 data-cap-floating 属性,值为你想使用的 cap-widget 元素的查询选择器。

html
<cap-widget
  id="floating"
  onsolve="console.log(`token: ${event.detail.token}`)"
  data-cap-api-endpoint="<api endpoint>"
></cap-widget>

<button data-cap-floating="#floating" data-cap-floating-position="bottom">
  Trigger floating mode
</button>

你还需要从 JSDelivr 同时引入 Cap 库和浮动模式脚本:

html
<script src="https://cdn.jsdelivr.net/npm/cap-widget"></script>
<script src="https://cdn.jsdelivr.net/npm/cap-widget/cap-floating.min.js"></script> 

或从 Standalone 服务端引入:

html
<script src="https://<server url>/assets/widget.js"></script>
<script src="https://<server url>/assets/floating.js"></script>

支持以下属性:

  • data-cap-floating:你想使用的 cap-widget 元素的 CSS 选择器。
  • data-cap-floating-position:浮动组件的位置,可以是 topbottom
  • data-cap-floating-offset:浮动组件相对触发元素的偏移量。