如何点击按钮弹出自定义组件

Question

简单来说，我自己写了一个组件，想要在前一个页面（注册页面）点注册按钮，然后跳转到我自己写的那个组件。需要弹出的组件像对话框一样的，暂时不考虑传值问题
效果图如下

组件代码如下

<template id="success">
  <div class="show-modal">
    <div class="show-mask">
      <!-- 背景图片 -->
      <img :src="icon.Iconframe" style="max-width:100%;">
      <!-- 对勾图片 -->
      <img :src="icon.Icontick" style="z-index:100;position:absolute;margin-left:-75%;margin-top:115%;width:13%;height:7%;">
      <!-- 成功文字 -->
      <p style="margin-top:-73%;margin-left:18%;font-size:25px;">注册成功</p>
      <!-- 按钮 -->
      <cube-button class="button" @click="Postto" id="successbutton">开启</cube-button>
    </div>
  </div>
</template>
<script>
import Icontick from '@/assets/icons/ic_tick.png'
import Iconframe from '@/assets/icons/img_frame.png'

export default {
  data () {
    return {
      icon: {
        Icontick,
        Iconframe
      }
    }
  },
  methods: {
    Postto () {
      window.location.href = 'http://www.baidu.com'
    }
  },
  props: {
    value: {} // 注意此处获取的value对应的就是组件标签中的v-model
  },
  mounted () {
    this.showMask = this.value
  },
  watch: {
    value (newVal, oldVal) {
      this.showMask = newVal
    },
    showMask (val) {
      this.$emit('input', val)
    },
    closeMask () {
      this.showMask = false
    }
  }
}
</script>

Answer 1

你有用第三方组件库吗？一般都有模态框的，可以了解一下。自己写页不难，背景遮罩使用fixed布局就可以了。