demo2.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <m-space>
  3. <m-button @click="openSuccess">成功</m-button>
  4. <m-button @click="openWarn">警告</m-button>
  5. <m-button @click="openInfo">消息</m-button>
  6. <m-button @click="openError">错误</m-button>
  7. <m-button @click="openCustom">自定义</m-button>
  8. </m-space>
  9. </template>
  10. <script setup>
  11. import Message from '../index.js'; //此处为本地示例,请使用 import {Message} from "my-baseui";引入
  12. const openSuccess = () => {
  13. Message({
  14. type: "success",
  15. text: "成功状态消息提示!",
  16. });
  17. };
  18. const openWarn = () => {
  19. Message({
  20. type: "warning",
  21. text: "警告状态消息提示!",
  22. });
  23. };
  24. const openInfo = () => {
  25. Message({
  26. text: "这是一条消息提示!",
  27. });
  28. };
  29. const openError = () => {
  30. Message({
  31. type: "error",
  32. text: "错误状态消息提示!",
  33. });
  34. };
  35. const openCustom = () => {
  36. Message({
  37. type: "custom",
  38. text: "自定义消息弹窗样式",
  39. icon: "icon-calendar",
  40. textColor: "#fff",
  41. bgColor: "#42B983",
  42. });
  43. };
  44. </script>