actions.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <script setup lang="tsx">
  2. import { App, Space, Spin, Typography } from 'ant-design-vue';
  3. import { Sender } from 'ant-design-x-vue';
  4. import { onWatcherCleanup, ref, watch } from 'vue';
  5. defineOptions({ name: 'AXSenderActions' });
  6. const value = ref('');
  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. value.value = '';
  16. message.success('Send message successfully!');
  17. }, 2000);
  18. onWatcherCleanup(() => {
  19. clearTimeout(timer);
  20. });
  21. }
  22. });
  23. return (
  24. <Sender
  25. submitType="shiftEnter"
  26. loading={loading.value}
  27. value={value.value}
  28. onChange={(v) => {
  29. console.log('Sender onChange', v)
  30. value.value = v
  31. }}
  32. onSubmit={() => {
  33. loading.value = true;
  34. }}
  35. onCancel={() => {
  36. loading.value = false;
  37. }}
  38. actions={(_, info) => {
  39. const { SendButton, LoadingButton, ClearButton, SpeechButton } = info.components;
  40. return (
  41. <Space size="small">
  42. <Typography.Text type="secondary">
  43. <small>`Shift + Enter` to submit</small>
  44. </Typography.Text>
  45. <ClearButton />
  46. <SpeechButton />
  47. {loading.value ? (
  48. <LoadingButton type="default" icon={<Spin size="small" />} disabled />
  49. ) : (
  50. <SendButton type="primary" disabled={false} />
  51. )}
  52. </Space>
  53. );
  54. }}
  55. />
  56. );
  57. };
  58. defineRender(() => {
  59. return (
  60. <App>
  61. <Demo />
  62. </App>
  63. )
  64. });
  65. </script>