Fast-crud

Appearance

Return to top
On this page

添加 Form 基础组件

在项目中的基础组件是有限的，实际使用中需要开发者自己添加组件。Form 组件在配置和基础组件中做了一层桥接，它完成了数据的绑定、 placeholder、disabled 等等. 在新建基础组件我们只需要简单的几步便能完成。

自定义Input组件步骤示例

  1. 将定义好的组件使用以下 Props 即可连接到 Form 配置，当修改时需要触发更新 modelValue 与 onChange
js
import { defineComponent, unref } from "vue";
import { ElInput } from "element-plus";
import { propsType } from "./../propsType";

export default defineComponent({
  props: propsType,
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    const { placeholder, label, model, disabled } = props;
    return () => (
      <>
        <ElInput
          {...(props.customProps || {})}
          disabled={unref(disabled)}
          placeholder={placeholder || `请输入${label}`}
          onInput={(e) => {
            emit("update:modelValue", e);
            emit("change", e, model);
          }}
          modelValue={props.modelValue}
        />
      </>
    );
  },
});
  1. 将定义好后的组件导入进入 Form 配置入口, 即完成了自定义组件的定义
js
import Input from "./Input";

export const Components = {
  Input,
};