|
@@ -0,0 +1,75 @@
|
|
|
+import { NTooltip } from 'naive-ui'
|
|
|
+import { defineComponent, PropType } from 'vue'
|
|
|
+import styles from './index.module.less'
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'the-tooltip',
|
|
|
+ props: {
|
|
|
+ maxWidth: {
|
|
|
+ type: Number,
|
|
|
+ default: 300
|
|
|
+ },
|
|
|
+ showContentWidth: {
|
|
|
+ type: Number,
|
|
|
+ default: 120
|
|
|
+ },
|
|
|
+ tipsContent: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ content: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ placement: {
|
|
|
+ type: String as PropType<
|
|
|
+ | 'top-start'
|
|
|
+ | 'top'
|
|
|
+ | 'top-end'
|
|
|
+ | 'right-start'
|
|
|
+ | 'right'
|
|
|
+ | 'right-end'
|
|
|
+ | 'bottom-start'
|
|
|
+ | 'bottom'
|
|
|
+ | 'bottom-end'
|
|
|
+ | 'left-start'
|
|
|
+ | 'left'
|
|
|
+ | 'left-end'
|
|
|
+ >,
|
|
|
+ default: 'top'
|
|
|
+ },
|
|
|
+ showArrow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ trigger: {
|
|
|
+ type: String as PropType<'hover' | 'click'>,
|
|
|
+ default: 'hover'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ return () => (
|
|
|
+ <>
|
|
|
+ <NTooltip
|
|
|
+ style={{ maxWidth: props.maxWidth + 'px' }}
|
|
|
+ trigger={props.trigger}
|
|
|
+ placement={props.placement}
|
|
|
+ showArrow={props.showArrow}
|
|
|
+ delay={500}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ trigger: () => (
|
|
|
+ <p
|
|
|
+ style={{ maxWidth: props.showContentWidth + 'px' }}
|
|
|
+ class={styles.showContentWidth}
|
|
|
+ >
|
|
|
+ {props.content}
|
|
|
+ </p>
|
|
|
+ ),
|
|
|
+ default: () => props.tipsContent || props.content
|
|
|
+ }}
|
|
|
+ </NTooltip>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|