basic.vue 1.1 KB

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