loading.vue 586 B

123456789101112131415161718192021222324
  1. <script setup lang="ts">
  2. import { UserOutlined } from '@ant-design/icons-vue';
  3. import { Flex, Switch, Avatar } from 'ant-design-vue';
  4. import { Bubble } from 'ant-design-x-vue';
  5. import { ref, h } from 'vue';
  6. defineOptions({ name: 'AXBubbleLoadingSetup' });
  7. const loading = ref(true);
  8. </script>
  9. <template>
  10. <Flex gap="large" vertical>
  11. <Bubble
  12. :loading="loading"
  13. content="hello world !"
  14. :avatar="{ icon: h(UserOutlined) }"
  15. />
  16. <Flex gap="large" wrap="wrap">
  17. Loading state:
  18. <Switch v-model:checked="loading" />
  19. </Flex>
  20. </Flex>
  21. </template>