赞
踩
<template> <el-tooltip v-bind="$attrs" :popper-class="['ts-ellipsis-tooltip', popperClass]" :placement="tooltipPlacement" :disabled="disabled" :offset="tooltipOffset" > <template #content> <slot v-if="$slots.content" name="content" /> <template v-else> {{ content || text }} </template> </template> <div :class="['ts-ellipsis', { 'cursor-default': !disabled && placement === 'mouse' }, textClass]" @mouseover="handleMouseover"> <span :ref="uniqueRefName">{{ text }}</span> </div> </el-tooltip> </template> <script> import { uniqueId } from 'lodash'; export default { props: { text: { // 默认显示的文本 type: String, default: '' }, content: { // tooltip显示内容 type: String, default: '' }, offset: { // 偏移量 type: String, default: '' }, placement: { // tooltip位置,支持mouse值,跟随鼠标位置显示 type: String, default: '' }, popperClass: { // tooltip class type: String, default: '' }, textClass: { // text class type: String, default: '' }, refName: { // 为页面文字标识(如在同一页面中调用多次组件,此参数不可重复) type: String, default: '' } }, data() { return { uniqueRefName: '', disabled: true, tooltipPlacement: this.placement, tooltipOffset: this.offset }; }, created() { this.uniqueRefName = this.refName || uniqueId('ellipsis-'); }, methods: { handleMouseover({ offsetX }) { const contentRef = this.$refs[this.uniqueRefName]; const parentWidth = contentRef.parentNode.offsetWidth; const contentWidth = contentRef.offsetWidth; if (this.placement === 'mouse') { // tooltip跟随鼠标位置显示 this.tooltipPlacement = 'bottom-start'; this.tooltipOffset = offsetX + 5; } this.disabled = contentWidth <= parentWidth; }, } }; </script> <style lang="scss" scoped> .ts-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; &.cursor-default { cursor: default; } } </style>
// placement跟随鼠标移动,其他情况和el-tooltip位置一致
<ts-ellipsis-tooltip
popper-class="my-ellipsis-tooltip"
text="这是显示文本"
effect="light"
placement="mouse"
:open-delay="1"
>
<template #content>
这是tooltip内容
</template>
</ts-ellipsis-tooltip>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。