Mention 提及 ​

vue

<template>
  <FormProvider :form="form">
    <FormLayout :label-width="100">
      <SchemaField>
        <SchemaStringField
          required
          name="input"
          title="基础用法"
          x-decorator="FormItem"
          x-component="Mention"
          :x-component-props="{
            clearable: true,
          }"
          default="@"
          :enum="options"
        />
        <SchemaStringField
          required
          name="textarea"
          title="Textarea"
          x-decorator="FormItem"
          x-component="Mention"
          :x-component-props="{
            type: 'textarea',
            options: options,
            prefix: '/',
          }"
          default="/"
        />
      </SchemaField>
      <FormButtonGroup align-form-item>
        <Reset force-clear>重置</Reset>
        <Submit @submit="log">提交</Submit>
      </FormButtonGroup>
    </FormLayout>
  </FormProvider>
</template>

<script setup>
import { ref } from 'vue'
import { createForm } from '@formily/core'
import { Formily } from 'element-plus-x'
import { FormProvider, createSchemaField } from '@formily/vue'
const { FormLayout, FormItem, Mention, Submit, Reset, FormButtonGroup } =
  Formily

const form = createForm()
const fields = createSchemaField({
  components: {
    FormItem,
    Mention,
  },
})
const { SchemaField, SchemaStringField } = fields

const log = (value) => {
  console.log(value)
}

const options = ref([
  {
    label: 'Fuphoenixes',
    value: 'Fuphoenixes',
  },
  {
    label: 'kooriookami',
    value: 'kooriookami',
  },
  {
    label: 'Jeremy',
    value: 'Jeremy',
  },
  {
    label: 'btea',
    value: 'btea',
  },
])
</script>

vue

<template>
  <Form :form="form" :label-width="100">
    <SchemaField :schema="schema" />
    <FormButtonGroup align-form-item>
      <Reset force-clear>重置</Reset>
      <Submit @submit="log">提交</Submit>
    </FormButtonGroup>
  </Form>
</template>

<script setup>
import { ref } from 'vue'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/vue'
import { Formily } from 'element-plus-x'
const { Form, FormItem, Mention, Reset, Submit, FormButtonGroup } = Formily

const options = ref([
  {
    label: 'Fuphoenixes',
    value: 'Fuphoenixes',
  },
  {
    label: 'kooriookami',
    value: 'kooriookami',
  },
  {
    label: 'Jeremy',
    value: 'Jeremy',
  },
  {
    label: 'btea',
    value: 'btea',
  },
])

const schema = {
  type: 'object',
  properties: {
    input: {
      required: true,
      type: 'string',
      title: '基础用法',
      'x-decorator': 'FormItem',
      'x-component': 'Mention',
      'x-component-props': {
        clearable: true,
        options: options.value,
      },
      default: '@',
    },
    textarea: {
      required: true,
      type: 'string',
      title: 'Textarea',
      'x-decorator': 'FormItem',
      'x-component': 'Mention',
      'x-component-props': {
        type: 'textarea',
        prefix: '/',
      },
      enum: options.value,
      default: '/',
    },
  },
}

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

const log = (value) => {
  console.log(value)
}
</script>

vue

<template>
  <Form :form="form" :label-width="100" component="div">
    <Field
      required
      name="input"
      title="输入框"
      :decorator="[FormItem]"
      :component="[Mention, { clearable: true, options }]"
    />
    <Field
      required
      name="textarea"
      title="文本框"
      :decorator="[FormItem]"
      :component="[Mention]"
      :data-source="options"
    />
    <FormButtonGroup align-form-item>
      <Reset force-clear>重置</Reset>
      <Submit @submit="log">提交</Submit>
    </FormButtonGroup>
  </Form>
</template>

<script setup>
import { ref } from 'vue'
import { createForm } from '@formily/core'
import { Field } from '@formily/vue'
import { Formily } from 'element-plus-x'
const { Form, FormButtonGroup, FormItem, Mention, Submit, Reset } = Formily

const form = createForm()

const log = (value) => {
  console.log(value)
}

const options = ref([
  {
    label: 'Fuphoenixes',
    value: 'Fuphoenixes',
  },
  {
    label: 'kooriookami',
    value: 'kooriookami',
  },
  {
    label: 'Jeremy',
    value: 'Jeremy',
  },
  {
    label: 'btea',
    value: 'btea',
  },
])
</script>