Text.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <section class="le-text-wrap" ref="textTooltipRef">
  3. <el-tooltip v-if="value" :visible="isShowTooltip" :placement="placement">
  4. <template #content>
  5. <span>{{ value }}</span>
  6. </template>
  7. <div class="le-text" @mouseover="handleElTooltip" @mouseleave="isShowTooltip = false">
  8. <slot>
  9. <el-text v-bind="textProps" class="text-overflow_ellipsis_line_2" :style="textStyle">{{ value }}</el-text>
  10. </slot>
  11. <!-- 复制按钮 -->
  12. <el-icon class="action-icon" v-if="copy">
  13. <DocumentCopy @click.stop="copyText(value)" />
  14. </el-icon>
  15. </div>
  16. </el-tooltip>
  17. <span v-else>-</span>
  18. </section>
  19. </template>
  20. <script lang="ts" setup name="LeText">
  21. import { computed, ref } from 'vue'
  22. import type { Component, PropType } from 'vue'
  23. import { copyText } from '@/utils'
  24. defineOptions({ name: 'LeText' })
  25. const props = defineProps({
  26. value: {
  27. type: String,
  28. default: ''
  29. },
  30. copy: {
  31. type: Boolean,
  32. default: false
  33. },
  34. // tooltip 配置
  35. placement: {
  36. type: String,
  37. default: 'top'
  38. },
  39. // text 配置
  40. lineClamp: {
  41. type: [String, Number],
  42. default: 1
  43. },
  44. type: {
  45. type: String as PropType<'primary' | 'success' | 'warning' | 'danger' | 'info'>
  46. },
  47. tag: {
  48. type: String,
  49. default: 'span'
  50. }
  51. /*truncated: {
  52. type: Boolean,
  53. }*/
  54. })
  55. const textProps = computed(() => {
  56. const { lineClamp, type, tag } = props
  57. return {
  58. lineClamp,
  59. type,
  60. tag
  61. }
  62. })
  63. const textStyle = computed((): string => {
  64. const lineClamp = +props.lineClamp || 1
  65. return `line-clamp: ${lineClamp}; -webkit-line-clamp: ${lineClamp}`
  66. })
  67. const textTooltipRef = ref()
  68. const visible = ref(false)
  69. const isShowTooltip = ref(false)
  70. function handleElTooltip(e: any): void {
  71. const base: number = textTooltipRef.value.clientHeight
  72. isShowTooltip.value = e.target.scrollHeight > base
  73. }
  74. </script>