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

Z时代
2024-01-10
分类：综合

vue

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>