SelectBlock

下拉选择组件，拦截 <select-block> 标签，通过 options 属性传递选项列表。

演示

<select-block id="region-select" name="region" label="地区" options="北京,上海,广州,深圳" required />

---

地区请选择...北京上海广州深圳

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

    <hr>

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

const exampleText = '<select-block id="region-select" name="region" label="地区" options="北京,上海,广州,深圳" 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">
  <SelectBlock />
</StreamContains>

Props

属性	类型	来源	说明
isClosed	boolean	注入	闭合后才可操作
attrs.id	string	标签属性	稳定区块 ID，用于保留 payload
attrs.name	string	标签属性	业务字段名，用于归一化表单数据
attrs.label	string	标签属性	标签文字
attrs.options	string	标签属性	逗号分隔的选项列表，如 "北京,上海,广州"
attrs.placeholder	string	标签属性	默认提示文字
attrs.required	boolean	标签属性	是否必选

reportData

用户选择时调用 reportData({ value, name, label, valid, error })。

<select-block id="city-select" name="city" label="城市" options="北京,上海,广州,深圳" required />

CLI

npx @huiol/stream-ui add select

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