InputBlock

文本输入组件，拦截 <input-block> 标签，支持通过 v-model:data 实时获取用户输入值。

演示

<input-block id="username-input" name="username" label="用户名" placeholder="请输入用户名" required /> <input-block id="email-input" name="email" label="邮箱" placeholder="请输入邮箱" required />

---

用户名

邮箱

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

    <hr>

    <StreamContains v-model:data="blocks" :model-value="text" mode="accurate">
      <InputBlock />
    </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, InputBlock } from 'stream-ui'
import Input from '../../.comm/Input.vue'

const exampleText = '<input-block id="username-input" name="username" label="用户名" placeholder="请输入用户名" required />\n<input-block id="email-input" name="email" label="邮箱" placeholder="请输入邮箱" required />'
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">
  <InputBlock />
</StreamContains>

Props

属性	类型	来源	说明
content	string	标签内文本	初始值
isClosed	boolean	注入	标签是否已闭合（闭合后才可编辑）
attrs.id	string	标签属性	稳定区块 ID，用于保留 payload
attrs.name	string	标签属性	业务字段名，用于归一化表单数据
attrs.label	string	标签属性	输入框标签
attrs.placeholder	string	标签属性	占位文字
attrs.required	boolean	标签属性	是否必填
attrs.type	string	标签属性	原生 input 类型，默认 text

reportData

用户在输入框键入时自动调用 reportData({ value, name, label, valid, error })，该值会出现在 v-model:data 对应区块的 payload 字段中。

配合 collectStreamFormData(blocks) 可以通过 name 直接读取 values：

<input-block id="email-input" name="email" label="邮箱" placeholder="请输入邮箱" required />

CLI

npx @huiol/stream-ui add input

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