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