# common_form_item

> 这个组件是一个万能表单组件;不受不同项目组件库不同的影响;采用jsx写法;动态渲染表单元素

Latest version **3.1.8** (published 2025-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install common_form_item
pnpm add common_form_item
yarn add common_form_item
bun add common_form_item
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.1.8 |
| Published | 2025-12-29 |
| First published | 2022-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | naughty_rose |
| Keywords | 表单, vue3.0, vue2.0, jsx, form, 自定义Form, 自定义表单配置, v-model |

## Links

- npm: https://www.npmjs.com/package/common_form_item
- Repository: https://github.com/yzh1234567/CommonFormItem
- Homepage: https://github.com/yzh1234567/CommonFormItem#readme
- Issues: https://github.com/yzh1234567/CommonFormItem/issues
- npm.io page: https://npm.io/package/common_form_item

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.1.8 (latest) — 2025-12-29
- 3.0.4-beat.2 (beta) — 2023-01-12
- 3.1.7 — 2023-05-29
- 3.1.6 — 2023-05-29
- 3.1.5 — 2023-05-22
- 3.1.4 — 2023-05-22
- 3.1.3 — 2023-05-22
- 3.1.2 — 2023-05-17
- 3.1.1 — 2023-05-05
- 3.1.0 — 2023-05-05
- 3.0.9 — 2023-05-05
- 3.0.8 — 2023-05-05
- 3.0.7 — 2023-04-23
- 3.0.6 — 2023-01-12
- 3.0.5 — 2023-01-12
- … 24 more at https://npm.io/package/common_form_item/versions

## README

# commonFormChild
  这是用jsx写的万能表单组件; 注意的是vue3.x以上版本请安装版本3.0.0以上的版本；vue3.x以下版本请安装版本3.0.0以下的版本;两者切记不可混用
## Props

<!-- @vuese:commonFormChild:props:start -->
|Name|Description|Type|Required|Default|
|---|---|---|---|---|
|data|这是传入表单组件的属性|`Object`|`false`|{"name":"","placeholder":"请选择","value":"","options":[],"type":"text"}|
|form|这是form表单对象值|`Object`|`false`|{}|

<!-- @vuese:commonFormChild:props:end -->


## 例子

# import CommonFormItem from "common_form_item"

# vue2.x 如此引入 Vue.use(CommonFormItem)
# vue3.x 如此引入 app.use(CommonFormItem)

# 这样你的项目中可以使用一个CommonFormItem组件；这个组件是一个万能表单组件;不受不同项目组件库不同的影响;
# 这样你可以使用CommonFormItem组件封装成自己项目的需求

# <common-form-item :data='fields[0]' :form="form"></common-form-item>

```vue
<template>
  <div>
    <common-form-item :data='fields[0]' :form="form"></common-form-item>
  </div>
</template>

<script>
//  type为select\checkbox\radio时表示父子组件；一定要options与childTag有值;否则不会渲染
export default {
       data(){
           return {
               form:{
                 name:'',
                 sex:'',
                 channel:'',
                 sex:'',
               },
               fields:[
                 {
                    tag:'el-input',  //标签名称
                    childTag:'el-option',//针对复合元素才有该属性；指明子元素
                    options:[], //为下拉选择框\多选框\单选框准备等父子组件准备
                    type:'text', //指明文本框是输入框、文本域、单选、多选、下拉选择框,可选择值text|textarea|select|checkbox|radio 和其他 原生 input 的 type 值
                    onChange:()=>{}, //给组件传入的事件写法
                    onClick:()=>{},  //给组件传入的事件写法 ;组件有什么事件；只需在事件前面加上on即可；但要注意驼峰命名
                    /* 
                    name标识传入组件双向绑定的字段;v2只能是字符串;v3为字符串/对象/数组;
                    字符串表示该组件只有一个v-model且无参数
                    数组表示该组件有多个v-model
                    对象时；name = {
                        argument:'modelValue',  //表示v-model:argument的参数
                        modifiers:'trim'||['trim','number'], //表示v-model的修饰符,只支持vue内置的修饰符
                        name:'name',
                    }
                    */
                    name:'name', 
                    label:'姓名',
                    clearable:true,
                    placeholder:'请输入姓名',
                    maxlength:10,
                    'show-word-limit':true,
                    class:{
                        'my-input':true
                    },
                    style:{
                        width:'300px'
                    },
                    scopedSlots:{
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        }
                    }, //作用域插槽写法 距离是该组件有一个header的作用域插槽;此属性在vue2.x版本有效；在vue3.x中已移入slots属性中
                    slots:{
                        suffix:()=>{
                            return (
                                <span>天</span>
                            )
                        },
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        }
                    }, //插槽写法包括作用域插槽
                 },
               ]
           }
       },
</script>
```

---
_Source: https://npm.io/package/common_form_item · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._