1、效果

2、index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.  
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0">
  8.     <title>Title</title>
  9.     <link rel="stylesheet" href="css/index.css">
  10. </head>
  11. <body>
  12. <div id="app">
  13. <!--<h2>{{title}}</h2>-->
  14.     <li v-for="(item,index) in productList">
  15.         <div >产品名称：{{item.productName}}</div>
  16.         <a href="javascript:;" class="item-edit-btn" @click="delConfirm(item);">删除</a>
  17.     </li>
  18.  
  19.     <!--删除弹框"-->
  20.     <!--:class="{'md-show',delFlag}"这里注意，绑定class时，class和bool值中间是冒号，不是逗号-->
  21.     <div class="md-modal modal-msg md-modal-transition" :class="{'md-show':delFlag}">
  22.         <div class="md-modal-inner">
  23.             <div class="md-top">
  24.                 <button class="md-close" @click="delFlag=false">关闭</button>
  25.             </div>
  26.             <div class="md-content">
  27.                 <div class="confirm-tips">
  28.                     <p id="cusLanInfo">你确认删除此订单信息吗?</p>
  29.                 </div>
  30.                 <div class="btn-wrap col-2">
  31.                     <button class="btn btn--m" id="btnModalConfirm" @click="delProduct();">Yes</button>
  32.                     <button class="btn btn--m btn--red" id="btnModalCancel"  @click="delFlag=false">No</button>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.     </div>
  37.     <div class="md-overlay" v-if="delFlag"></div>
  38. </div>
  39.  
  40. <script src="js/lib/vue.min.js"></script>
  41. <script src="js/lib/vue-resource.min.js"></script>
  42. <script src="js/cart.js"></script>
  43. </body>
  44. </html>

3、index.css

  1. img {
  2.     width: 50px;
  3. }
  4. a {
  5.     font-size: 30px;
  6.     color: #000;
  7.     text-decoration: none;
  8. }
  9. .check{
  10.     background: #EE7A23;
  11.     border-color: #EE7A23;
  12.  
  13. }
  14. .item-check-btn {
  15.     display: inline-block;
  16.     width: 16px;
  17.     height: 16px;
  18.     border: 1px solid #ccc;
  19.     border-radius: 50%;
  20.     text-align: center;
  21.     vertical-align: middle;
  22.     cursor: pointer;
  23. }
  24. .md-modal-transition .md-modal-inner {
  25.     background: #fff;
  26.  
  27. }
  28.  
  29. .md-modal {
  30.     position: fixed;
  31.     top: 50%;
  32.     left: 50%;
  33.     width: 535px;
  34.     height: auto;
  35.     -webkit-transform: translate(-50%,-50%);
  36.     -ms-transform: translate(-50%,-50%);
  37.     transform: translate(-50%,-50%);
  38.     visibility: hidden;
  39.     z-index:;
  40. }
  41. .md-show {
  42.     visibility: visible;
  43. }
  44. .md-modal-transition .md-modal-inner {
  45.     background: #fff;
  46.     -webkit-transform: translateY(20%);
  47.     -ms-transform: translateY(20%);
  48.     transform: translateY(20%);
  49.     opacity:;
  50.     -webkit-transition: all .3s ease-out;
  51.     transition: all .3s ease-out;
  52. }
  53. .md-modal .md-modal-inner {
  54.     padding: 60px 50px;
  55. }
  56. .md-modal-transition.md-show .md-modal-inner {
  57.     -webkit-transform: translateY(0);
  58.     -ms-transform: translateY(0);
  59.     transform: translateY(0);
  60.     opacity:;
  61.     -webkit-transition: all .5s ease-out;
  62.     transition: all .5s ease-out;
  63. }
  64. .md-overlay {
  65.     position: fixed;
  66.     top:;
  67.     left:;
  68.     width: 100%;
  69.     height: 100%;
  70.     background: rgba(0,0,0,0.5);
  71.     z-index:;
  72. }

