SOURCE

Vue.component('prompt', {
  data() {
    return {
      msg: ''
    }
  },
  template: `
    <div>
      <div class="modal">
        <div class="modal-header">
          <slot name="modal-title">title</slot>
        </div>
        <div class="modal-content">
          <input type="textarea" placeholder="我是陈新，希望成为轻芒的一份子，做喜爱的前端工程师" v-model="msg"/>
        </div>
        <div class="modal-footer">
          <button class="btn" @click="okHandler">确认</button>
          <button class="btn" @click="cancelHandler">取消</button>
        </div>
      </div>
      <div class="shade-layer"></div>
    </div>
  `,
  methods: {
    okHandler () {
      console.log(this.msg)
      this.$emit("ok")
    },
    cancelHandler () {
      this.$emit("cancel")
    }
  }
})

new Vue({
  el: "#app",
  data: {
    isDisplay: false
  },
  methods: {
    clickHandler () {
      this.isDisplay = !this.isDisplay
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button id="btn" @click="clickHandler">click</button>
  <prompt v-if="isDisplay" @ok="clickHandler" @cancel="clickHandler">
    <div slot="modal-title">
      轻芒，你好
    </div>
  </prompt>
</div>

  .modal {
  width: 80%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .3);
  padding: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
}
.shade-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.modal-header {
  color: #000;
  padding: 15px;
}

.modal-content input {
  width: 100%;
}

.modal-footer {
  padding: 15px;
}

.btn {
  border: 1px solid #d1d1d1;
  border-radius: 3px;
  background-color: #f7f7f7;
  height: 28px;
  padding: 0 20px;
  cursor: pointer;
  line-height: 200%;
  display: inline-block;
  color: #666666;
  margin-right: 5px;
  outline: none;
}