console 命令行工具 X clear

console

<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<script src="https://unpkg.com/vue@next">
	</script>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-plus">
	</script>
	<title>Element Plus demo</title>
</head>

<body>
	<div id="app">
		<div class="common-layout">

			<el-container>
				<el-container>
					<el-header>todolist</el-header>
					<el-main>

						<search />

						<middle v-for="item in searchObj" :id="item.id" :title="item.title">
							<middle/>

					</el-main>

					<el-footer>

						<foot></foot>
					</el-footer>

				</el-container>
			</el-container>


		</div>
		<script>
		const App = {
        data() {
          return {
            searchObj:[
                {id:'001',title:'抽烟',done:true},
                {id:'002',title:'喝酒',done:false},
                {id:'003',title:'开车',done:true}
           ]
          };
        },
        methods:{
            getSearchObj(obj){
               console.log(obj)
                //this.searchObj.shift(obj)
            }
        }
      };
      const app = Vue.createApp(App);
      app.component('search', {
        emits:['searchObj'],
        data() {
            return {
            title: ""
            }
        },
        methods:{
            search(){
                console.log(111)
                if(this.title.trim()==''){return alert('输入不能为空')}
                searchObj={id:new data.getTime(),title:this.tile,done:false}
                this.$emit("searchObj", searchObj);
            }
        },
        template:`
            <el-row>
            <el-input v-model='title' @keyup.enter.native='search' placeholder='输入任务名称，回车添加' />\
        </el-row>
        `
      });

      app.component('middle', {
          template:'<el-row>\
                        <el-checkbox v-model="checked1" :label="title"></el-checkbox>\
                        <el-button >删除</el-button>\
                    </el-row>',
          props:['id','title','done'] 
      })
      app.component('foot', {
          template:'<el-row>\
                        <el-checkbox v-model="checked1" label="全选"></el-checkbox>\
                        <el-button >清除已完成任务</el-button>\
                    </el-row>'
      })

      app.use(ElementPlus);
      app.mount("#app");
		</script>
</body>

</html>

.el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #e9eef3;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }