react错误提示插件。
信息提示插件
项目通用js引用说明react项目的通用引用包cdn路径为 //miz-cdn.b0.upaiyun.com/miz-js-lib/miz-react.min.js 封装了 react-0.14.7.js ract-dom.0.14.7.js react-router-2.0.1.min.js 压缩版本,源码可以自己去下载来看
辅助js //miz-cdn.b0.upaiyun.com/miz-js-lib/miz-js-base.min.js 包含了 zepto.min.js fastclick.js lodash.js q.js TapEffect.js 由于lodash可以根据方法分模块加载,在以后的版本中决定把lodash移除,需要使用自行在项目中require即可。
动画js使用的是green-sock //miz-cdn.b0.upaiyun.com/miz-js-lib/green-sock.min.js 包含了tweenlit drag组件。至于green-sock的api请参考 green-sock官网
依赖说明本例依赖 react-kit 需要 cnpm isntall react-kit 需要把 react-kit 放到自己项目的package.json的依赖里面
Demorun:
npm start
有些时候国内npm源访问比较慢,那么推荐使用cnpm。建议使用nvm管理自己的node版本,建议使用较高版本的nodejs。
npm install cnpm -g
cnpm install -l
gulp watch
Usage
引入Toast
在render方法里,ref属性必须指定
this.refs.test.show()调出Toast,Toast默认3秒自动消失,也可以通过设置参数控制消失时间。
var Toast = require('../src/Toast');
var btnStyle = {
margin: '1em auto',
padding: '1em 2em',
outline: 'none',
fontSize: 16,
fontWeight: '600',
background: '#C94E50',
color: '#FFFFFF',
border: 'none'
};
var containerStyle = {
padding: '2em',
textAlign: 'center'
};
var APP = React.createClass({
getInitialState:function(){
return {
message:'init'
}
},
showToast:function(){
this.setState({
message:'hahaha'
})
this.refs.J_toast.show();
},
render: function() {
var t = this;
return (
<div>
<div>
<button style={btnStyle} onClick={this.showToast}>Open</button>
<Toast ref='J_toast' className="toast" message={this.state.message}/>
</div>
</div>
);
}
});
ReactDOM.render(<APP/>, document.getElementById('AppContainer'));
API
duration:提示框持续时间,默认3000,即3秒
message:提示框中的提示信息
CHANGELOGpub/1.2.0:
删除回调函数pub/2.0.0:
es5 => es6pub/2.0.3:
修复绝对居中的bugpub/2.0.4:
增加react-kit引用。版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。