chenxuan/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xxx

Browse Source
This commit is contained in:
unknown
2021-01-14 20:53:30 +08:00
parent a754ed2ec3
commit d3f75f0eb9
23 changed files with 0 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
高阶函数/轮播图/src/components/button/index.js
-14
View File
@@ -1,14 +0,0 @@
import React,{Component} from 'react';
import "./style.css";
export default class InputComponent extends Component{
render() {
return (
<React.Fragment>
<button type={this.props.type} className={"my-button "+this.props.className} style={this.props.style} onClick={this.props.onClick}>{this.props.children}</button>
</React.Fragment>
);
}
}
InputComponent.defaultProps={
type:"button"
};
高阶函数/轮播图/src/components/button/style.css
-1
View File
@@ -1 +0,0 @@
.my-button{width:auto;height:auto;background-color:#FF0000;font-size:14px;color:#FFFFFF;border:0 none;outline: none;border-radius: 3px;padding:5px 10px;cursor: pointer;}
高阶函数/轮播图/src/components/confirm/confirm.js
-40
View File
@@ -1,40 +0,0 @@
import React from 'react';
import "./style.css";
export default class Confirm extends React.Component{
constructor(){
super();
this.state={
msg:"",
btns:[]
}
this.div=null;
}
setData(msg,btns,div){
this.div=div;
this.setState({msg:msg,btns:btns});
}
clickBtn(index){
if(this.state.btns[index].onPress){
this.state.btns[index].onPress();
}
document.body.removeChild(this.div);
}
render(){
return(
<div className="my-confirm-mask">
<div className="confirm">
<div className="message">{this.state.msg}</div>
<div className="handle">
{
this.state.btns.length>0 && this.state.btns.map((item,index)=>{
return (
<div className="button" key={index} onClick={this.clickBtn.bind(this,index)}>{item.text}</div>
)
})
}
</div>
</div>
</div>
)
}
}
高阶函数/轮播图/src/components/confirm/index.js
-10
View File
@@ -1,10 +0,0 @@
import React from 'react';
import ReactDom from 'react-dom';
import Confirm from './confirm';
export default function(msg,btns){
let div=document.createElement("div");
document.body.appendChild(div);
let confirmInit=ReactDom.render(<Confirm/>,div);
confirmInit.setData(msg,btns,div)
}
高阶函数/轮播图/src/components/confirm/style.css
-5
View File
@@ -1,5 +0,0 @@
.my-confirm-mask{width:100%;height:100%;position:fixed;z-index:100;left:0px;top:0px;background-color: rgba(0,0,0,0.8) }
.my-confirm-mask .confirm{width:300px;height:150px;background-color:#FFFFFF;position: absolute;z-index:1;left:50%;top:50%;transform: translate(-50%,-50%);border-radius: 4px;}
.my-confirm-mask .message{width:auto;height:auto;text-align: center;font-size:16px;margin-top:40px;}
.my-confirm-mask .handle{width:100%;height:auto;display: flex;justify-content: space-between;padding:0px 30px;box-sizing: border-box;margin-top:40px;}
.my-confirm-mask .button{width:auto;height:auto;font-size:16px;cursor: pointer;}
高阶函数/轮播图/src/components/header/index.js
-28
View File
@@ -1,28 +0,0 @@
import React,{Component} from 'react';
//检查数据类型
import PropTypes from 'prop-types';
import "./style.module.css";
class HeaderComponent extends Component{
// changeTitle(){
// this.props.title="首页2";//props是只读不可以改变
// }
render() {
return (
<div id="header" className="app active" style={this.props.isShow?{display:'block'}:{display:'none'}}>
{this.props.title}
{/*<button type="button" onClick={this.changeTitle.bind(this)}>改变title</button>*/}
<button type="button" onClick={this.props.sendParent && this.props.sendParent.bind(this,'我是子组件的值')}>给父组件传值</button>&nbsp;&nbsp;<button type="button" onClick={this.props.onClick}>保存</button>
</div>
);
}
}
//检查属性值的类型
HeaderComponent.propTypes={
title:PropTypes.string.isRequired,//检查是否必填项
isShow:PropTypes.bool
};
//默认属性值
HeaderComponent.defaultProps={
title:"默认导航"
};
export default HeaderComponent;
高阶函数/轮播图/src/components/header/style.module.css
-2
View File
@@ -1,2 +0,0 @@
.app{width:100vw;height:40px;background-color:#FFFF00;}
.app.active{background-color:#00FFFF;}
高阶函数/轮播图/src/components/input/index.js
-10
View File
@@ -1,10 +0,0 @@
import React,{Component} from 'react';
export default class InputComponent extends Component{
render() {
return (
<React.Fragment>
<input type="text" onChange={this.props.onChange} />
</React.Fragment>
);
}
}
高阶函数/轮播图/src/components/toast/index.js
-21
View File
@@ -1,21 +0,0 @@
import React from "react";
import ReactDom from 'react-dom';
import Toast from './toast';
export default function(opts){
//创建div元素
let div=document.createElement("div"),duration=opts.duration || 2000;
document.body.appendChild(div);
//将Toast和div挂载到render
let toastInit=ReactDom.render(<Toast/>,div);
toastInit.setOpts(opts);
setTimeout(()=>{
div.querySelector(".my-toast").style.animation="hideToast 0.3s forwards";
setTimeout(()=>{
document.body.removeChild(div);
},3000)
if(opts.onClose){
opts.onClose();
}
},duration)
};
高阶函数/轮播图/src/components/toast/style.css
-9
View File
@@ -1,9 +0,0 @@
.my-toast{width:auto;height:auto;background-color:rgba(0,0,0,0.8);position: fixed;z-index:100;left:50%;top:50%;transform: translate(-50%,-50%);font-size:16px;color:#FFFFFF;padding:10px;border-radius: 4px;animation: showToast 0.3s forwards}
@keyframes showToast {
0%{opacity: 0}
100%{opacity: 1}
}
@keyframes hideToast {
0%{opacity: 1}
100%{opacity: 0}
}
高阶函数/轮播图/src/components/toast/toast.js
-18
View File
@@ -1,18 +0,0 @@
import React from 'react';
import "./style.css";
export default class Toast extends React.Component{
constructor(){
super();
this.state={
text:""
}
}
setOpts(opts){
this.setState({text:opts.txt});
}
render(){
return (
<div className="my-toast">{this.state.text}</div>
)
}
}
高阶函数/轮播图1/src/components/button/index.js
-14
View File
@@ -1,14 +0,0 @@
import React,{Component} from 'react';
import "./style.css";
export default class InputComponent extends Component{
render() {
return (
<React.Fragment>
<button type={this.props.type} className={"my-button "+this.props.className} style={this.props.style} onClick={this.props.onClick}>{this.props.children}</button>
</React.Fragment>
);
}
}
InputComponent.defaultProps={
type:"button"
};
高阶函数/轮播图1/src/components/button/style.css
-1
View File
@@ -1 +0,0 @@
.my-button{width:auto;height:auto;background-color:#FF0000;font-size:14px;color:#FFFFFF;border:0 none;outline: none;border-radius: 3px;padding:5px 10px;cursor: pointer;}
高阶函数/轮播图1/src/components/confirm/confirm.js
-40
View File
@@ -1,40 +0,0 @@
import React from 'react';
import "./style.css";
export default class Confirm extends React.Component{
constructor(){
super();
this.state={
msg:"",
btns:[]
}
this.div=null;
}
setData(msg,btns,div){
this.div=div;
this.setState({msg:msg,btns:btns});
}
clickBtn(index){
if(this.state.btns[index].onPress){
this.state.btns[index].onPress();
}
document.body.removeChild(this.div);
}
render(){
return(
<div className="my-confirm-mask">
<div className="confirm">
<div className="message">{this.state.msg}</div>
<div className="handle">
{
this.state.btns.length>0 && this.state.btns.map((item,index)=>{
return (
<div className="button" key={index} onClick={this.clickBtn.bind(this,index)}>{item.text}</div>
)
})
}
</div>
</div>
</div>
)
}
}
高阶函数/轮播图1/src/components/confirm/index.js
-10
View File
@@ -1,10 +0,0 @@
import React from 'react';
import ReactDom from 'react-dom';
import Confirm from './confirm';
export default function(msg,btns){
let div=document.createElement("div");
document.body.appendChild(div);
let confirmInit=ReactDom.render(<Confirm/>,div);
confirmInit.setData(msg,btns,div)
}
高阶函数/轮播图1/src/components/confirm/style.css
-5
View File
@@ -1,5 +0,0 @@
.my-confirm-mask{width:100%;height:100%;position:fixed;z-index:100;left:0px;top:0px;background-color: rgba(0,0,0,0.8) }
.my-confirm-mask .confirm{width:300px;height:150px;background-color:#FFFFFF;position: absolute;z-index:1;left:50%;top:50%;transform: translate(-50%,-50%);border-radius: 4px;}
.my-confirm-mask .message{width:auto;height:auto;text-align: center;font-size:16px;margin-top:40px;}
.my-confirm-mask .handle{width:100%;height:auto;display: flex;justify-content: space-between;padding:0px 30px;box-sizing: border-box;margin-top:40px;}
.my-confirm-mask .button{width:auto;height:auto;font-size:16px;cursor: pointer;}
高阶函数/轮播图1/src/components/header/index.js
-28
View File
@@ -1,28 +0,0 @@
import React,{Component} from 'react';
//检查数据类型
import PropTypes from 'prop-types';
import "./style.module.css";
class HeaderComponent extends Component{
// changeTitle(){
// this.props.title="首页2";//props是只读不可以改变
// }
render() {
return (
<div id="header" className="app active" style={this.props.isShow?{display:'block'}:{display:'none'}}>
{this.props.title}
{/*<button type="button" onClick={this.changeTitle.bind(this)}>改变title</button>*/}
<button type="button" onClick={this.props.sendParent && this.props.sendParent.bind(this,'我是子组件的值')}>给父组件传值</button>&nbsp;&nbsp;<button type="button" onClick={this.props.onClick}>保存</button>
</div>
);
}
}
//检查属性值的类型
HeaderComponent.propTypes={
title:PropTypes.string.isRequired,//检查是否必填项
isShow:PropTypes.bool
};
//默认属性值
HeaderComponent.defaultProps={
title:"默认导航"
};
export default HeaderComponent;
高阶函数/轮播图1/src/components/header/style.module.css
-2
View File
@@ -1,2 +0,0 @@
.app{width:100vw;height:40px;background-color:#FFFF00;}
.app.active{background-color:#00FFFF;}
高阶函数/轮播图1/src/components/input/index.js
-10
View File
@@ -1,10 +0,0 @@
import React,{Component} from 'react';
export default class InputComponent extends Component{
render() {
return (
<React.Fragment>
<input type="text" onChange={this.props.onChange} />
</React.Fragment>
);
}
}
高阶函数/轮播图1/src/components/swiper/index.js
-26
View File
@@ -1,32 +1,6 @@
import React from 'react';
import Hoc from './hoc';
import "./style.css";
// export default Hoc((props)=>{
// let aData=props.data;
// console.log(props)
// return(
// <div className="my-swiper-main" onMouseOver={props.stop.bind(this)} onMouseOut={props.autoPlay.bind(this)}>
// {
// (aData && aData.length>0) && aData.map((item,index)=>{
// return (
// <div className={item.active?"slide show":"slide"} key={index}>
// <a href={item.url} target="_blank" rel="noopener noreferrer"><img src={item.src} alt=""/></a>
// </div>
// )
// })
// }
// <div className="pagination">
// {
// (aData && aData.length>0) && aData.map((item,index)=>{
// return (
// <div className={item.active?"dot active":"dot"} key={index} onClick={props.changeImg.bind(this,index)}></div>
// )
// })
// }
// </div>
// </div>
// )
// })
class Usual extends React.Component {
render() {
高阶函数/轮播图1/src/components/toast/index.js
-21
View File
@@ -1,21 +0,0 @@
import React from "react";
import ReactDom from 'react-dom';
import Toast from './toast';
export default function(opts){
//创建div元素
let div=document.createElement("div"),duration=opts.duration || 2000;
document.body.appendChild(div);
//将Toast和div挂载到render
let toastInit=ReactDom.render(<Toast/>,div);
toastInit.setOpts(opts);
setTimeout(()=>{
div.querySelector(".my-toast").style.animation="hideToast 0.3s forwards";
setTimeout(()=>{
document.body.removeChild(div);
},3000)
if(opts.onClose){
opts.onClose();
}
},duration)
};
高阶函数/轮播图1/src/components/toast/style.css
-9
View File
@@ -1,9 +0,0 @@
.my-toast{width:auto;height:auto;background-color:rgba(0,0,0,0.8);position: fixed;z-index:100;left:50%;top:50%;transform: translate(-50%,-50%);font-size:16px;color:#FFFFFF;padding:10px;border-radius: 4px;animation: showToast 0.3s forwards}
@keyframes showToast {
0%{opacity: 0}
100%{opacity: 1}
}
@keyframes hideToast {
0%{opacity: 1}
100%{opacity: 0}
}
高阶函数/轮播图1/src/components/toast/toast.js
-18
View File
@@ -1,18 +0,0 @@
import React from 'react';
import "./style.css";
export default class Toast extends React.Component{
constructor(){
super();
this.state={
text:""
}
}
setOpts(opts){
this.setState({text:opts.txt});
}
render(){
return (
<div className="my-toast">{this.state.text}</div>
)
}
}