positioning.vue 922 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <el-button plain @click="open1"> Top Right </el-button>
  3. <el-button plain @click="open2"> Bottom Right </el-button>
  4. <el-button plain @click="open3"> Bottom Left </el-button>
  5. <el-button plain @click="open4"> Top Left </el-button>
  6. </template>
  7. <script lang="ts" setup>
  8. import { ElNotification } from 'element-plus'
  9. const open1 = () => {
  10. ElNotification({
  11. title: 'Custom Position',
  12. message: "I'm at the top right corner",
  13. })
  14. }
  15. const open2 = () => {
  16. ElNotification({
  17. title: 'Custom Position',
  18. message: "I'm at the bottom right corner",
  19. position: 'bottom-right',
  20. })
  21. }
  22. const open3 = () => {
  23. ElNotification({
  24. title: 'Custom Position',
  25. message: "I'm at the bottom left corner",
  26. position: 'bottom-left',
  27. })
  28. }
  29. const open4 = () => {
  30. ElNotification({
  31. title: 'Custom Position',
  32. message: "I'm at the top left corner",
  33. position: 'top-left',
  34. })
  35. }
  36. </script>