ui-component-react

Install

npm install ui-component-react

yarn add ui-component-react

pnpm add ui-component-react

Description

仿照element-ui的组件，使用react实现。按钮事件onClick,输入空、日期选择、下拉筛选等事件为onChange事件，支持form表单，自定义规则等，格式与element一致，目前只实现部分组件，后续会持续更新。该组件版本较高，需要router的v6版本和react的18版本或者支持useContext、useMemo等语法版本。

Usage

项目案例gitee地址: https://gitee.com/niuhailive/react-component-example.git,clone后install直接运行dev,推荐使用yarn;

import React,{ useState,useRef } from 'react';

import { UiButton,UiDatePicker,UiForm,UiFormItem,UiInput,UiSelect,UiTable,$message,$messageBox } from 'ui-component-react';

import 'ui-component-react/lib/theme-chalk/index.scss';

const App = () => (

const formRef = useRef();

const [ time,setTime ] = useState(new Date());
const [ status,seStatus ] = useState([]);
const [ formModel,setFormModel ] = useState({
    account: '',
    password: ''
});

const header = [  {
        title: '名称',
        key: 'name',
        tooltip: true
    },  {
        title: '状态',
        key: 'status',
        slot: 'status'
    },  {
        title: '地址',
        subHeader:[
            {
                title: '省',
                key: 'economize'
            },  {
                title: '市',
                key: 'market'
            },  {
                title: '县',
                key: 'county',
                subHeader: [
                    {
                        title: '镇,
                        key: 'zhen
                    },
                    {
                        title: '乡下',
                        key: 'xiang'
                    }
                ]
            }
        ]
    },
    {
        title: '操作',
        slot: 'action'
    }
]
const data = [
    {
        name: '名字',
        economize: 'xxx省',
        market: 'xxx市',
        county: 'xxx县',
        zhen: 'xxx镇',
        xiang: 'xxx乡',
    }
]
const options = [
    {
        label: '待使用',
        value: 'wait',
    }
]

function passwordValid(rule, value,callback){
    if(!value){
        callback(new Error('请输入密码`));
    }else if(value.length < 6 && value.length > 18){
        callback(new Error('密码长度为6到18位!`));
    }else {
        callback();
    }
}
const rules = {
    account: [
        { required: true,message: '请输入账号!',trigger: 'blur' }
    ],
    password: [
        { required: true,message: '请输入密码!',trigger: 'blur' },
        { validator: passwordValid,trigger: 'blur' }
    ]
}

function submitForm(){
    formRef.current.validate((valid)=>{
        if(valid){

        }else {
            $message.error('请按要求填写表单!')
        }
    })
};
function goDelete(val){
    $messageBox.confirm('是否删除?','删除',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(()=>{

    }).catch(()=>{
        $message.info('取消删除!')
    })
}

return <>
    <UiDatePicker clearable value={ time } onChange={ setTime }/>
    <UiSelect clearable value={ status } options={ options } onChange={ seStatus }/>
    <UiInput value={ status } options={ options } onChange={ seStatus }/>
    <UiButton type="primary" onClick(()=>submitForm)>PRESS ME</UiButton>
    
    <UiForm ref={ formRef } model={ formModel } rules={ rules } labelPosition='top'>
        <UiFormItem label="账号" prop="account">
            <UiInput value={ formModel.account } onChange={ (e)=>setFormModel({ ...formModel,account: e }) } />
        </UiFormItem>
        <UiFormItem label="密码" prop="password">
            <UiInput value={ formModel.password } onChange={ (e)=>setFormModel({ ...formModel,password: e }) } />
        </UiFormItem>
    </UiForm>
    <UiTable header={ header } data={ data }>
        {
            status: (item)=>{
                return <div>{ item.status }</div>
            }，
            action: (item)=>{
                return <div>
                    <UiButton type="danger" size="small" onClick={()=>goDelete(item)}删除</UiButton>
                </div>
            }
        }
    </UiTable>
</UiSelect>

);