html+js
<body>
<div id="app">
<input type="text" class="ipt1" v-model="title1" placeholder="标题">
<input type="text" class="ipt1" v-model="name1" placeholder="发布人">
<input type="date" style="outline: none;height:20px ;" v-model="time1">
<button class="xinzeng" @click="addobj()">新增</button>
<table border="1" cellspacing="0" class="table">
<tr class="tr1">
<th>序号</th>
<th>标题</th>
<th>发布人</th>
<th>发布时间</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list" :key="index" class="tr2">
<td>{{index+1}}</td>
<td>{{item.title}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<button @click="editRow=index;remove(item)" class="del">删除</button>
<button class="edit"
@click=" visible=true;editRow=index;temp=item.title;temp2=item.name;temp3=item.time">编辑</button>
</td>
</tr>
</table>
<model :visible.sync="visible">
<p class="text">标题:<input type="text" v-model="temp" class="ipt1"> </p>
<p class="text">发布人:<input type="text" v-model="temp2" class="ipt1"></p>
<p class="text">发布时间:<input type="date" v-model="temp3" class="ipt1"></p>
<button @click="sureEdit()" class="yes">保存</button>
<button @click="visible=false" class="no">取消</button>
</model>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./tankuang.js"></script>
<script>
new Vue({
el: "#app",
components: { model },
data() {
return {
temp: "",
temp2: "",
temp3: "",
editRow: null,
visible: false,
title1: "",
name1: "",
time1: "",
list: [{
title: "在移动设备开发",
name: "张若筠",
time: "2018-02-09",
}, {
title: "图像及特效",
name: "章子怡",
time: "2018-02-09",
},
{
title: "设备兼容特性",
name: "蔡徐坤",
time: "2018-02-09",
},
{
title: "w3c致力于开发用于通信",
name: "张碧晨",
time: "2018-02-09",
},
{
title: "全新的表单",
name: "张晓辉",
time: "2018-02-09",
},]
}
},
methods: {
remove(item) {
var index = this.list.indexOf(item);
var ind = confirm("确定要删除吗")
if (ind) {
this.list.splice(index, 1)
};
},
sureEdit() {
//让编辑行的title修改为temp(temp和编辑框双向绑定)
this.list[this.editRow].title = this.temp;
this.list[this.editRow].name = this.temp2;
this.list[this.editRow].time = this.temp3;
this.visible = false;
},
addobj() {
if (this.title1 == "" || this.name1 == "" || this.time1 == "") {
alert("输入不能为空")
} else {
this.list.push({ title: this.title1, name: this.name1, time: this.time1 })
}
this.title1 = ""; this.name1 = ""; this.time1 = "";
}
},
})
</script>
tan.css
* {
padding: 0;
margin: 0;
}
#app {
width: 1000px;
margin: 0 auto;
}
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .3);
}
.modal-content {
width: 400px;
height: 400px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title {
line-height: 40px;
background-color: #fafafa;
text-align: center;
position: relative;
}
.modal .close {
width: 44px;
height: 44px;
background-color: transparent;
border: none;
position: absolute;
right: 0;
cursor: pointer;
}
.modal-body {
margin-left: 50px;
padding: 20px;
}
.text {
padding: 10px 20px;
}
.text:nth-of-type(2) {
text-indent: -1em;
}
.text:nth-of-type(3) {
text-indent: -2em;
}
.xinzeng {
color: #fff;
background-color: #008cd4;
border: none;
cursor: pointer;
width: 50px;
height: 25px;
border-radius: 5px;
}
.table {
text-align: center;
margin-top: 20px;
width: 1000px;
border-collapse: collapse;
}
.ipt1 {
outline: none;
height: 25px;
width: 250px;
border: 1px solid #ccc;
background-color: #fafebc;
}
.tr1 {
border: none;
height: 35px;
background-color: #f3f5f5;
}
.tr2 {
border: 1px solid #ccc;
height: 35px;
}
.del {
border: none;
color: #f00;
margin-right: 20px;
cursor: pointer;
background-color: transparent;
}
.edit {
border: none;
color: #0088d4;
cursor: pointer;
background-color: transparent;
}
.yes {
width: 50px;
height: 25px;
margin-left: 50px;
margin-top: 50px;
border: none;
background-color: greenyellow;
cursor: pointer;
}
.no {
width: 50px;
height: 25px;
margin-left: 25px;
margin-top: 50px;
border: none;
background-color: #ffeebc;
cursor: pointer;
}
轮播组件swiper.js
// 01 定义子组件
var model = {
template: `
<div class="modal" v-if="visible">
<div class="modal-content">
<h2 class="title">编辑<button class="close" @click="$emit('update:visible',false)">x</button></h2>
<div class="modal-body">
<slot></slot>
</div>
</div>
</div>`,
props: {
visible: {
type: Boolean,
default: false,
}
}
}