<template>
  <div>
		<h2>Custom Messager</h2>
		<LinkButton @click="alert()">Alert</LinkButton>
		<LinkButton @click="confirm()">Confirm</LinkButton>
  </div>
</template>

<script>
export default {
  created() {
    this.$messager.template = `
      <div class="m-content">
        <h2>{{title}}</h2>
        <p>{{msg}}</p>
        <div class="m-buttons">
          <LinkButton v-for="button in buttons" 
              :key="button.text"
              :text="button.text" 
              @click="closeDialog(button)">
          </LinkButton>
        </div>
      </div>
    `;
  },
  methods: {
    alert() {
      this.$messager.alert({
        showHeader: false,
        borderType: "none",
        title: "Alert",
        msg: "Here is a message!"
      });
    },
    confirm() {
      this.$messager.confirm({
        showHeader: false,
        borderType: "none",
        title: "Confirm",
        msg: "Are you confirm this?",
        result: r => {
          if (r) {
            alert("confirmed: " + r);
          }
        }
      });
    }
  }
};
</script>
<style>
.m-content {
  padding: 10px 10px;
  text-align: center;
}
.m-content h2 {
  font-size: 24px;
  margin: 10px 0;
}
.m-content p {
  font-size: 16px;
  color: #464646;
}
.m-buttons {
  margin: 25px 0 15px 0;
}
.m-buttons .l-btn {
  width: 80px;
  margin: 0 8px;
}
</style>