different-types.vue 919 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <el-button plain @click="open1"> Success </el-button>
  3. <el-button plain @click="open2"> Warning </el-button>
  4. <el-button plain @click="open3"> Info </el-button>
  5. <el-button plain @click="open4"> Error </el-button>
  6. </template>
  7. <script lang="ts" setup>
  8. import { ElNotification } from 'element-plus'
  9. const open1 = () => {
  10. ElNotification({
  11. title: 'Success',
  12. message: 'This is a success message',
  13. type: 'success',
  14. })
  15. }
  16. const open2 = () => {
  17. ElNotification({
  18. title: 'Warning',
  19. message: 'This is a warning message',
  20. type: 'warning',
  21. })
  22. }
  23. const open3 = () => {
  24. ElNotification({
  25. title: 'Info',
  26. message: 'This is an info message',
  27. type: 'info',
  28. })
  29. }
  30. const open4 = () => {
  31. ElNotification({
  32. title: 'Error',
  33. message: 'This is an error message',
  34. type: 'error',
  35. })
  36. }
  37. </script>