basic.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <script setup lang="ts">
  2. import {
  3. BulbOutlined,
  4. InfoCircleOutlined,
  5. RocketOutlined,
  6. SmileOutlined,
  7. WarningOutlined,
  8. } from '@ant-design/icons-vue';
  9. import { message as messageAnt } from 'ant-design-vue';
  10. import { Prompts, type PromptsProps } from 'ant-design-x-vue';
  11. import { h } from 'vue';
  12. defineOptions({ name: 'AXPromptsBasicSetup' });
  13. const [message, contextHolder] = messageAnt.useMessage();
  14. const items: PromptsProps['items'] = [
  15. {
  16. key: '1',
  17. icon: h(BulbOutlined, { style: { color: '#FFD700' } }),
  18. label: 'Ignite Your Creativity',
  19. description: 'Got any sparks for a new project?',
  20. },
  21. {
  22. key: '2',
  23. icon: h(InfoCircleOutlined, { style: { color: '#1890FF' } }),
  24. label: 'Uncover Background Info',
  25. description: 'Help me understand the background of this topic.',
  26. },
  27. {
  28. key: '3',
  29. icon: h(RocketOutlined, { style: { color: '#722ED1' } }),
  30. label: 'Efficiency Boost Battle',
  31. description: 'How can I work faster and better?',
  32. },
  33. {
  34. key: '4',
  35. icon: h(SmileOutlined, { style: { color: '#52C41A' } }),
  36. label: 'Tell me a Joke',
  37. description: 'Why do not ants get sick? Because they have tiny ant-bodies!',
  38. },
  39. {
  40. key: '5',
  41. icon: h(WarningOutlined, { style: { color: '#FF4D4F' } }),
  42. label: 'Common Issue Solutions',
  43. description: 'How to solve common issues? Share some tips!',
  44. },
  45. ];
  46. </script>
  47. <template>
  48. <context-holder />
  49. <Prompts
  50. title="✨ Inspirational Sparks and Marvelous Tips"
  51. :items="items"
  52. :on-item-click="(info) => {
  53. message.success(`You clicked a prompt: ${info.data.label}`);
  54. }"
  55. />
  56. </template>