PreviewText ​

<template>
  <FormLayout :label-col="6" :wrapper-col="10">
    <FormProvider :form="form">
      <SchemaField>
        <SchemaStringField
          x-decorator="FormItem"
          title="文本预览"
          x-component="PreviewText.Input"
          default="Hello world"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="选择项预览"
          x-component="PreviewText.Select"
          :x-component-props="{
            multiple: true,
          }"
          :default="['123', '222']"
          :enum="[
            { label: 'A111', value: '123' },
            {
              label: 'A222',
              value: '222',
            },
          ]"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="日期预览"
          x-component="PreviewText.DatePicker"
          default="2020-11-23 22:15:20"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="时间预览"
          x-component="PreviewText.TimePicker"
          :default="['2020-11-23 22:15:20', '2020-11-23 23:15:20']"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="Cascader预览"
          x-component="PreviewText.Cascader"
          :default="['hangzhou', 'yuhang']"
          :enum="[
            { label: '杭州', value: 'hangzhou' },
            { label: '余杭', value: 'yuhang' },
          ]"
        />
      </SchemaField>
    </FormProvider>
  </FormLayout>
</template>

<script>
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import { Formily } from 'element-plus-x'
const { FormItem, FormLayout, PreviewText } = Formily

const fields = createSchemaField({
  components: {
    FormItem,
    PreviewText,
  },
})

export default {
  components: {
    FormProvider,
    FormLayout,
    ...fields,
  },
  data() {
    const form = createForm()
    return {
      form,
    }
  },
  methods: {
    log(v) {
      console.log(v)
    },
  },
}
</script>

<template>
  <Form
    :label-col="6"
    :wrapper-col="10"
    :form="form"
    :preview-text-placeholder="vnode"
  >
    <SchemaField>
      <SchemaStringField
        x-decorator="FormItem"
        title="文本预览"
        x-component="Input"
        default="Hello world"
      />
      <SchemaStringField
        x-decorator="FormItem"
        title="选择项预览"
        x-component="PreviewText.Select"
        :x-component-props="{
          multiple: true,
        }"
        :default="['123', '222']"
        :enum="[
          { label: 'A111', value: '123' },
          {
            label: 'A222',
            value: '222',
          },
        ]"
      />
      <SchemaStringField
        x-decorator="FormItem"
        title="日期预览"
        x-component="PreviewText.DatePicker"
        default="2020-11-23 22:15:20"
      />
      <SchemaStringField
        x-decorator="FormItem"
        title="日期范围预览"
        x-component="PreviewText.DatePicker"
        :default="['2020-11-23 22:15:20', '2020-11-24 22:15:20']"
      />
      <SchemaStringField
        x-decorator="FormItem"
        title="Cascader预览"
        x-component="PreviewText.Cascader"
        :default="['hangzhou', 'yuhang']"
        :enum="[
          { label: '杭州', value: 'hangzhou' },
          { label: '余杭', value: 'yuhang' },
        ]"
      />
    </SchemaField>
    <FormButtonGroup align-form-item>
      <Button
        @click="
          () => {
            form.setState((state) => {
              state.editable = !state.editable
            })
          }
        "
        >切换阅读态</Button
      >
    </FormButtonGroup>
  </Form>
</template>

<script>
import { h } from 'vue'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/vue'
import { Formily } from 'element-plus-x'
import { ElButton as Button } from 'element-plus'
const { Form, FormButtonGroup, FormItem, Input, PreviewText } = Formily

const fields = createSchemaField({
  components: {
    FormItem,
    Input,
    PreviewText,
  },
})

export default {
  components: {
    Form,
    FormButtonGroup,
    Button,
    ...fields,
  },
  data() {
    const form = createForm()
    return {
      form,
      vnode: () => h('div', {}, '123'),
    }
  },

  mounted() {},
}
</script>

<template>
  <FormLayout :label-col="6" :wrapper-col="10">
    <FormProvider :form="form">
      <SchemaField>
        <SchemaStringField
          x-decorator="FormItem"
          title="文本预览"
          x-component="Input"
          default="Hello world"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="选择项预览"
          x-component="Select"
          :x-component-props="{
            multiple: true,
          }"
          :default="['123', '222']"
          :enum="[
            { label: 'A111', value: '123' },
            {
              label: 'A222',
              value: '222',
            },
          ]"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="选择项预览2"
          x-component="Select"
          :x-component-props="{
            multiple: true,
            displayType: 'text',
            separator: '; ',
          }"
          :default="['123', '222']"
          :enum="[
            { label: 'A111', value: '123' },
            {
              label: 'A222',
              value: '222',
            },
          ]"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="日期预览"
          x-component="DatePicker"
          default="2020-11-23 22:15:20"
          :x-component-props="{
            style: {
              width: '100%',
            },
          }"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="时间预览"
          x-component="TimePicker"
          :default="'2020-11-23 22:15:20'"
          :x-component-props="{
            style: {
              width: '100%',
            },
          }"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="Cascader预览"
          x-component="Cascader"
          :x-component-props="{
            clearable: true,
            separator: '、',
            style: {
              width: '100%',
            },
          }"
          :default="['hangzhou', 'aa']"
          :enum="[
            {
              label: '杭州',
              value: 'hangzhou',
              children: [{ label: 'aa', value: 'aa' }],
            },
            { label: '余杭', value: 'yuhang' },
          ]"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="Cascader预览2"
          x-component="Cascader"
          :x-component-props="{
            displayType: 'text',
            clearable: true,
            separator: '、',
            style: {
              width: '100%',
            },
          }"
          :default="['hangzhou', 'aa']"
          :enum="[
            {
              label: '杭州',
              value: 'hangzhou',
              children: [{ label: 'aa', value: 'aa' }],
            },
            { label: '余杭', value: 'yuhang' },
          ]"
        />
        <SchemaStringField
          x-decorator="FormItem"
          title="开关"
          x-component="Switch"
          :x-component-props="{
            activeText: '是',
            inactiveText: '否',
            // activeValue: 1,
            // inactiveValue: 0,
          }"
          :default="true"
        />
      </SchemaField>
      <FormButtonGroup align-form-item>
        <Button
          @click="
            () => {
              form.setState((state) => {
                state.editable = !state.editable
              })
            }
          "
          >切换阅读态</Button
        >
      </FormButtonGroup>
    </FormProvider>
  </FormLayout>
</template>

<script>
import { createForm } from '@formily/core'
import { ElButton } from 'element-plus'
import { FormProvider, createSchemaField } from '@formily/vue'
import { Formily } from 'element-plus-x'
const {
  FormItem,
  FormLayout,
  Input,
  Select,
  DatePicker,
  TimePicker,
  Cascader,
  Switch,
  FormButtonGroup,
} = Formily

const fields = createSchemaField({
  components: {
    FormItem,
    Input,
    Select,
    DatePicker,
    TimePicker,
    Cascader,
    Switch,
    FormButtonGroup,
  },
})

export default {
  components: {
    Button: ElButton,
    FormProvider,
    FormLayout,
    FormButtonGroup,
    ...fields,
  },
  data() {
    const form = createForm()
    return {
      form,
    }
  },
  methods: {
    log(v) {
      console.log(v)
    },
  },
}
</script>