sendStyle.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <script setup lang="tsx">
  2. import { SendOutlined } from '@ant-design/icons-vue';
  3. import { type ButtonProps, App, Flex, Tooltip } from 'ant-design-vue';
  4. import { Sender, theme } from 'ant-design-x-vue';
  5. import { type CSSProperties, onWatcherCleanup, ref, watch } from 'vue';
  6. defineOptions({ name: 'AXSenderSendStyle' });
  7. const { token } = theme.useToken();
  8. const value = ref('Ask something?');
  9. const loading = ref(false);
  10. const Demo = () => {
  11. const { message } = App.useApp();
  12. watch(loading, () => {
  13. if (loading.value) {
  14. const timer = setTimeout(() => {
  15. loading.value = false;
  16. }, 3000);
  17. onWatcherCleanup(() => {
  18. clearTimeout(timer);
  19. })
  20. }
  21. });
  22. const renderSend = (
  23. props: ButtonProps & { ignoreLoading?: boolean; placeholder?: string; style?: CSSProperties } = {},
  24. ) => {
  25. const { ignoreLoading, placeholder, ...btnProps } = props;
  26. return (
  27. <Sender
  28. value={value.value}
  29. onChange={v => value.value = v}
  30. loading={loading.value}
  31. onSubmit={(msg) => {
  32. message.success(`Send: ${msg}`);
  33. value.value = ''
  34. loading.value = true
  35. }}
  36. placeholder={placeholder}
  37. onCancel={() => {
  38. loading.value = false
  39. }}
  40. actions={(_, info) => {
  41. const { SendButton, LoadingButton } = info.components;
  42. if (!ignoreLoading && loading.value) {
  43. return (
  44. <Tooltip title="Click to cancel">
  45. <LoadingButton />
  46. </Tooltip>
  47. );
  48. }
  49. let node = <SendButton {...btnProps} />;
  50. if (!ignoreLoading) {
  51. node = (
  52. <Tooltip title={value.value ? 'Send \u21B5' : 'Please type something'}>{node}</Tooltip>
  53. );
  54. }
  55. return node;
  56. }}
  57. />
  58. );
  59. };
  60. return (
  61. <Flex vertical gap="middle">
  62. {renderSend({
  63. shape: 'default',
  64. placeholder: 'Change button border radius',
  65. style: { borderRadius: '12px' },
  66. })}
  67. {renderSend({
  68. type: 'text',
  69. // variant: 'text',
  70. placeholder: 'Change button icon',
  71. // color: 'primary',
  72. style: { color: token.value.colorPrimary },
  73. icon: <SendOutlined />,
  74. shape: 'default',
  75. })}
  76. {renderSend({ ignoreLoading: true, placeholder: 'Loading not change button' })}
  77. </Flex>
  78. );
  79. };
  80. defineRender(() => {
  81. return (
  82. <App>
  83. <Demo />
  84. </App>
  85. )
  86. });
  87. </script>