| 提交 | 用户 | age | ||
| e034d1 | 1 | <script lang="ts"> |
| 73c8e0 | 2 | import type { CSSProperties, PropType } from 'vue'; |
| fb0c77 | 3 | import { defineComponent, computed, unref, h } from 'vue'; |
| e034d1 | 4 | |
| V | 5 | import { Tooltip } from 'ant-design-vue'; |
| 6 | import { InfoCircleOutlined } from '@ant-design/icons-vue'; | |
| 7 | ||
| 8 | import { getPopupContainer } from '/@/utils'; | |
| 9 | import { isString, isArray } from '/@/utils/is'; | |
| 10 | import { getSlot } from '/@/utils/helper/tsxHelper'; | |
| 73c8e0 | 11 | import { propTypes } from '/@/utils/propTypes'; |
| e9c283 | 12 | import { useDesign } from '/@/hooks/web/useDesign'; |
| e034d1 | 13 | export default defineComponent({ |
| fb0c77 | 14 | name: 'BasicHelp', |
| e034d1 | 15 | components: { Tooltip }, |
| V | 16 | props: { |
| 17 | // max-width | |
| 73c8e0 | 18 | maxWidth: propTypes.string.def('600px'), |
| e034d1 | 19 | // Whether to display the serial number |
| 73c8e0 | 20 | showIndex: propTypes.bool, |
| V | 21 | // color |
| 22 | color: propTypes.string.def('#ffffff'), | |
| 23 | fontSize: propTypes.string.def('14px'), | |
| 24 | placement: propTypes.string.def('right'), | |
| 25 | absolute: propTypes.bool, | |
| e034d1 | 26 | // Text list |
| V | 27 | text: { |
| 28 | type: [Array, String] as PropType<string[] | string>, | |
| 29 | }, | |
| 30 | // 定位 | |
| 31 | position: { | |
| 32 | type: [Object] as PropType<any>, | |
| 33 | default: () => ({ | |
| 34 | position: 'absolute', | |
| 35 | left: 0, | |
| 36 | bottom: 0, | |
| 37 | }), | |
| 38 | }, | |
| 39 | }, | |
| 40 | setup(props, { slots }) { | |
| e9c283 | 41 | const { prefixCls } = useDesign('basic-help'); |
| V | 42 | |
| 73c8e0 | 43 | const getOverlayStyleRef = computed( |
| V | 44 | (): CSSProperties => { |
| 45 | return { | |
| 46 | maxWidth: props.maxWidth, | |
| 47 | }; | |
| 48 | } | |
| 49 | ); | |
| fb0c77 | 50 | |
| 73c8e0 | 51 | const getWrapStyleRef = computed( |
| V | 52 | (): CSSProperties => { |
| 53 | return { | |
| 54 | color: props.color, | |
| 55 | fontSize: props.fontSize, | |
| 56 | }; | |
| 57 | } | |
| 58 | ); | |
| fb0c77 | 59 | |
| e034d1 | 60 | const getMainStyleRef = computed(() => { |
| V | 61 | return props.absolute ? props.position : {}; |
| 62 | }); | |
| 63 | ||
| 64 | const renderTitle = () => { | |
| 65 | const list = props.text; | |
| 73c8e0 | 66 | |
| e034d1 | 67 | if (isString(list)) { |
| V | 68 | return h('p', list); |
| 69 | } | |
| 73c8e0 | 70 | |
| e034d1 | 71 | if (isArray(list)) { |
| V | 72 | return list.map((item, index) => { |
| 73 | return h('p', { key: item }, [props.showIndex ? `${index + 1}. ` : '', item]); | |
| 74 | }); | |
| 75 | } | |
| 73c8e0 | 76 | |
| e034d1 | 77 | return null; |
| V | 78 | }; |
| fb0c77 | 79 | |
| e034d1 | 80 | return () => { |
| V | 81 | return h( |
| 46e087 | 82 | // @ts-ignores |
| e034d1 | 83 | Tooltip, |
| V | 84 | { |
| 85 | title: h( | |
| 86 | 'div', | |
| 87 | { | |
| 88 | style: unref(getWrapStyleRef), | |
| 89 | }, | |
| 90 | [renderTitle()] | |
| 73c8e0 | 91 | ), |
| e9c283 | 92 | overlayClassName: `${prefixCls}__wrap`, |
| e034d1 | 93 | autoAdjustOverflow: true, |
| V | 94 | overlayStyle: unref(getOverlayStyleRef), |
| 0b6110 | 95 | placement: props.placement, |
| e034d1 | 96 | getPopupContainer: () => getPopupContainer(), |
| V | 97 | }, |
| 98 | { | |
| 99 | default: () => | |
| 100 | h( | |
| 101 | 'span', | |
| 102 | { | |
| e9c283 | 103 | class: prefixCls, |
| e034d1 | 104 | style: unref(getMainStyleRef), |
| V | 105 | }, |
| 106 | getSlot(slots) || h(InfoCircleOutlined) | |
| 107 | ), | |
| 108 | } | |
| 109 | ); | |
| 110 | }; | |
| 111 | }, | |
| 112 | }); | |
| 113 | </script> | |
| 114 | <style lang="less"> | |
| 115 | @import (reference) '../../../design/index.less'; | |
| e9c283 | 116 | @prefix-cls: ~'@{namespace}-basic-help'; |
| e034d1 | 117 | |
| e9c283 | 118 | .@{prefix-cls} { |
| e034d1 | 119 | display: inline-block; |
| V | 120 | margin-left: 6px; |
| 121 | font-size: 14px; | |
| 122 | color: @text-color-help-dark; | |
| 123 | cursor: pointer; | |
| 124 | ||
| 125 | &:hover { | |
| 126 | color: @primary-color; | |
| 127 | } | |
| 128 | ||
| 129 | &__wrap { | |
| 130 | p { | |
| 131 | margin-bottom: 0; | |
| 132 | } | |
| 133 | } | |
| 134 | } | |
| 135 | </style> | |
