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>

這時點擊彈出框的確認按鈕，就會把當前的商品刪除掉，同時關閉彈出框。