{"_id":"@chengzs/zeformv","name":"@chengzs/zeformv","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@chengzs/zeformv","version":"1.0.0","author":{"name":"chengzs"},"license":"MIT","type":"module","main":"./dist/zeformv.umd.cjs","module":"./dist/zeformv.js","types":"./dist/zeformv.d.ts","description":"基于 element plus 的二次封装，使用 JSON 来配置表单，主打一个简便。","keywords":["element plus","vue","form"],"repository":{"type":"git","url":"git+https://github.com/ZERRzZ/zeformv.git"},"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"peerDependencies":{"vue":"^3.5.13","element-plus":"^2.9.1"},"dependencies":{"@types/node":"^22.10.2","element-plus":"^2.9.1","vue":"^3.5.13"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.1","typescript":"~5.6.2","vite":"^6.0.1","vite-plugin-dts":"^4.3.0","vite-plugin-libcss":"^1.1.1","vue-tsc":"^2.1.10"},"_id":"@chengzs/zeformv@1.0.0","gitHead":"61d7d634749eed584f26be1f0b74b4ebe73835db","bugs":{"url":"https://github.com/ZERRzZ/zeformv/issues"},"homepage":"https://github.com/ZERRzZ/zeformv#readme","_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-lEf65QYF179FtlhKdmDew9KlNbPotuck2Dg7+dmF/l0JP44YrPJiQIKv7FAEm1Cc7CtUrSqY1CKrIrFsmkZS/A==","shasum":"6ee6932730a7308ede50e18a6c0a26a07a737356","tarball":"https://registry.npmjs.org/@chengzs/zeformv/-/zeformv-1.0.0.tgz","fileCount":7,"unpackedSize":48866,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCItjFx1URWkpSKh2wupOw/WL3dKGWk2BGpMH2wa6OQGQIhAMyXksHFv0BR+Vz/FCMJQkaDi5edPw8coAlewhpQeTDT"}]},"_npmUser":{"name":"chengzs","email":"2930048068@qq.com"},"directories":{},"maintainers":[{"name":"chengzs","email":"2930048068@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/zeformv_1.0.0_1740993623149_0.41223820843085957"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-03T09:20:23.036Z","1.0.0":"2025-03-03T09:20:23.345Z","modified":"2025-03-03T09:20:23.618Z"},"maintainers":[{"name":"chengzs","email":"2930048068@qq.com"}],"description":"基于 element plus 的二次封装，使用 JSON 来配置表单，主打一个简便。","homepage":"https://github.com/ZERRzZ/zeformv#readme","keywords":["element plus","vue","form"],"repository":{"type":"git","url":"git+https://github.com/ZERRzZ/zeformv.git"},"author":{"name":"chengzs"},"bugs":{"url":"https://github.com/ZERRzZ/zeformv/issues"},"license":"MIT","readme":"# 简介\r\n\r\n基于 element plus 的二次封装，使用 JSON 来配置表单，主打一个简便。\r\n\r\n# 快速上手\r\n\r\n```html\r\n<ZeFormV :form=\"form\" :items=\"items\" @finish=\"handleFinish\" />\r\n```\r\n\r\n```ts\r\nconst form = reactive<ZeForm>({\r\n  labelWidth: '120px',\r\n  model: {\r\n    text: '',\r\n    password: ''\r\n  },\r\n  rules: {\r\n    text: [{ required: true, message: 'input 必填哦' }]\r\n  }\r\n})\r\n\r\nconst items = reactive<ZeFormItem[]>([\r\n  { type: 'text', name: 'text', label: '用户名' },\r\n  { type: 'password', name: 'password', label: '密码' },\r\n  { type: 'submit', name: '提交' }\r\n])\r\n\r\nconst handleFinish = () => {\r\n  console.log(form.model)\r\n}\r\n\r\nconst handleReset = () => {\r\n  console.log('reset')\r\n}\r\n```\r\n\r\n# API\r\n\r\n## form\r\n\r\n配置表单标签 `<Form>` ，属性值同 element plus。\r\n\r\n## items\r\n\r\n```ts\r\n/**\r\n * 表单项配置\r\n * @param type 类型\r\n * @param name 既是表单 name，prop，也是按钮 innerHTML\r\n * @param label 标签名\r\n * @param item 在 el-form-item 上的属性\r\n * @param option 在表单控件上的属性\r\n * @param event 在表单控件上的事件\r\n * @param options 表单控件的值集合，在特殊控件中使用\r\n */\r\nexport interface ZeFormItem {\r\n  type: ZeFormTypes\r\n  name: string\r\n  label?: string\r\n  item?: Partial<FormItemProps> & { style?: Partial<CSSStyleDeclaration> }\r\n  option?: any\r\n  event?: any\r\n  options?: any[]\r\n}\r\n```\r\n\r\n## @finish，@reset\r\n\r\n配置 `type === 'submit'` `type === 'reset'` 时使用。\r\n\r\n## ref 使用\r\n\r\n```html\r\n<ZeFromV ref=\"zeformv\" />\r\n```\r\n\r\n```ts\r\nconst handleClick = () => {\r\n  // 同原生的 ref\r\n  console.log(zeformv.value?.zeform)\r\n}\r\n```\r\n\r\n## 使用 slot 实现自定义 input 框 prepend\r\n\r\n```html\r\n<ZeFormV>\r\n  <template #text-prepend>\r\n    <el-button>prepend</el-button>\r\n  </template>\r\n</ZeFormV>\r\n```\r\n\r\n以上的插槽命名规则是表单项 `name` 加上插槽的作用位置名称。\r\n\r\n其他的还有 `-append` `-header` `-footer`，在 `Element Plus` 中有用到插槽的地方这里都能这么用。\r\n\r\n另一中是带有数据的插槽，像 `-select` `-treeSelect` `-cascader`，一般用于自定义列表项。\r\n\r\n```html\r\n<template #selectG-select=\"{ item }\">\r\n  <span>{{ item.label }}: {{ item.value }}</span>\r\n</template>\r\n```\r\n\r\n# 表单项总览\r\n\r\n```html\r\n<ZeFormV\r\n  ref=\"zeformv\"\r\n  :form=\"form\"\r\n  :items=\"items\"\r\n  @finish=\"handleFinish\"\r\n  @reset=\"handleReset\"\r\n>\r\n  <template #selectG-select=\"{ item }\">\r\n    <span>{{ item.label }}: {{ item.value }}</span>\r\n  </template>\r\n  <template #treeSelect-treeSelect=\"{ item }\">\r\n    <span>{{ item.label }}: {{ item.value }}</span>\r\n  </template>\r\n  <template #cascader-cascader=\"{ item }\">\r\n    <span>{{ item.data.label }}: {{ item.data.value }}</span>\r\n  </template>\r\n</ZeFormV>\r\n```\r\n\r\n```ts\r\nconst zeformv = useTemplateRef<InstanceType<typeof ZeFormV>>('zeformv')\r\n\r\nconst options1 = [\r\n  { label: 'option 1', value: '1' },\r\n  { label: 'option 2', value: '2' },\r\n  { label: 'option 3', value: '3' }\r\n]\r\n\r\nconst options2 = [\r\n  {\r\n    label: 'group 1',\r\n    options: [\r\n      { label: 'option 1', value: '1' },\r\n      { label: 'option 2', value: '2' }\r\n    ]\r\n  }\r\n]\r\n\r\nconst options3 = [\r\n  {\r\n    label: 'level 1',\r\n    value: '1',\r\n    children: [\r\n      { label: 'level 1-1', value: '1-1' },\r\n      { label: 'level 1-2', value: '1-2' }\r\n    ]\r\n  }\r\n]\r\n\r\nconst items = reactive<ZeFormItem[]>([\r\n  {\r\n    type: 'text',\r\n    name: 'text',\r\n    label: 'text',\r\n    item: { style: { width: '50%' } },\r\n    option: { prefixIcon: markRaw(Search) }\r\n  },\r\n  {\r\n    type: 'password',\r\n    name: 'password',\r\n    label: 'password',\r\n    item: { style: { width: '50%' } },\r\n    option: { prefixIcon: markRaw(Lock) }\r\n  },\r\n  {\r\n    type: 'textarea',\r\n    name: 'textarea',\r\n    label: 'textarea',\r\n    option: { maxlength: 100 }\r\n  },\r\n  { type: 'number', name: 'number', label: 'number' },\r\n  { type: 'radio', name: 'radio', label: 'radio', options: options1 },\r\n  { type: 'radioB', name: 'radioB', label: 'radioB', options: options1 },\r\n  { type: 'select', name: 'selectS', label: 'selectS', options: options1 },\r\n  { type: 'select', name: 'selectG', label: 'selectG', options: options2 },\r\n  { type: 'select', name: 'selectV', label: 'selectV', options: options2 },\r\n  { type: 'checkbox', name: 'checkbox', label: 'checkbox', options: options1 },\r\n  {\r\n    type: 'checkboxA',\r\n    name: 'checkboxA',\r\n    label: 'checkboxA',\r\n    options: options1\r\n  },\r\n  { type: 'switch', name: 'switch', label: 'switch' },\r\n  {\r\n    type: 'time',\r\n    name: 'time',\r\n    label: 'time',\r\n    item: { style: { width: '50%' } },\r\n    option: { isRange: true }\r\n  },\r\n  {\r\n    type: 'date',\r\n    name: 'date',\r\n    label: 'date',\r\n    item: { style: { width: '50%' } },\r\n    option: { type: 'daterange' }\r\n  },\r\n  {\r\n    type: 'treeSelect',\r\n    name: 'treeSelect',\r\n    label: 'treeSelect',\r\n    option: { showCheckbox: true, multiple: true },\r\n    options: options3\r\n  },\r\n  {\r\n    type: 'cascader',\r\n    name: 'cascader',\r\n    label: 'cascader',\r\n    option: { props: { multiple: true } },\r\n    options: options3\r\n  },\r\n  { type: 'color', name: 'color', label: 'color' },\r\n  { type: 'upload', name: 'upload', label: 'upload' },\r\n  {\r\n    type: 'button',\r\n    name: '按钮',\r\n    item: { style: { width: '80px' } },\r\n    event: {\r\n      click: () => {\r\n        console.log(zeformv.value?.zeform)\r\n      }\r\n    }\r\n  },\r\n  {\r\n    type: 'submit',\r\n    name: '查询',\r\n    item: { style: { width: '100px' } }\r\n  },\r\n  {\r\n    type: 'reset',\r\n    name: '重置',\r\n    item: { style: { width: '100px' } }\r\n  }\r\n])\r\n\r\nconst handleFinish = () => {\r\n  console.log(form.model)\r\n}\r\n\r\nconst handleReset = () => {\r\n  console.log('reset')\r\n}\r\n```\r\n","readmeFilename":"README.md"}