组件库
npm install simple-component-react``bash`
npm install simple-component-react --save
> HoverAlert组件调用方式如下
`
import {HoverAlert} from 'simple-component-react';
render(
document.getElementById('hoverTipsOne')
);
render(
使用多行文本
不传icon属性,默认为"?"形式的icon
position为悬浮框的位置,支持top/bottom/left/right
children是悬浮框里的内容,支持html和string;tips属性只支持string。单行文本自动居中
document.getElementById('hoverTips')
);
render(
icon支持html和string格式
document.getElementById('hoverTipsIcon')
);
render(
document.getElementById('hoverTipsLeft')
);
`
> ClickTips组件调用方式如下
`
import {ClickTips} from 'simple-component-react';
render(
document.getElementById('hoverTipsOne')
);
`
> 只需要系统组件,不需要自定义的时候,可以直接调用如下方式
!popAlert
!confirm
``
import {SystemComponent} from 'simple-component-react';
// 如果没有dom或者不想要render到页面上,是一个组件内部调用的话。可以调用SystemComponent
// 会自动执行render(
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")},
});
- [X] 收敛window全局变量,去掉全局变量污染
- [X] autoPrefix add
- [X] 将组件渲染到最外层的body子元素下
- [X] 支持alert组件和confirm组件
- [X] 支持组件动画
- [X] 增加错误提示
- [X] 支持直接调用组件,如v2
- [X] 实现按需加载
- [X] 增加移动端组件
- [X] 增加types