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 - 删除商品的主要内容,如果未能解决你的问题,请参考以下文章

vue简单实现购物车的全部功能

ideajsp购物车删除商品报500错误

python学习:一次简单的购物车程序实例

Vue.js实例:开发购物车

Vue.js实例:开发购物车

Vue小实例