SOURCE

/*
      props：
        modalTitle: 弹窗标题
        okBtn: 确认按钮
        cancelBtn: 取消按钮
        注意事项：传参时候使用烤串的书写方式xx-xxx
      slot:
        modal-content: 内容区域
        modal-footer： 页脚按钮区域
      methods: 
        okHandle: 触发确认on-ok自定义事件
        cancelHandle： 触发取消on-cancel自定义事件
     */
    Vue.component('ys-modal-component', {
      props: {
        modalTitle: {
          type: String,
          default: '标题区域'
        },
        okBtn: {
          type: String,
          default: '确认'
        },
        cancelBtn: {
          type: String,
          default: '取消'
        }
      },
      template: `
        <div class="modal">
          <div class="modal-header">
            <h4>{{ modalTitle }}</h4>
          </div>
          <div class="modal-content">
            <div>
              <slot name="modal-content">内容区域</slot>
            </div>
          </div>
          <div class="modal-footer">
              <input class="btn blue" type="button" v-model="okBtn" @click="okHandle" />
              <input class="btn" type="button" v-model="cancelBtn" @click="cancelHandle" />
          </div>
        </div>
      `,
      methods: {
        okHandle () {
          console.log("点击确定");
          this.$emit("on-ok"); 
        },
        cancelHandle () {
          console.log("点击取消");
          this.$emit("on-cancel");
        }
      }
    })
 
 
    new Vue({
      el: "#app",
      data: {
        isHide: false
      },
      methods: {
        ok () {
          alert("欢迎您购买本产品");
        },
        cancel () {
          this.isHide = !this.isHide;
        }
      }
    })

<div id="app">
  <input type="button" class="btn blue" value="点击我，呼唤弹窗，再来一遍" v-if="isHide"
  @click="isHide=!isHide">
  <ys-modal-component v-if="!isHide" modal-title="温馨提示" ok-btn="确认购买" cancel-btn="去意已决"
  @on-ok="ok" @on-cancel="cancel">
    <div slot="modal-content">
      尊敬的用户，您购买的商品将于支付成功后3-7个工作日内发货，敬请周知。祝您购物愉快！
    </div>
  </ys-modal-component>
</div>

p,
h4{
  margin:0;
}

.modal{
  width:480px;
  background-color:#fff;
  border:1px solid rgba(0,0,0,.3);
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  margin:50px;
}

.modal-header{
  color:#fff;
  background:cadetblue;
  border-radus:6px 6px 0 0;
  padding:15px;
  border-bottom:1px solid #5e9fa1;
}
.modal-content div{
  padding:15px 10px;
}

.modal-footer{
  padding:15px;
  text-align:right;
  border-top:1px solid #e5e5e5;
}

.btn{
  border: 1px solid #d1d1d1;
  border-radius:3px;
  background-color:#f7f7f7;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
  background: -moz-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
  background: -o-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
  background: -ms-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
  height:28px;
  padding:0 20px;
  cursor:pointer;
  line-height:28px;
  display:inline-block;
  color:#66666;
  margin-right:5px;
  outline:none;
}

.blue{
  border: 1px solid #5e9fa1;
  background-color:#5e9fa1;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
  background: -moz-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
  background: -o-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
  background: -ms-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
  color: #FFFFFF;
}