typing.vue 964 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <script setup lang="tsx">
  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 } from 'vue';
  6. defineOptions({ name: 'BubbleTyping' });
  7. const text = ref('Ant Design X love you! ');
  8. const repeat = ref(1);
  9. defineRender(() => {
  10. return (
  11. <Flex vertical gap="small">
  12. <Bubble
  13. content={text.value.repeat(repeat.value)}
  14. typing={{ step: 2, interval: 50 }}
  15. avatar={{ icon: <UserOutlined /> }}
  16. />
  17. <Bubble
  18. content={text.value.repeat(repeat.value)}
  19. typing={{ step: 2, interval: 50, suffix: <>💗</> }}
  20. avatar={{ icon: <UserOutlined /> }}
  21. />
  22. <Button
  23. style={{ alignSelf: 'flex-end' }}
  24. onClick={() => {
  25. repeat.value = (repeat.value < 5 ? repeat.value + 1 : 1);
  26. }}
  27. >
  28. Repeat {repeat.value} Times
  29. </Button>
  30. </Flex>
  31. )
  32. });
  33. </script>