<template>
  <el-button plain @click="open1"> Success </el-button>
  <el-button plain @click="open2"> Warning </el-button>
  <el-button plain @click="open3"> Info </el-button>
  <el-button plain @click="open4"> Error </el-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElNotification } from 'element-plus'

export default defineComponent({
  setup() {
    const open1 = () => {
      ElNotification({
        title: 'Success',
        message: 'This is a success message',
        type: 'success',
      })
    }

    const open2 = () => {
      ElNotification({
        title: 'Warning',
        message: 'This is a warning message',
        type: 'warning',
      })
    }

    const open3 = () => {
      ElNotification({
        title: 'Info',
        message: 'This is an info message',
        type: 'info',
      })
    }

    const open4 = () => {
      ElNotification({
        title: 'Error',
        message: 'This is an error message',
        type: 'error',
      })
    }
    return {
      open1,
      open2,
      open3,
      open4,
    }
  },
})
</script>
