yer-components v2.0.2

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

安装

npm install yer-components

准备工作

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

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

yer-form

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

Props

config配置说明

type说明

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

Event

Methods

方法用ref调用

yer-base-page

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

Props

Event

Solt