demo1.vue 728 B

12345678910111213141516171819202122232425262728293031
  1. <template>
  2. <m-space>
  3. <m-button @click="openMsg1">消息提示</m-button>
  4. <m-button @click="openMsg2">消息提示(VNode)</m-button>
  5. <m-button @click="openMsg3">5秒后消失</m-button>
  6. </m-space>
  7. </template>
  8. <script setup>
  9. import { h } from 'vue-demi';
  10. import Message from '../index.js'; //此处为本地示例,请使用 import {Message} from "my-baseui";引入
  11. const openMsg1 = () => {
  12. Message({
  13. text: '默认消息提示!'
  14. })
  15. }
  16. const openMsg2 = () => {
  17. Message({
  18. text: h('p', null, [
  19. h('span',null,'默认消息提示'),
  20. h('i', { style: 'color: teal' }, 'VNode')
  21. ])
  22. })
  23. }
  24. const openMsg3 = () => {
  25. Message({
  26. text: '5秒后消失!',
  27. timeout: 5000
  28. })
  29. }
  30. </script>