组合式API实战-任务列表(element UI + Mitt事务总线)

提示：运用到 element ui组件库 mitt事务总线

---

提示：交作业的话就改改吧！！！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、mitt的引用

点击mitt的使用查看

二、element UI的引用

点击如何引用element UI查看
这里我们使用cdn的方式CDN

三、编写

1.编写计划导入组件

	 <template id="root">
        <!-- 父组件中的计划输入框 -->
        <div class="myDiv">
            <input type="text" placeholder="Pleace add your plans" v-model="input">
            <el-button @click="addPlan()" type="primary">Addition</el-button>
        </div>
    </template>
<script>
	 const {
            ref,
            onMounted,
        } = Vue
        // 根组件
        const app = Vue.createApp({
            template: "#root",
            setup() {
                const input = ref('') //计划
                    //添加计划
                const addPlan = () => {
                    if (input.value != '') {
                        // 发送计划
                        emitter.emit('addList', input.value)
                    } else {
                        alert('计划不能为空')
                    }
                    input.value = '' //清空
                }
                return {
                    input,
                    addPlan
                }
            }
        })
</script>

2.编写计划列表组件

 <!-- table组件 -->
    <template id="table">
        <table>
            <!-- 头部操作 -->
            <tr>
                <td colspan="1" style="text-align: left;">
                    <!-- 删除所有计划 -->
                    <el-button @click="deleteAll()" :disabled="list.length === 0">DeleteAllPlans</el-button>
                </td>
                <td colspan="4">
                    <!-- 友情提示 最多添加计划-->
                    <el-alert style="width: 100%;" v-show="list.length == 10" title="最多添加10个计划" type="error" />
                </td>
            </tr>
            <!-- 表头  序号、计划、状态、操作、删除 -->
            <tr style="font-weight: 550;">
                <td style="width: 10%;">serial number</td>
                <td style="width: 50%;">plan</td>
                <td style="width: 10%;">state</td>
                <td style="width: 15%;">operation</td>
                <td style="width: 15%;">remove</td>
            </tr>
            <!-- 循环操作 -->
            <tr v-for="(item,index) in list" :key="index">
                <td>{{ index+ 1 }}</td>
                <td>{{ item.name }}</td>
                <td
                >{{ item.status === false ? 'unfinish' : 'finish' }}</td>
                <td>
                    <el-button type="primary" size="small" plain @click="finish(index)" :disabled="item.status">Click Finish</el-button>
                </td>
                <td>
                    <el-button type="danger" size="small" plain @click="detele()">Click Delete</el-button>
                </td>
            </tr>
            <!-- 列表为空时的提示信息 -->
            <tr v-show="list.length == 0">
                <td colspan="5"> Have no plan </td>
            </tr>
        </table>
    </template>
    <script>
		 // 子组件
        app.component('my-table', {
            template: '#table',
            setup() {
                const value = ref(false)
                const list = ref([]) //计划列表
                    //完成计划操作
                const finish = (index) => {
                    list.value[index].status = true
                    let finishArray = [] //完成的计划
                    let unfinishArray = [] //未完成的计划
                        //遍历将 完成 和 未完成 的计划分离
                    list.value.forEach(el => {
                        console.log(el, 'el')
                        if (el.status == true) {
                            finishArray.push(el)
                        } else {
                            unfinishArray.push(el)
                        }
                    });
                    // 汇总
                    list.value = [...finishArray, ...unfinishArray]
                }

                //删除操作
                const detele = (index) => {
                        // 根据下标删除计划
                        list.value.splice(index, 1)
                    }
                    //清空计划
                const deleteAll = () => {
                        list.value = []
                    }
                    // 拿到计划
                onMounted(() => {
                    emitter.on('addList', res => {
                        let arrItem = {}
                        arrItem.name = res
                        arrItem.status = false
                        if (list.value.length < 10) {
                            list.value.push(arrItem)
                        }
                    })
                })

                return {
                    list,
                    value,
                    finish,
                    detele,
                    deleteAll
                }
            }
        })
		</script>

3.结合（全部代码）

