InputTag ​

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { FormItem, InputTag, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'

const form = createForm()
const { SchemaField, SchemaArrayField } = createSchemaField({
  components: {
    FormItem,
    InputTag,
  },
})

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaArrayField
        name="skills"
        title="技术标签"
        x-decorator="FormItem"
        x-component="InputTag"
        :default="['Vue', 'TypeScript']"
        :x-component-props="{
          placeholder: '输入后按 Enter 添加',
        }"
      />
      <SchemaArrayField
        name="frameworks"
        title="感兴趣的框架"
        x-decorator="FormItem"
        x-component="InputTag"
        :x-component-props="{
          placeholder: '允许重复，自动去除空白',
          saveOnBlur: false,
        }"
      />
    </SchemaField>
    <Submit style="margin-top: 12px" @submit="log">
      提交
    </Submit>
  </FormProvider>
</template>

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { FormItem, InputTag, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'

const form = createForm()
const { SchemaField, SchemaArrayField } = createSchemaField({
  components: {
    FormItem,
    InputTag,
  },
})

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaArrayField
        name="roles"
        title="限制数量"
        x-decorator="FormItem"
        x-component="InputTag"
        :default="['前端', '体验设计']"
        :x-component-props="{
          placeholder: '最多 3 个标签',
          max: 3,
          clearable: true,
          collapseTags: true,
          collapseTagsTooltip: true,
          maxCollapseTags: 1,
        }"
      />
      <SchemaArrayField
        name="shortcuts"
        title="自定义触发"
        x-decorator="FormItem"
        x-component="InputTag"
        :x-component-props="{
          placeholder: '按空格或输入逗号添加',
          trigger: 'Space',
          delimiter: ',',
          saveOnBlur: true,
          draggable: true,
        }"
      />
    </SchemaField>
    <Submit style="margin-top: 12px" @submit="log">
      提交
    </Submit>
  </FormProvider>
</template>

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { FormItem, InputTag, Submit } from '@silver-formily/element-plus'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm()

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="topics"
      title="讨论话题"
      :decorator="[FormItem]"
      :component="[InputTag, { placeholder: '自定义样式', clearable: true, collapseTagsTooltip: true }]"
      :initial-value="['Formily', 'Element Plus']"
    >
      <template #prefix>
        <span class="demo-input-tag-prefix">话题</span>
      </template>
      <template #suffix>
        <span class="demo-input-tag-suffix">按 Enter 提交</span>
      </template>
      <template #tag="{ value, index, field }">
        <span class="demo-input-tag-chip">
          {{ index + 1 }}. {{ value }}
          <small v-if="field?.title">({{ field?.title }})</small>
        </span>
      </template>
    </Field>
    <Submit style="margin-top: 16px" @submit="log">
      提交
    </Submit>
  </FormProvider>
</template>

<style scoped>
.demo-input-tag-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.demo-input-tag-suffix {
  font-size: 12px;
  color: var(--vp-c-text-3);
}

.demo-input-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
}
</style>