basic.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <script setup lang="tsx">
  2. import { App, Flex } from 'ant-design-vue';
  3. import { Sender } from 'ant-design-x-vue';
  4. import { onWatcherCleanup, ref, watch } from 'vue';
  5. defineOptions({ name: 'AXSenderBasic' });
  6. const value = ref('Hello? this is X!');
  7. const loading = ref<boolean>(false);
  8. const Demo = () => {
  9. const { message } = App.useApp();
  10. // Mock send message
  11. watch(loading, () => {
  12. if (loading.value) {
  13. const timer = setTimeout(() => {
  14. loading.value = false;
  15. message.success('Send message successfully!');
  16. }, 3000);
  17. onWatcherCleanup(() => {
  18. clearTimeout(timer);
  19. })
  20. }
  21. });
  22. return (
  23. <Flex vertical gap="middle">
  24. <Sender
  25. loading={loading.value}
  26. value={value.value}
  27. onChange={(v) => {
  28. value.value = v
  29. }}
  30. onSubmit={() => {
  31. value.value = '';
  32. loading.value = true
  33. message.info('Send message!');
  34. }}
  35. onCancel={() => {
  36. loading.value = false
  37. message.error('Cancel sending!');
  38. }}
  39. />
  40. <Sender value="Force as loading" loading readOnly />
  41. <Sender disabled value="Set to disabled" />
  42. </Flex>
  43. );
  44. };
  45. defineRender(() => {
  46. return (
  47. <App>
  48. <Demo />
  49. </App>
  50. )
  51. });
  52. </script>