4、cart.js

  1. /**
  2.  * Created by kk on 2017/4/16.
  3.  */
  4. new Vue({
  5.     el:"#app",
  6.     data:{
  7.         // title:"hello vue"
  8.         totalMoney:0,
  9.         productList:[],
  10.         checkAllFlag:false,
  11.         totalCheckMoney:0,
  12.         delFlag:false,
  13.         curProduct:''
  14.     },
  15.     filters:{
  16. formatMoney:function (value) {
  17.     return "￥"+value.toFixed(2)
  18. }
  19.     },
  20.     mounted:function () {
  21.         //类似于jquery中的ready方法
  22.         this.$nextTick(function () {
  23.             this.cartView();
  24.         })
  25.  
  26.     },
  27.     methods:{
  28.  
  29.         delConfirm:function (item) {
  30.             this.delFlag=true;
  31.             this.curProduct=item;
  32.         },
  33.         delProduct:function () {
  34.             var index=this.productList.indexOf(this.curProduct);
  35.             this.productList.splice(index,1);
  36.             this.delFlag=false;
  37.  
  38.         }
  39.     }
  40.  
  41. });
  42. Vue.filter("money",function (value,type) {
  43.     return "￥"+value.toFixed(2)+type;
  44. });

vue弹框，删除元素的更多相关文章

  1. vue 弹框

    弹框展示: 代码: <template> <div> <el-col :span="9" style="text-align: right; ...

  2. vue 弹框产生的滚动穿透问题

    首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export ...

  3. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  4. vue中点击空白处隐藏弹框（用指令优雅地实现）

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  5. 实现在vue中element-ui的el-dialog弹框拖拽

    参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...

  6. Jquary入门（添加 修改 表单元素）+ JSON+弹框

    字符串拼接 计算机语言 都是 对  数据的处理(获取/修改数据)  添加元素  除了  固定的方法添加 以外 都是   字符串拼接(拼接成固定格式即可执行). 1.表单添加元素  append() 方 ...

  7. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  8. vue移动端弹框组件，vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  9. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

随机推荐

  1. python dictionay（字典 ）基本用法

    dict(dictionary)是一系列无序对象的集合,由键-值对构成,通过读取键来取得对应的值,具有可变,无序,异构,可嵌套的属性. dict初始化1.直接采用字典格式 2.利用dict(),[注] ...

  2. python爬虫之下载文件的方式总结以及程序实例

    python爬虫之下载文件的方式以及下载实例 目录 第一种方法:urlretrieve方法下载 第二种方法:request download 第三种方法:视频文件.大型文件下载 实战演示 第一种方法: ...

  3. muduo网络库架构总结

    目录 muduo网络库简介 muduo网络库模块组成 Recator反应器 EventLoop的两个组件 TimerQueue定时器 Eventfd Connector和Acceptor连接器和监听器 ...

  4. js数据结构之二叉树的详细实现方法

    数据结构中,二叉树的使用频率非常高,这得益于二叉树优秀的性能. 二叉树是非线性的数据结构,用以存储带有层级的数据,其用于查找的删除的性能非常高. 二叉树 数据结构的实现方法如下: function N ...

  5. iOS 11开发教程（二十一）iOS11应用视图美化按钮之实现按钮的响应(1)

    iOS 11开发教程(二十一)iOS11应用视图美化按钮之实现按钮的响应(1) 按钮主要是实现用户交互的,即实现响应.按钮实现响应的方式可以根据添加按钮的不同分为两种:一种是编辑界面添加按钮实现的响应 ...

  6. 从新安装SQLserver 过程中报错问题合集

    1.安装SQL SERVER2008 到安装支持文件就闪退? 分析:这个是由于安装目录没有删除干净导致的,我遗漏了一个文件夹:microsoft Management console文件夹没有删除的原 ...

  7. web开发 入门

    插件 ,索引文件,js目录,视图目录,资产目录,css目录,数据目录,font-awesome-4.7.0目录,图像目录. 引导程序 框架.字体.layer,mockjs.paging分页.树网格.t ...

  8. Android Firebase Android google-cloud-tools

    Firebase 让不懂服务端的开发者也可以快速写出实时性的Web端和移动端应用. firebase的功能包括推送通知,云存储,活动监视,远程部署 针对国内三方推送,只能在国内使用,到了国外就不支持了 ...

  9. 2016年3月3日android实习笔记

    1: android自定义控件时,通常需要重写父类构造函数.这三个够找函数具体啥时调用? public View (Context context) 是在java代码创建视图的时候被调用,如果是从xm ...

  10. 使用Date和SimpleDateFormat类表示时间

    Date类: 使用 Date 类的默认无参构造方法创建出的对象就代表当前时间,我们可以直接输出 Date 对象显示当前的时间,显示的结果如下: Date d = new Date(); System. ...