父组件
import React,{useState,useEffect} from 'react'
import './Home.scss'
import { Input } from 'antd-mobile'
import {MailOutlined,CheckCircleOutlined ,PlusOutlined,
DownloadOutlined,DeleteOutlined,BorderlessTableOutlined } from '@ant-design/icons';
import { Menu} from 'antd';
import { Outlet, useNavigate} from 'react-router-dom'
export default function Home(props) {
const navigate=useNavigate()
const [value, setValue] = useState('')
function getItem(label, key, icon, children) {
return {
key,
icon,
children,
label,
};
}
const items = [
getItem('我的图', '/chart', <MailOutlined />),
getItem('我的任务', '/list', <CheckCircleOutlined />),
getItem('已归档', '3', <DownloadOutlined />),
getItem('回收站', '4', <DeleteOutlined />),
];
const items2 = [
getItem('我指派给他人的项目', '1', <BorderlessTableOutlined />),
getItem('我创建的任务', '2', <BorderlessTableOutlined />),
getItem('我参与的任务', '3', <BorderlessTableOutlined />),
getItem('添加捷径', 'add', <PlusOutlined />),
];
return (
<div className='container'>
<div className="left">
<div className="title">
<h2>项目</h2>
</div>
<div className='input'>
<Input
placeholder='搜索项目或任务'
value={value}
onChange={val => {
setValue(val)
}}
style={{background:'#eee',height:'45px',borderRadius:'8px'}}
/>
</div>
<div className="tab1">
<Menu
style={{
width: 256,
border:'0'
}}
defaultSelectedKeys={['/chart']}
// defaultOpenKeys={['sub1']}
// mode={mode}
theme='light'
items={items}
onSelect={(key)=>navigate(key.key)}
/>
</div>
<div className="tab2">
<div className='title'>
<h3>捷径</h3>
<h3>+</h3>
</div>
<Menu
style={{
width: 256,
border:'0'
}}
defaultSelectedKeys={['add']}
// defaultOpenKeys={['sub1']}
// mode={mode}
theme='light'
items={items2}
/>
</div>
</div>
<div id="right">
<Outlet></Outlet>
</div>
</div>
)
}
.container{
width: 100%;
height: 100%;
display: flex;
.left{
width: 20%;
border-right: 1px solid #eee;
padding: 20px 25px;
box-sizing: border-box;
.input{
margin-top: 30px;
}
.tab1{
margin-top: 20px;
}
.tab2{
margin-top: 20px;
.title{
padding: 10px 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
}
}
#right{
flex:1;
}
}
子组件-echarts
import React,{useState,useEffect} from 'react'
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/pie';
export default function Echarts() {
let [main, setMain] = useState('')
const option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
useEffect(() => {
var node = document.getElementById('main')
setMain(node)
}, [main])
if (main !== "") {
var myChart = echarts.init(main);
myChart.setOption(option);
}
return (
<div style={{ height: "500px", width: "600px" }} id='main'></div>
)
}
子组件---2
import React,{useState} from 'react'
import './List.scss'
import { Input } from 'antd-mobile'
export default function List() {
const [value, setValue] = useState('')
const [flag,setFlag]=useState(false)
const [list,setlist]=useState([])
const [flag2,setFlag2]=useState(false)
function sub(){
let obj={
id:list.length+1,
checked:false,
title:value
}
let arr=[...list]
arr.push(obj)
setlist(arr)
setValue('')
}
function changeState(id){
let idx=list.findIndex(item=>item.id==id)
if(idx>-1){
let arr=[...list]
arr[idx].checked=!arr[idx].checked
setlist(arr)
}
}
function del(id){
let idx=list.findIndex(item=>item.id==id)
if(idx>-1){
let arr=[...list]
arr.splice(idx,1)
setlist(arr)
}
}
function changeContent(e,id){
console.log(111);
console.log(e,'eeeeeeee');
let idx=list.findIndex(item=>item.id==id)
if(idx>-1){
let arr=[...list]
arr[idx].title=e.target.value
setlist(arr)
console.log(arr,'arr');
}
}
function int(ev){
if(ev.keyCode==13){
setFlag2(false)
}
}
return (
<div className='list'>
<div className="top">
<h3>我的任务</h3>
<div></div>
</div>
<div className='input'>
<input type="text" placeholder='你想做点什么?'
value={value}
onClick={()=> setFlag(!flag)}
onChange={(e)=>setValue(e.target.value)}
/>
</div>
{
flag?<div className="btn"><button className={value==''?'obtn':'nbtn'} onClick={sub}>新建</button></div>:<></>
}
<div className="list">
<div className="item1">
{
list.filter(i=>i.checked==false).map(item=><div className="item11" key={item.id}>
<input type="checkbox" checked={item.checked} onChange={()=>{changeState(item.id)}}/>
<div>
{/* div和input切换 */}
{
flag2==false?(
<div onClick={()=>setFlag2(!flag2)}>{item.title}</div>
):(
<div>
<input type="text" value={item.title}
onChange={(ev)=>{changeContent(ev,item.id)}}
onKeyDown={(ev)=>{int(ev)}}
/>
</div>
)
}
</div>
<button onClick={()=>{del(item.id)}}>删除</button>
</div>)
}
</div>
<div className="item1">
{
list.filter(i=>i.checked).length>0?
<div>
<div>已完成</div>
{
list.filter(i=>i.checked).map(item=><div className="item11" key={item.id}>
<input type="checkbox" checked={item.checked} onChange={()=>{changeState(item.id)}}/>
<div>{item.title}</div>
</div>)
}
</div>:<></>
}
</div>
</div>
</div>
)
}
.list{
width:'100%';
height:'100%';
.top{
height: 50px;
line-height: 50px;
display: flex;
h3{
margin-left: 200px;
}
}
.input{
padding: 10px 200px;
box-sizing: border-box;
height: 60px;
input{
width: 99.5%;
height: 100%;
border-radius:5px ;
}
}
.btn{
height: 70px;
line-height: 70px;
.obtn{
margin-left: 475px;
height: 25px;
width: 120px;
border: 0;
background: #929292;
color: #fff;
}
.nbtn{
margin-left: 475px;
height: 25px;
width: 120px;
border: 0;
background: #3287db;
color: #fff;
}
}
.list{
padding: 10px 200px;
box-sizing: border-box;
.item1{
.item11{
display: flex;
height: 50px;
div{
width: 540px;
height: 100%;
line-height: 50px;
}
button{
color: #3287db;
border: 0;
background-color: #fff;
}
}
}
}
}