<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 -->
    <!-- 引用 element ui组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入mitt -->
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <title>Element Plus demo</title>
    <style>
        .myDiv {
            /* display: flex; */
            width: 600px;
            position: relative;
            margin-left: 50%;
            left: -300px;
            display: flex;
            justify-content: space-around;
            top: 30px
        }
        
        .mydiv>input {
            padding-left: 20px;
            width: 500px;
            height: 32px;
            border: #E6E8EB 1px solid;
            border-radius: 4px;
        }
        
        input:focus {
            border: 1px #59a4ff solid;
            outline: none;
        }
        
        .table {
            margin-top: 40px;
            width: 100%;
        }
        
        table {
            width: 1200px;
            border: #F5F7FA 1px solid;
            position: relative;
            margin-left: 50%;
            left: -600px;
        }
        
        tr:nth-child(even) {
            background-color: #F5F7FA;
        }
        
        tr {
            text-align: center;
            height: 35px;
            font-size: small;
            color: #303133;
            /* margin-top: 10px; */
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <template id="root">
        <!-- 父组件中的计划输入框 -->
        <div class="myDiv">
            <input type="text" placeholder="Pleace add your plans" v-model="input">
            <el-button @click="addPlan()" type="primary">Addition</el-button>
        </div>
        <!-- 引入子组件列表 -->
        <div class="table">
            <my-table></my-table>
        </div>
    </template>


    <!-- table组件 -->
    <template id="table">
        <table>
            <!-- 头部操作 -->
            <tr>
                <td colspan="1" style="text-align: left;">
                    <!-- 删除所有计划 -->
                    <el-button @click="deleteAll()" :disabled="list.length === 0">DeleteAllPlans</el-button>
                </td>
                <td colspan="4">
                    <!-- 友情提示 最多添加计划-->
                    <el-alert style="width: 100%;" v-show="list.length == 10" title="最多添加10个计划" type="error" />
                </td>
            </tr>
            <!-- 表头  序号、计划、状态、操作、删除 -->
            <tr style="font-weight: 550;">
                <td style="width: 10%;">serial number</td>
                <td style="width: 50%;">plan</td>
                <td style="width: 10%;">state</td>
                <td style="width: 15%;">operation</td>
                <td style="width: 15%;">remove</td>
            </tr>
            <!-- 循环操作 -->
            <tr v-for="(item,index) in list" :key="index">
                <td>{{ index+ 1 }}</td>
                <td>{{ item.name }}</td>
                <td
                >{{ item.status === false ? 'unfinish' : 'finish' }}</td>
                <td>
                    <el-button type="primary" size="small" plain @click="finish(index)" :disabled="item.status">Click Finish</el-button>
                </td>
                <td>
                    <el-button type="danger" size="small" plain @click="detele()">Click Delete</el-button>
                </td>
            </tr>
            <!-- 列表为空时的提示信息 -->
            <tr v-show="list.length == 0">
                <td colspan="5"> Have no plan </td>
            </tr>
        </table>
    </template>

    <script>
        // 引入 mitt总线 
        const emitter = window.mitt()
        const {
            ref,
            onMounted,
        } = Vue
        // 根组件
        const app = Vue.createApp({
            template: "#root",
            setup() {
                const input = ref('') //计划
                    //添加计划
                const addPlan = () => {
                    if (input.value != '') {
                        // 发送计划
                        emitter.emit('addList', input.value)
                    } else {
                        alert('计划不能为空')
                    }
                    input.value = '' //清空
                }
                return {
                    input,
                    addPlan
                }
            }
        })

        // 子组件
        app.component('my-table', {
            template: '#table',
            setup() {
                const value = ref(false)
                const list = ref([]) //计划列表
                    //完成计划操作
                const finish = (index) => {
                    list.value[index].status = true
                    let finishArray = [] //完成的计划
                    let unfinishArray = [] //未完成的计划
                        //遍历将 完成 和 未完成 的计划分离
                    list.value.forEach(el => {
                        console.log(el, 'el')
                        if (el.status == true) {
                            finishArray.push(el)
                        } else {
                            unfinishArray.push(el)
                        }
                    });
                    // 汇总
                    list.value = [...finishArray, ...unfinishArray]
                }

                //删除操作
                const detele = (index) => {
                        // 根据下标删除计划
                        list.value.splice(index, 1)
                    }
                    //清空计划
                const deleteAll = () => {
                        list.value = []
                    }
                    // 拿到计划
                onMounted(() => {
                    emitter.on('addList', res => {
                        let arrItem = {}
                        arrItem.name = res
                        arrItem.status = false
                        if (list.value.length < 10) {
                            list.value.push(arrItem)
                        }
                    })
                })

                return {
                    list,
                    value,
                    finish,
                    detele,
                    deleteAll
                }
            }
        })

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

</html>

四、效果图

---

总结

熟悉组合式API的写法，熟悉 css、es6新特性、掌握mitt基本用法…