simple-component-react

Usage

$3

``bash
npm install simple-component-react --save
`

$3

> HoverAlert组件调用方式如下

!HoverAlert组件样式

`
import {HoverAlert} from 'simple-component-react';

render(
,
document.getElementById('hoverTipsOne')
);

render(



render(
{alert('haha')}} />,
document.getElementById('hoverTipsLeft')
);
`
> ClickTips组件调用方式如下

!ClickTips组件样式

`
import {ClickTips} from 'simple-component-react';

render(
,
document.getElementById('hoverTipsOne')
);
`

> 只需要系统组件，不需要自定义的时候，可以直接调用如下方式

!popAlert
!confirm
`
import {SystemComponent} from 'simple-component-react';
// 如果没有dom或者不想要render到页面上，是一个组件内部调用的话。可以调用SystemComponent
// 会自动执行render(, dom);
SystemComponent.open("PopAlertAnimate", {
content: '有动画的，不需要设置自动隐藏',
status: 'error',
noHide: true
});
`

> Animation：负责动画的高阶组件，调用组件的时候，会自动传递 __handleClose__ 作为子元素的props，可以关闭这个动画蒙层。
> 所以在所有的close方法中，都需要使用 __this.initClose = handleClose || this.close || fn;__
> 同时也需要this.open = this.open.bind(this); __避免父元素调用this.ref.close的时候被重新调用到子元素上__
> 需要自定义组件的时候，如下方式
`
import {CustomComponent, PopAlert, ConfirmDialog, Animation} from 'simple-component-react';
const {ComponentManager, ComponentWrapper} = CustomComponent;
const PopAlertAnimate = Animation(PopAlert);
const ConfirmDialogAnimate = Animation(ConfirmDialog);
render(
,
document.getElementById('component')
);

// 调用PopAlert组件，提示弹窗
ComponentManager.open("PopAlertAnimate", {
content: '有动画的，需要设置自动隐藏时间',
status: 'error',
delayTime: 2500 // 默认值，默认隐藏时间
});

// 调用PopAlert组件，提示弹窗
ComponentManager.open("PopAlert", {
content: '没有动画的，不使用Animate包裹即可',
status: 'success'
});

// 调用ConfirmDialog组件，确认弹窗
ComponentManager.open('ConfirmDialog', {
contentType: 'confirm', // 【confirm/alert】confirm会有两个确认按钮，alert只有一个按钮，表示一种提示
title: '提示', // 弹窗的内容
content: '确定删除吗', // 弹窗的内容
handleClose: ()=>{alert("dsfd")}, // 默认有，关闭当前组件。也可以传入自定义函数，调用之后会自定关闭当前组件。
handleSure: ()=>{alert("dsfd")}, // 处理点击确认按钮的函数，会自动关闭当前dialog，并执行handleSure
});
`

> 需要使用dialog组件，调用方式如下
> 也可以参照《ConfirmDialog》组件，是一个完整的例子
`
import React, { Component } from 'react';
import {Dialog} from 'simple-component-react';
const fn = ()=>{};
class DialogDemo extends Component {
constructor (props) {
super(props);
this.state = {
hide: true,
text: ''
};
this.open = this.open.bind(this);
this.close = this.close.bind(this);
this.initClose = this.props.handleClose || this.close; // 如果可能需要动画的话，需要使用handleClose，每个地方调用close的时候，都调用父元素的关闭，再由父元素去调用关闭当前dialog的方法
this.confirmValidDialog = this.confirmValidDialog.bind(this);
}

confirmValidDialog(){
this.initClose();
window.open('https://github.com/zyd317/simple-component-react/blob/master/src/ConfirmDialog/index.js', '_blank');
}

render () {
if(this.state.hide){
return null;
}
return (
title='这里是dialog的title'
showCloseIcon={false} // 表示是否展示右上角的关闭按钮，默认展示
close={this.initClose} // 点击dialog的时候会调用。关闭父元素的方法，调用父元素的关闭，比如被Animate包裹的时候，会自动传入一个handleClose方法，关闭
customClassName='my-class'
buttons={[ // 默认展示"确认"按钮和"取消按钮"，都调用this.initClose
{
text: '确认',
fn: this.confirmValidDialog
}, {
text: '取消',
fn: this.initClose
}
]}
>
这里是dialog的内容。如提示语句，输入框等

);
}

open(config){
this.setState({
...config,
hide: false
})
};
close(){
this.setState({
hide: true
})
};
}
export default DialogDemo;
`

> 需要使用Select组件，调用方式如下
!ConfirmDialogTouch
`
import {Select} from 'simple-component-react';
render(
options={list} // list->{key: value}
onChange={(key)=>console.log(key)} // key: list[key]
value={'1'} // 默认key
position='top' // 框的位置，top/bottom
placeholder='smanfkbhgjs' // placeholder
disable={true}/>, // 是否不可编辑
document.getElementById('Select')
);
`


>
> 需要按需加载的时候应该使用下面的调用方式
>
`
import {Dialog} from 'simple-component-react/lib/usualComponentWeb';
`

>
> 移动端部分组件-但是需要支持rem
>
!ConfirmDialogTouch
!ConfirmDialogTouchNoTitle
`
import {SystemComponentTouch} from 'simple-component-react/lib/usualComponentTouch';
SystemComponentTouch.open('Toast', {text: 'dsfa'})
SystemComponentTouch.open('ConfirmDialogTouch', {
title: '失败提示', // 可以不设置title
content: '失败了哦，请检查一下数据～',
btnTextCancel: '取消',
btnTextSure: '我知道了',
handleSure: ()=>{alert("dsfd")},
});
``

$3

- [X] 收敛window全局变量，去掉全局变量污染
- [X] autoPrefix add
- [X] 将组件渲染到最外层的body子元素下
- [X] 支持alert组件和confirm组件
- [X] 支持组件动画
- [X] 增加错误提示
- [X] 支持直接调用组件，如v2
- [X] 实现按需加载
- [X] 增加移动端组件
- [X] 增加types

Show more