focus.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <script setup lang="tsx">
  2. import { App, Button, Flex } from 'ant-design-vue';
  3. import { Sender } from 'ant-design-x-vue';
  4. import { ref } from 'vue';
  5. defineOptions({ name: 'AXSenderFocus' });
  6. const senderRef = ref<InstanceType<typeof Sender> | null>(null);
  7. const Demo = () => {
  8. const senderProps = {
  9. defaultValue: 'Hello, welcome to use Ant Design X!',
  10. ref: senderRef,
  11. };
  12. return (
  13. <Flex wrap={'wrap'} gap={12} >
  14. <Button
  15. onClick={
  16. () => {
  17. senderRef.value?.focus({
  18. cursor: 'start',
  19. });
  20. }
  21. }
  22. >
  23. Focus at first
  24. </Button>
  25. <Button
  26. onClick={() => {
  27. senderRef.value?.focus({
  28. cursor: 'end',
  29. });
  30. }}
  31. >
  32. Focus at last
  33. </Button>
  34. <Button
  35. onClick={() => {
  36. senderRef.value?.focus({
  37. cursor: 'all',
  38. });
  39. }}
  40. >
  41. Focus to select all
  42. </Button>
  43. <Button
  44. onClick={() => {
  45. senderRef.value?.focus({
  46. preventScroll: true,
  47. });
  48. }}
  49. >
  50. Focus prevent scroll
  51. </Button>
  52. <Button
  53. onClick={() => {
  54. senderRef.value?.blur();
  55. }}
  56. >
  57. Blur
  58. </Button>
  59. <Sender {...senderProps} />
  60. </Flex>
  61. );
  62. };
  63. defineRender(() => {
  64. return (
  65. <App>
  66. <Demo />
  67. </App>
  68. )
  69. });
  70. </script>