快速创建一个表单

查看 22|回复 0
作者:594mantou   
最近优化 DuoyunUI 时写了一些“模式”,就是一些我经常遇到的需求进行了一些抽象实现,比如创建一个表单(复制到控制台试试):
import("https://esm.sh/duoyun-ui/patterns/form?bundle").then(({ createForm }) => {
  createForm({
    type: "modal",
    data: { firstName: "First Name", lastName: "Last Name", github: "https://github.com/mantou132" },
    header: `Create User`,
    formItems: [
      [{
        type: "text",
        field: "firstName",
        label: "First Name",
      },{
        type: "text",
        field: "lastName",
        label: "Last Name",
      }],{
        type: "text",
        field: "github",
        label: "Github",
      }
    ],
  });
});
字段支持的 type: text password date date-time date-range number checkbox checkbox-group picker radio-group select textarea slot
其中 slot 是用来自定义的,比如:
{
  type: "slot",
  slot: new HTMLInputElement(),
  field: "github",
  label: "Github",
}
模式可以直接创建一个 CRUD 应用: https://duoyun-ui.gemjs.org/zh/blog/crud
您需要登录后才可以回帖 登录 | 立即注册

返回顶部