确认信息

确认信息组件，用于确认用户操作，例如删除、提交等。

样式

  • Preview
  • Code

提示

确认删除吗？

<div class="bny-confirm">
    <h3 class="title">提示</h3>
    <p class="content">确认删除吗？</p>
    <div class="btn">
        <button class="bny-btn" color="blue">确认</button><button class="bny-btn">取消</button>
    </div>
</div>

Htmx-组件

  • Preview
  • Code
<button hx-ext="bny-confirm" class="bny-btn" hx-get="/test/data/confirm.json"
hx-confirm="你确定要点击这个组件吗？">确认</button>
<button hx-ext="bny-confirm" class="bny-btn" hx-get="/test/data/confirm.json" hx-confirm="你确定要删除这个组件吗？"
title="删除" anim="up">其他</button>
<button hx-ext="bny-confirm" class="bny-btn" hx-get="/test/data/confirm.html" hx-confirm="你确定要点击吗？">确认-html</button>

键盘交互

  • Preview
  • Code
打开确认框后：Enter = 确认回调，Escape = 取消回调，点击遮罩 = 取消。多个 confirm 叠加时仅响应最上层。 
<button class="bny-btn" onclick="bny.confirm('按 Enter 确认 / 按 ESC 取消')">弹出确认</button>

// 键盘支持：
//   Enter  -> 触发 yes_cb
//   Escape -> 触发 no_cb
//   点击遮罩 -> 触发 no_cb

API

标签属性

属性 默认值 必须 描述 版本
hx-ext bny-confirm 是 拓展属性名
anim 'scale' 否 提示动画:scale-缩放,left-左移,right-右移,up-上移,down-下移

JSON属性

属性 默认值 必须 描述 版本
code 0 是 提示类型:0-默认,1-绿色,2-黄色,3-红色,4-蓝色
msg '' 是 提示消息
time 3 否 提示显示时间,单位秒
anim 'scale' 否 提示动画:scale-缩放,left-左移,right-右移,up-上移,down-下移

Js用法

bny.confirm(msg, options)

属性 默认值 必须 描述 版本
msg '' 是 提示消息
options {} 否 配置对象
options.title '提示' 否 提示标题
options.anim 'scale' 否 提示动画:scale-缩放,left-左移,right-右移,up-上移,down-下移
options.yes_cb () => { } 否 确认回调函数
options.no_cb () => { } 否 取消回调函数