odex21/s-form

s-form

用JSON组合Vue组件，生成页面

Usage

npm i @s-form/core @s-form/preset-element-plus element-plus

import { SmartForm } from '@s-form/core'
import { useDefineSchema } from '@s-form/preset-element-plus'
//import base style
import '@s-form/core/style'

const schema = useDefineSchema()([
  {
    label: '输入框',
    alias: 'input',
    key: 'name',
  },
  {
    label: '多model绑定',
    alias: 'pagination',
    key: 'submit',
    modelKeyMap: {
      currentPage: 'page',
      pageSize: 'pageSize',
    },
    props: {
      total: 123,
      layout: 'sizes, prev, pager, next',
    },
  },
  {
    label: '自定义插槽',
    alias: 'button',
    key: 'link',
    slot: () => h(ElLink, { href: 'https://kokodayo.fun' }, () => '123'),
    slots: {
      icon: Share,
    },
  },
  {
    label: '默认插槽 事件绑定',
    alias: 'button',
    key: 'action',
    slot: 'reset',
    props: {
      onClick: () => {
        console.log(model)
        model.name = 'odex'
        model.page = 1
        model.pageSize = 20
      },
    },
  },
])

const model = reactive({ name: '123', page: 1, pageSize: 20 })

const rules: Rules = {
  name: {
    min: 10,
  },
}

<SmartForm
  class="space-y-4"
  :model-value="model"
  :rules="rules"
  :form-schema="schema"
  label-width="auto"
/>

Development

npm i -g pnpm@6
pnpm i
cd playground
pnpm dev