码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-28 16:49:41      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:script   技术   添加   dshow   javascrip   this   jpg   mes   src   

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

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 - 确认地址 - 下一步

标签:script   技术   添加   dshow   javascrip   this   jpg   mes   src   

原文地址:https://www.cnblogs.com/joe235/p/12711385.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!