106 lines
2.1 KiB
Vue
106 lines
2.1 KiB
Vue
<template>
|
|
<div id="demo">
|
|
<div>
|
|
<div span="9">
|
|
<div class="demo-input">
|
|
<input
|
|
v-model="value"
|
|
maxlength="10"
|
|
show-word-limit
|
|
clearable
|
|
placeholder="请输入添加项..."
|
|
style="width: 200px"
|
|
/>
|
|
<button class="add-btn" type="success" @click="handleAdd">
|
|
添加
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div span="15"><span></span></div>
|
|
</div>
|
|
<div class="demo-input remove-btn">
|
|
<h3>数据展示区:</h3>
|
|
<transition-group name="myfade" tag="ul">
|
|
<li v-for="item in dataList" :key="item.id">
|
|
{{ item.label }} {{ item.id }}
|
|
<button type="text" @click="handleRemove(item)">remove</button>
|
|
</li>
|
|
</transition-group>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "demoPage",
|
|
data() {
|
|
return {
|
|
value: "",
|
|
dataList: []
|
|
}
|
|
},
|
|
methods: {
|
|
//添加子项
|
|
handleAdd() {
|
|
this.dataList.push({
|
|
id: new Date().getTime(),
|
|
label: this.value
|
|
})
|
|
this.value = ""
|
|
console.log(this.dataList)
|
|
},
|
|
//删除子项
|
|
handleRemove(row) {
|
|
console.log(row.id)
|
|
this.dataList = this.dataList.filter((item) => item.id != row.id)
|
|
console.log("删除操作", this.dataList)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#demo {
|
|
background: #fff;
|
|
}
|
|
.demo-input {
|
|
padding: 20px 10px;
|
|
}
|
|
.add-btn {
|
|
margin-left: 10px;
|
|
}
|
|
.remove-btn li {
|
|
width: 270px;
|
|
height: 30px;
|
|
display: flex;
|
|
line-height: 30px;
|
|
margin-bottom: 5px;
|
|
padding: 0 10px;
|
|
justify-content: space-between;
|
|
}
|
|
.remove-btn li:hover {
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
.remove-btn >>> .ivu-btn-text {
|
|
color: #57a3f3;
|
|
}
|
|
.remove-btn >>> .ivu-btn-text:hover {
|
|
color: red;
|
|
background: transparent;
|
|
}
|
|
.remove-btn >>> .ivu-btn-text:focus {
|
|
box-shadow: none;
|
|
}
|
|
/* 效果过程 */
|
|
.myfade-enter-active,
|
|
.myfade-leave-active {
|
|
transition: all 0.8s linear;
|
|
}
|
|
/* 进场的瞬间与离场的效果添加 */
|
|
.myfade-enter-from,
|
|
.myfade-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(200px);
|
|
}
|
|
</style>
|