Vue 简单实例 地址选配10 - 确认地址 - 下一步

vue

我们可以用弹框的形式来实现

1、给下一步按钮添加点击事件:

<div class="next-btn-wrap">

<a class="btn btn--m btn--red" href="javascript:;" @click="nextConfirm">下一步</a>

</div>

<script>

export default {

methods: {

// 下一步

nextConfirm() {

this.modalConfirm = true

},

}

}

</script>

2、新建变量 modalConfirm 并添加内容:

<modal :mdShow="modalConfirm" @closeModal="modalConfirm = false">

<template v-slot:message>

<p>确定进入下一页?</p>

</template>

<template v-slot:btnGroup>

<a class="btn btn--m btn--red" href="javascript:;" @click="closeModal">关闭</a>

</template>

</modal>

<script>

export default {

data() {

return {

modalConfirm: false // 弹框是否显示

}

},

}

</script>

效果图:

以上是 Vue 简单实例 地址选配10 - 确认地址 - 下一步 的全部内容, 来源链接: utcz.com/z/379643.html

回到顶部