type说明yer-components组件说明文档

安装

npm install yer-components

准备工作

该组件需要依托uview和mescroll（yer-list-view基于mescroll封装）才能正常使用。

// 图片压缩包（图片上传组件引用）必装
npm install compressorjs

yer-form

根据动态配置进行表单渲染

Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ---------------- | ------------------------------------------------------------- | -------------- | ------ | ------------------------------------------------------------- | | v-model | 表单双向绑定数据 | | | | | config | 动态表单配置信息 | Array | - | 见下方config说明 | | default-value | 默认值 | Object | - | - | | label-width | 左侧提示文字宽度，会覆盖config里配置的值 | Number|String | 0 | | | label-name | 自定义 list数据的 label属性名，会覆盖config里配置的值 | String | label | | | value-name | 自定义 list数据的 value属性名，会覆盖config里配置的值 | String | value | | | action | 图片上传地址 | String | - | | | header | 图片上传的头部信息 | Object | - | | | upload-form-data | 图片上传额外的formData | Object | - | | | value-type | 图片返回类型 | String | array | array(base64模式用数组类型，否则会报错)，string（用逗号分割） | | max-count | 图片上传数量 | Number | 9 | 最大支持9张 | | eval-path | 图片返回接口的对象计算 | String | data | 返回结果是对象，参考类似这种写法res.data.url | | mode | 图片上传的模式，选择filestream的话必须配置action | String | base64 | filestream(文件流)，base64（带头部value-type选array） |

config配置说明

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ----------- | ------------------------------------------------------------ | ---------------- | ---------- | --------------------- | | type | 表单类型 | String | input | 见下方type说明 | | key | 必填，数据项列名 | String | - | | | label | 必填，左侧提示文字 | String | - | | | required | 最左侧的*号 | Boolean | false | | | placeholder | 提示文字 | String | 请选择 | | | visible | 控制显示隐藏 | Boolean/Function | true | 详见下方visible说明 | | rules | 表单验证规则 | Array | - | 详见uview表单验证规则 | | list | 代码项list，radio,checkox，select，side-select，side-select-mutil等需要字典的组件使用 | Array | - | | | label-name | 自定义 list数据的 label属性名 | String | label | | | value-name | 自定义 list数据的 value属性名 | String | value | | | max-count | 图片上传可选的最大数量 | Number | - | image-upload专用 | | action | 图片上传的地址，后端配合 | | | | | mode | 图片上传的模式，选择filestream的话必须配置action | String | filestream | filestream/base64 |

type说明

| 名称 | 说明 | | ----------------- | ----------------------- | | input | 文本输入框 | | number | 数字 | | textarea | 文本域 | | select | 底部弹框选择器（单选） | | side-select | 侧边弹框选择器（单选） | | side-select-mutil | 侧边弹框选择器（多选） | | car-plate | 车牌号 | | idcard | 身份证 | | phone | 手机号 | | radio | 单选 | | checkbox | 多选 | | image-upload | 图片上传 | | date | 日期yyyy-MM-dd | | date-hour | 日期yyyy-MM-dd HH | | date-minute | 日期yyyy-MM-dd HH:mm | | date-second | 日期yyyy-MM-dd HH:mm:ss | | time-minute | 时间HH:mm | | time-second | 时间HH:mm:ss |

visible说明

visible回调函数参数为当前表单的值，返回true显示，false隐藏

{
    type: 'custom',
    label: '(性别不明)自定义组件',
    key: 'xzz', //
    visible: (formData) => {
        if (formData.select === '0') {
            return true
        }
        return false
    },
    rules: [
        {
            required: true,
            message: '自定义组件必填',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur,change'
        }
    ]
}

完整config配置

1.如果需要回显数据，应先获取到全部字典后再初始化表单组件。

2.建议config写成计算属性，方便字典赋值。

