Vue 简单实例 购物车3 - 删除商品
Posted joe235
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 简单实例 购物车3 - 删除商品相关的知识,希望对你有一定的参考价值。
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 - 删除商品的主要内容,如果未能解决你的问题,请参考以下文章