loading.vue 589 B

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