config: [
    {
        type: 'YerInput',
        key: 'input', //
        label: '文本',
        required: false,
        rules: [{ // 表单验证规则 同uview表单验证规则 
            required: true,
            message: '请输入姓名',
            trigger: 'blur,change' // 可以单个或者同时写两个触发验证方式
        }],
    },
    {
        type: 'YerTextview',
        key: 'textview', //
        label: '只读文本',
        required: false
    },
    {
        type: 'YerTextarea',
        key: 'textarea', //
        label: '文本域',
        required: false
    },
    {
        type: 'YerIdcard',
        key: 'idcard', //
        label: '身份证号',
        required: true,
        placeholder: '请填写身份证'
    },
    {
        type: 'YerCarPlate',
        key: 'carPlate', //
        label: '车牌号',
        required: true,
        placeholder: '请填写车牌号'
    },
    {
        type: 'YerPhone',
        key: 'phone', //
        label: '手机号',
        required: true,
        placeholder: '请填写手机号'
    },
    {
        type: 'YerSelect',
        key: 'select', //
        label: '上拉单选',
        list: [
            {
                label: '男',
                value: '1'
            },
            {
                label: '女',
                value: '2'
            },
            {
                label: '不明',
                value: '0'
            }
        ],
        required: true
    },
    {
        type: 'YerRadio',
        key: 'radio', //
        label: '单选',
        labelName: 'zdmc',
        valueName: 'zddm',
        visible: true,
        list: [
            {
                zdmc: '是',
                zddm: '1'
            },
            {
                zdmc: '否',
                zddm: '2'
            }
        ],
        required: true
    },
    {
        type: 'YerRadio',
        key: 'radio', //
        label: '单选',
        visible: (formData) => {
            console.log('visible回调', formData)
            if (formData.sfxb === '1' && formData.xm === '隐藏') {
                return false
            }
            return true
        },
        labelName: 'zdmc',
        valueName: 'zddm',
        list: [
            {
                zdmc: '是',
                zddm: '1'
            },
            {
                zdmc: '否',
                zddm: '2'
            }
        ],
        required: true
    },
    {
        type: 'YerCheckbox',
        key: 'checkbox', //
        label: '多选',
        list: [
            {
                label: '男',
                value: '1'
            },
            {
                label: '女',
                value: '2'
            },
            {
                label: '不明',
                value: '0'
            }
        ],
        required: true
    },
    {
        type: 'YerSideSelect',
        key: 'sideSelect', //
        label: '侧边单选',
        list: [
            {
                label: '男',
                value: '1'
            },
            {
                label: '女',
                value: '2'
            },
            {
                label: '不明',
                value: '0'
            }
        ],
        required: true
    },
    {
        type: 'YerSideSelectMutil',
        key: 'sideSelectMutil', //
        label: '侧边多选',
        list: [
            {
                label: '男',
                value: '1'
            },
            {
                label: '女',
                value: '2'
            },
            {
                label: '不明',
                value: '0'
            }
        ],
        required: true
    },
    {
        type: 'YerDate',
        key: 'date', //
        label: '日期',
        required: true
    },
    {
        type: 'custom',
        label: '(性别不明)自定义组件',
        key: 'xzz', //
        visible: (formData) => {
            if (formData.select === '0') {
                return true
            }
            return false
        },
        rules: [
            {
                required: true,
                message: '自定义组件必填',
                // 可以单个或者同时写两个触发验证方式
                trigger: 'blur,change'
            }
        ]
    },
    {
        type: 'YerImageUpload',
        key: 'rxzp', //
        label: '图片上传',
        mode: 'base64'
    }
]

yer-list-view

每次列表数据更新都要执行一次endBySize，用于判断是否存在下一页数据。

Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ------ | ------------------------------------------------ | ------- | ------ | ------ | | top | 距离顶部距离 | String | 0rpx | - | | bottom | 距离底部距离 | String | 0rpx | - | | fixed | 定位方式 | Boolean | true | false | | height | 列表高度，如果设置了height，则fixed属性强制false | String | - | - |

Event

| 事件名 | 说明 | 回调参数 | 版本 | | -------- | ------------ | ------------------------------------------------------------ | ---- | | upCall | 上拉加载等多 | 上拉加载的回调 (返回mescroll实例对象)，mescroll.num当前页码，mescroll.size每页条数 | - | | downCall | 下拉刷新 | 下拉刷新的回调 (返回mescroll实例对象) | - |

Methods

方法用ref调用

| 方法名 | 说明 | 参数 | 版本 | | ------------- | --------------------------------------------------------------------------------- | ----------------------- | ---- | | endBySize | 每次列表数据更新都要执行一次，curPageLen是表示本次返回的数据，totalSize表示总数据 | [curPageLen, totalSize] | - | | resetUpScroll | 刷新列表数据 | - | - |

yer-base-page

带头部导航和底部按钮的base页面

Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ----------------- | -------------------- | ------- | ------- | ------ | | show-navbar | 展示导航栏 | Boolean | false | true | | navbar-background | 导航栏背景色 | String | #FFFFFF | - | | nav-title-color | 导航标题颜色 | String | #606266 | - | | title | 导航标题 | String | - | - | | nav-height | 导航栏高度，单位是px | Number | 44 | - | | bottom-text | 底部按钮文字 | String | 提交 | - | | is-bottom | 展示底部按钮 | Boolean | false | true |

Event

| 事件名 | 说明 | 回调参数 | 版本 | | ------ | ---------------- | -------- | ---- | | commit | 底部按钮点击事件 | - | - |

Solt

| 名称 | 说明 | | ---- | ------------ | | - | 中间主体部分 |