<!-- modal展示 -->
<template>
  <div>
      <el-button @click="modal1">
          alert,成功对话框
      </el-button>
      <el-button @click="modal2">
          confirm,提示对话框
      </el-button>
      <el-button @click="modal3">
          警告框
      </el-button>
      <!-- <el-button @click="modal4">
          弹出刷新
      </el-button> -->
      <el-button @click="modal5">
          文本框
      </el-button>
      <div>
        <el-button @click="modal12">
          alert,成功对话框2
        </el-button>
        <el-button @click="modal22">
            confirm,提示对话框2
        </el-button>
        <el-button @click="modal32">
            警告框2
        </el-button>
        <!-- <el-button @click="modal42">
            弹出刷新2
        </el-button> -->
        <el-button @click="modal52">
            文本框2
        </el-button>
      </div>


      <div>
        <el-button
        plain
        @click="open2">
        不会自动关闭
        </el-button>

        <el-button
        plain
        @click="open">
        不会自动关闭,多行文字
        </el-button>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  mounted(){
  },

  methods: {
      modal1(){
        this.$myalert('添加人员成功请继续', {
            confirmButtonText: '知道了',
            type:"success",
            callback: action => {
                this.$message({
                type: 'info',
                message: `action: ${ action }`
                });
            }
        });
      },
      modal3(){
        this.$myconfirm('是否删除人员', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type:"error",
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      modal2(){
        this.$myconfirm('是否删除人员', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type:"warning"
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      modal4(){
        this.$myalert('确认刷新',"刷新", {
            confirmButtonText: '刷新',
            showClose:true,
            callback: action => {
                this.$message({
                type: 'info',
                message: `action: ${ action }`
                });
            }
        });
      },
      modal5(){
        this.$myprompt('请输入邮箱', {
          type:"error",
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },



      modal12(){
        this.$modal({
            message:'添加人员成功请继续',
            confirmButtonText: '知道了',
            type:"success",
            callback: action => {
                this.$message({
                type: 'info',
                message: `action: ${ action }`
                });
            }
        });
      },
      modal32(){
        this.$modal( {
          message:"'是否删除人员'",
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type:"error",
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      modal22(){
        this.$modal({
          message:'是否删除人员',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type:"warning"
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      modal42(){
        this.$modal({
            message:'确认刷新',
            title:"刷新",
            showClose:true,
            confirmButtonText: '刷新',
            callback: action => {
                this.$message({
                type: 'info',
                message: `action: ${ action }`
                });
            }
        });
      },
      modal52(){
        this.$modal({
          message:'确认请输入邮箱',
          showInput:true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },

      open2() {
        this.$notify({
          message: '这是一条不会自动关闭的消息',
          duration: 0
        });
      },
      open() {
        this.$notify({
          title: '提示',
          message: `这是一条不会自动关闭的消息这是一条不会自动关闭的消息这是一条不会自动关闭的消息
          这是一条不会自动关闭的消息这是一条不会自动关闭的消息这是一条不会自动关闭的消息这是一条不会自动关闭的消息`,
          duration: 0
        });
      }
  }
}

</script>
<style lang='scss' scoped>
</style>