antd-configures-element v0.2.4

antd-configures-element

install

npm install --save antd-configures-element

main.js

import { createApp } from "vue";
import CustomDeployForm from "antd-configures-element"
createApp(App).use(CustomDeployForm)

template

  <CustomForm
    v-model:option="data"
    layout="vertical"
    labelCol="0"
    wrapperCol="24"
    formName="forms"
    v-model:formData="formData"
    @confirm="handleConfirm"
    @cancel="handleCancel"
    >
    <template #defaultSlot>
        <a-slider v-model:value="formData.slider" />
    </template>
    <template #lineInput>
        <a-input v-model:value="formData.slotinput" />
    </template>
  </CustomForm>

data

const data = reactive([
  {
    line: 3,
    name: "username",
    types: "input",
    title: "用户名",
    rules: { required: true, message: `用户名不能为空` },
  },
  {
    line: 3,
    name: "select",
    types: "select",
    mode: "multiple",
    title: "水果下拉",
    options: [
      { value: "苹果", label: "苹果" },
      { value: "香蕉", label: "香蕉" },
      { value: "草莓", label: "草莓" },
    ],
    rules: { required: true, message: `用户名不能为空` },
  },
  {
    name: "fruits",
    types: "checkbox",
    title: "水果",
    options: [
      { value: 1, label: "苹果" },
      { value: 2, label: "香蕉" },
      { value: 3, label: "草莓" },
    ],
    rules: { required: true, message: `水果不能为空` },
  },
  {
    name: "delivery",
    types: "switch",
    title: "是否选中",
    rules: { required: true, message: `是否选中不能为空` },
  },
  {
    name: "radio",
    types: "radio",
    title: "单选",
    options: [
      { value: 1, label: "苹果" },
      { value: 2, label: "香蕉" },
      { value: 3, label: "草莓" },
    ],
    rules: { required: true, message: `单选不能为空` },
  },
  {
    name: "slider",
    title: "拉伸",
    types: "slot",
    slotName: "defaultSlot",
    rules: { required: true, message: `拉伸不能为空` },
  },
  {
    name: "slotinput",
    title: "行",
    types: "slot",
    slotName: "lineInput",
    rules: { required: true, message: `行不能为空` },
  }
])