1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <script setup lang="tsx">
- import { App, Flex } from 'ant-design-vue';
- import { Sender } from 'ant-design-x-vue';
- import { onWatcherCleanup, ref, watch } from 'vue';
- defineOptions({ name: 'AXSenderBasic' });
- const value = ref('Hello? this is X!');
- const loading = ref<boolean>(false);
- const Demo = () => {
- const { message } = App.useApp();
- // Mock send message
- watch(loading, () => {
- if (loading.value) {
- const timer = setTimeout(() => {
- loading.value = false;
- message.success('Send message successfully!');
- }, 3000);
- onWatcherCleanup(() => {
- clearTimeout(timer);
- })
- }
- });
- return (
- <Flex vertical gap="middle">
- <Sender
- loading={loading.value}
- value={value.value}
- onChange={(v) => {
- value.value = v
- }}
- onSubmit={() => {
- value.value = '';
- loading.value = true
- message.info('Send message!');
- }}
- onCancel={() => {
- loading.value = false
- message.error('Cancel sending!');
- }}
- />
- <Sender value="Force as loading" loading readOnly />
- <Sender disabled value="Set to disabled" />
- </Flex>
- );
- };
- defineRender(() => {
- return (
- <App>
- <Demo />
- </App>
- )
- });
- </script>
|