typing.vue 846 B

12345678910111213141516171819202122232425262728293031323334
  1. <script setup lang="ts">
  2. import { UserOutlined } from '@ant-design/icons-vue';
  3. import { Bubble } from 'ant-design-x-vue';
  4. import { Button, Flex } from 'ant-design-vue';
  5. import { ref, h } from 'vue';
  6. defineOptions({ name: 'AXBubbleTypingSetup' });
  7. const text = ref('Ant Design X love you! ');
  8. const repeat = ref(1);
  9. </script>
  10. <template>
  11. <Flex vertical gap="small">
  12. <Bubble
  13. :content="text.repeat(repeat)"
  14. :typing="{ step: 2, interval: 50 }"
  15. :avatar="{ icon: h(UserOutlined) }"
  16. />
  17. <Bubble
  18. :content="text.repeat(repeat)"
  19. :typing="{ step: 2, interval: 50, suffix: '💗' }"
  20. :avatar="{ icon: h(UserOutlined) }"
  21. />
  22. <Button
  23. :style="{ alignSelf: 'flex-end' }"
  24. @click="repeat = repeat < 5 ? repeat + 1 : 1"
  25. >
  26. Repeat {{ repeat }} Times
  27. </Button>
  28. </Flex>
  29. </template>