common_form_item
v3.1.7
Published
这个组件是一个万能表单组件;不受不同项目组件库不同的影响;采用jsx写法;动态渲染表单元素
Downloads
15
Maintainers
Readme
commonFormChild
这是用jsx写的万能表单组件; 注意的是vue3.x以上版本请安装版本3.0.0以上的版本;vue3.x以下版本请安装版本3.0.0以下的版本;两者切记不可混用
Props
|Name|Description|Type|Required|Default|
|---|---|---|---|---|
|data|这是传入表单组件的属性|Object
|false
|{"name":"","placeholder":"请选择","value":"","options":[],"type":"text"}|
|form|这是form表单对象值|Object
|false
|{}|
例子
import CommonFormItem from "common_form_item"
vue2.x 如此引入 Vue.use(CommonFormItem)
vue3.x 如此引入 app.use(CommonFormItem)
这样你的项目中可以使用一个CommonFormItem组件;这个组件是一个万能表单组件;不受不同项目组件库不同的影响;
这样你可以使用CommonFormItem组件封装成自己项目的需求
<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>