提示:运用到 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基本用法…