<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格中的过渡与动画</title>
<style type="text/css">
#app{
width: 600px;
margin: 10px auto;
}
.tb{
border-collapse: collapse;
width: 100%;
}
.tb th{
background-color: #ff8c00;
width: 100%;
}
.tb td,
.tb th{
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add{
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
.del li{
list-style: none;
padding: 10px;
}
.del{
position: absolute;
top: 35%;
left: 40%;
width: 300px;
border: 1px solid rgba(0,0,0,0.2);
transition: all 0.5s;
background-color: lightgray;
}
</style>
</head>
<body>
<div id="app">
<div class="add">
编号:<input type="text" id="id1" v-color v-focus v-model="idx">
品牌名称:<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有数据</td>
</tr>
<tr v-for="(item,key,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date | dateFrm("/")}}</td>
<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave">
<div class="del" v-show="isshow">
<ul>
<li>你确定要删除数据吗?</li>
<li>
<button @click="delById">确定</button>
<button @click="showClose">关闭</button>
</li>
</ul>
</div>
</transition>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.filter("dateFrm",function (time, spliceStr) {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
return year + spliceStr + month + spliceStr + day;
});
Vue.directive("focus",{
inserted:function (el) {
el.focus();
}
});
Vue.directive("color",{
inserted:function (el) {
el.style.color = "red";
}
});
let vm = new Vue({
el:'#app',
data:{
delId:"",
isshow:false,
idx:0,
name:'',
list:[
{
id:1,
name:'学习课堂',
date:Date(),
},
{
id:2,
name:'其他课堂',
date:Date(),
},
]
},
methods:{
add:function () {
this.list.push({"id":this.idx,"name":this.name,"date":Date()});
},
del:function (id) {
this.isshow = true;
this.delId = id;
},
beforeEnter:function (el) {
el.style.offsetTop = "80%";
},
enter:function (el, done) {
el.offsetHeight;
el.style.offsetTop = "35%";
},
afterEnter:function (el) {
},
beforeLeave:function (el) {
el.style.offsetTop = "35%";
},
leave:function (el,done) {
el.offsetHeight;
el.style.offsetTop = "80%";
setTimeout(function () {
done();
},500);
},
afterLeave:function (el) {
this.isshow = false;
},
delById:function () {
_this = this;
let index = this.list.findIndex(function (item1) {
return item1.id === _this.delId;
});
this.list.splice(index,1);
this.isshow = false;
},
showClose:function () {
//
this.isshow = false;
}
}
})
</script>
</body>
</html>