安装
pnpm install amy-plus-next@latest
``
javascript
import {createApp} from "vue"
import App from "./App.vue"
const app = createApp(App)
app.use(AmyPlus, {
name: "",
// appendName: "V2",
zhCNLang: "zh_CN",
phoneConutry,
formLengthProps: {
maxlength: [50, 50, 150],
maxlengthRule: (ml) => {
return {
max: ml,
message: 长度不能超过${ml}
,
trigger: "blur",
}
},
},
i18n,
})
``
| 属性 | 默认值 | 描述 |
| ---------- | ------ | ------------------ |
| name | A | 组件自定义开始名称 |
| appendName | - | 组件自定义结束名称 |
CustomForm 属性
| 属性 | 默认值 | 描述 |
| ------------ | ------ | --------------------------------------- |
| columns | -/必填 | 每个表单的配置项 |
| model | -/必填 | 表单的 model 队形 |
| rowProps | - | el-row 传递的参数 |
| colProps | - | el-col 传递的参数 |
| maxlength | 50 | 在输入框最大允许输入的最大字符数 |
| contentWidth | - | 控制 el-form-item 的长度（例如：500px） |
_兼容 el-form 其它的 props_
columns 属性
| 属性 | 默认值 | 描述 |
| ------------- | ------ | ------------------------------------------------------------------------------------- |
| label | - | 表单 label 文案 |
| prop | - | 表单项的 prop |
| type | input | 表单项的组件名称（switch/radio，省略 el，也有自定义的组件，multiple-group，tel） |
| vif | true | 是否显示表单项，可以是函数，返回值是 boolean |
| readonly | false | 表单项是否只读，可以是函数，返回值是 boolean |
| disabled | false | 表单项是否禁用，可以是函数，返回值是 boolean |
| defaultValue | - | 表单项的默认值 |
| renderItem | - | 支持 jsx 格式自定义 el-form-item |
| renderPrepend | - | 支持 jsx 格式自定义 el-form-item 的前置插槽 |
| renderLabel | - | 支持 jsx 格式自定义 el-form-item label 内容 |
| labelTooltip | - | 支持 jsx 格式自定义 el-form-item label 提示内容 |
| renderContent | - | 支持 jsx 格式自定义 el-form-item content 内容 |
| tooltip | - | 支持 jsx 格式自定义 el-form-item content 提示内容 |
| fieldSlots | - | elementui 的自带插槽，如如 el-input，你可以传入{ append:() =>
我是 append
} |
| renderAppend | - | 支持 jsx 格式自定义 el-form-item 的后置插槽 |
| formItemProps | - | el-form-item 的所都 props |
| fieldProps | - | el-form-item 里面的子元素每一项的 props |
| rowProps | - | 覆盖 CustomForm rowProps 属性 |
| colProps | - | 覆盖 CustomForm colProps 属性 |
| options | - | 组件为 type 为 el-checkbox-group，radio-group，select 是需要传递 |
formItemProps 属性
| 属性 | 默认值 | 描述 |
| ------------ | ------ | ------------------------------------------------------- |
| contentWidth | - | 控制 el-form-item 的长度（500px），覆盖 CustomForm 属性 |
| hasLabel | - | 是否显示 el-form-item 的 label 内容 |
| hasContent | - | 是否显示 el-form-item 的 content 内容 |
_兼容 el-form-item 其它的 props_
fieldProps 属性
| 属性 | 默认值 | 描述 |
| ----- | ------ | ----------------------------------------------------- |
| emits | - | 监听每个组件的事件，比如 change:(v) => console.log(v) |
_兼容 el-form-item 子组件的其它 props_
multiple-group 类型的参数
| 属性 | 默认值 | 描述 |
| ------------- | ------ | ----------------------------------------------------------------------------------------------------------------- |
| columns | - | 参考上面的 columns 属性，当 colums 只有一个的时候，默认返回的是个数组，其它的返回的自己定义的 key，value 对象数组 |
| multipleProps | - | 控制最多和最小的数值，maxLength 表示最大，minLength 标识最小 |