标签：情况 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>
这时点击弹出框的确认按钮，就会把当前的商品删除掉，同时关闭弹出框。
标签：情况 group 商品 template 准备 点击 绑定 click dex
原文地址：https://www.cnblogs.com/joe235/p/12704132.html
