首页 > 代码库 > vue弹框，删除元素

vue弹框，删除元素

2024-09-16 05:20:21   217人阅读

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: 201;
}
.md-show {
    visibility: visible;
}
.md-modal-transition .md-modal-inner {
    background: #fff;
    -webkit-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
    opacity: 0;
    -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: 1;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.md-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 200;
}

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;
});

 

vue弹框，删除元素


联系
我们