ButtonBlock

操作按钮组件，拦截 <button-block> 标签，点击后通过 reportData 上报事件。

演示

<button-block id="submit-button" action="submit" label="提交" />

---

<template>
  <div>
    <Input v-model="text" :rows="2" :simulate-text="exampleText" />

    <hr>

    <StreamContains v-model:data="blocks" :model-value="text" mode="accurate">
      <ButtonBlock />
    </StreamContains>

    <div v-if="blocks.length" class="s-demo-payload">
      <div v-for="b in blocks" :key="b.id" class="s-demo-item">
        <span class="s-demo-tag">[{{ b.tagName }}]</span>
        payload: <code>{{ JSON.stringify(b.payload) }}</code>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { StreamContains, ButtonBlock } from 'stream-ui'
import Input from '../../.comm/Input.vue'

const exampleText = '<button-block id="submit-button" action="submit" label="提交" />'
const text = ref(exampleText)
const blocks = ref([])
</script>

<style scoped>
.s-demo-payload {
  margin-top: 12px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
}

.s-demo-item {
  margin: 4px 0;
}

.s-demo-tag {
  color: #6366f1;
  font-weight: 600;
}
</style>

使用

<StreamContains v-model:data="blocks" :model-value="text" mode="accurate">
  <ButtonBlock />
</StreamContains>

Props

属性	类型	来源	说明
content	string	标签内文本	按钮文字
isClosed	boolean	注入	闭合后才可点击
attrs.id	string	标签属性	稳定区块 ID，用于保留 payload
attrs.label	string	标签属性	按钮文字（content 不存在时使用）
attrs.action	string	标签属性	语义动作名，默认 click

reportData

点击时调用 reportData({ action, clicked: true, at: timestamp })。

<button-block id="submit-button" action="submit" label="提交" />

CLI

npx @huiol/stream-ui add button

生成 src/components/ui/button-block.vue。