1、效果
2、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<!--<h2>{{title}}</h2>-->
<li v-for="(item,index) in productList">
<div >产品名称：{{item.productName}}</div>
<a href="javascript:;" class="item-edit-btn" @click="delConfirm(item);">删除</a>
</li>
<!--删除弹框"-->
<!--:class="{'md-show',delFlag}"这里注意，绑定class时，class和bool值中间是冒号，不是逗号-->
<div class="md-modal modal-msg md-modal-transition" :class="{'md-show':delFlag}">
<div class="md-modal-inner">
<div class="md-top">
<button class="md-close" @click="delFlag=false">关闭</button>
</div>
<div class="md-content">
<div class="confirm-tips">
<p id="cusLanInfo">你确认删除此订单信息吗?</p>
</div>
<div class="btn-wrap col-2">
<button class="btn btn--m" id="btnModalConfirm" @click="delProduct();">Yes</button>
<button class="btn btn--m btn--red" id="btnModalCancel" @click="delFlag=false">No</button>
</div>
</div>
</div>
</div>
<div class="md-overlay" v-if="delFlag"></div>
</div>
<script src="js/lib/vue.min.js"></script>
<script src="js/lib/vue-resource.min.js"></script>
<script src="js/cart.js"></script>
</body>
</html>
3、index.css
img {
width: 50px;
}
a {
font-size: 30px;
color: #000;
text-decoration: none;
}
.check{
background: #EE7A23;
border-color: #EE7A23;
}
.item-check-btn {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 50%;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.md-modal-transition .md-modal-inner {
background: #fff;
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 535px;
height: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
visibility: hidden;
z-index:;
}
.md-show {
visibility: visible;
}
.md-modal-transition .md-modal-inner {
background: #fff;
-webkit-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity:;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.md-modal .md-modal-inner {
padding: 60px 50px;
}
.md-modal-transition.md-show .md-modal-inner {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity:;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.md-overlay {
position: fixed;
top:;
left:;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index:;
}
4、cart.js
/**
* Created by kk on 2017/4/16.
*/
new Vue({
el:"#app",
data:{
// title:"hello vue"
totalMoney:0,
productList:[],
checkAllFlag:false,
totalCheckMoney:0,
delFlag:false,
curProduct:''
},
filters:{
formatMoney:function (value) {
return "￥"+value.toFixed(2)
}
},
mounted:function () {
//类似于jquery中的ready方法
this.$nextTick(function () {
this.cartView();
})
},
methods:{
delConfirm:function (item) {
this.delFlag=true;
this.curProduct=item;
},
delProduct:function () {
var index=this.productList.indexOf(this.curProduct);
this.productList.splice(index,1);
this.delFlag=false;
}
}
});
Vue.filter("money",function (value,type) {
return "￥"+value.toFixed(2)+type;
});