码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 简单实例 购物车3 - 删除商品

时间:2020-04-24 14:35:52      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:情况   group   商品   template   准备   点击   绑定   click   dex   

1、在 Modal.vue 里使用具名插槽,父子组件传值:

<div class="md-content">
        <div class="confirm-tips">
            <!-- <p slot="message">你确认要删除此条数据吗?</p> -->
            <slot name="message"></slot>
        </div>
        <div class="btn-wrap">
            <!-- <a slot="btnGroup" class="btn btn--m" href="javascript:;">确认</a>
            <a slot="btnGroup" class="btn btn--m btn--red" href="javascript:;">关闭</a> -->
            <slot name="btnGroup"></slot>
        </div>
</div>

2、回到 Cart.vue 中 modal 组件添加代码:

<modal>
      <p slot="message">你确认要删除此条数据吗?</p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;">确认</a>
        <a class="btn btn--m btn--red" href="javascript:;">关闭</a>
      </div>
</modal>

3、然后给删除按钮绑定点击事件,并给 Modal 组件传递值:

<a href="javascript:;" class="item-edit-btn" @click="delConfirm(item)">
      <svg class="icon icon-del">
           <use xlink:href="#icon-del" />
      </svg>
</a>

<modal :mdShow="modalConfirm">
      <p slot="message">你确认要删除此条数据吗?</p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;">确认</a>
        <a class="btn btn--m btn--red" href="javascript:;" @click="closeModal">关闭</a>
      </div>
</modal>

<script>
export default {
  data() {
    return {
      delItem: ‘‘, // 准备删除的对象
      modalConfirm: false, // 弹框是否显示
    }
  },
  methods: {
    // 删除数据确认弹框
    delConfirm(item) {
      // console.log(item)
      this.modalConfirm = true
      this.delItem = item // 把要删除的数据存起来
    }
  }
}
</script>

4、回到 Modal.vue 中接收参数:

<div :style="this.mdShow ? ‘‘ : ‘display: none‘">

<script>
export default {
  name: Modal,
  props: {
    mdShow: Boolean
  }
}
</script>

这时点击删除按钮,就可以看到弹出框了。

5、给弹框右上角的X图标添加点击事件:

<button class="md-close" @click="closeModal">关闭</button>

<script>
export default {
  methods: {
    closeModal() {
      this.$emit(closeModal)
    }
  }
}
</script>

6、然后回到 Cart.vue 中接受 closeModal:

<modal :mdShow="modalConfirm" @closeModal="closeModal">

<script>
export default {  
 methods: {
    // 关闭删除确认弹框
    closeModal() {
      this.modalConfirm = false
    }
  }
}
</script>

这样点击弹框右上角的X图标就能把确认弹框关闭掉了。

7、给弹框的关闭按钮添加点击事件:

<a class="btn btn--m btn--red" href="javascript:;" @click="closeModal">关闭</a>

这样点击弹框的关闭按钮同样能把确认弹框关闭掉了。

8、再添加一个点击遮罩层关闭弹框:

<div class="md-overlay" @click="closeModal"></div>

上面 modal 这种方式用的老语法,现在2.6的版本还可以使用,以后在3.0的情况下可能会不支持,下面用最新的语法来写下:

<modal :mdShow="modalConfirm" @closeModal="closeModal">
    <template v-slot:message>
        <p>你确认要删除此条数据吗?</p>
    </template>
    <template v-slot:btnGroup>
        <a class="btn btn--m" href="javascript:;">确认</a>
        <a class="btn btn--m btn--red" href="javascript:;" @click="closeModal">关闭</a>
    </template>
</modal>

9、给确认按钮添加点击事件:

<a class="btn btn--m" href="javascript:;" @click="delCart">确认</a>

<script>
export default {
  methods: {
    // 确认删除购物车数据
    delCart() {
      let delItem = this.delItem
      this.cartList.forEach((item, index) => {
        if (delItem.productId === item.productId) {
          this.cartList.splice(index, 1)
        }
        this.modalConfirm = false
      })
    }
  }
}
</script>

这时点击弹出框的确认按钮,就会把当前的商品删除掉,同时关闭弹出框。

 

Vue 简单实例 购物车3 - 删除商品

标签:情况   group   商品   template   准备   点击   绑定   click   dex   

原文地址:https://www.cnblogs.com/joe235/p/12704132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!