博客园

super.hill

记录搬砖中遇到的坑,欢迎批评指导!

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
<template>
  <el-tooltip
    effect="dark"
    :content="content"
    placement="top-end"
    :disabled="isShowTooltip"
    v-bind="$attrs"
    :open-delay="200"
  >
    <div class="text-wrap" @mouseover="onMouseOver">
      <span ref="text">{{ text }}</span>
    </div>
  </el-tooltip>
</template>

<script>
import { Tooltip } from 'element-ui'
export default {
  name: 'text-tooltip',
  props: ['text'],
  components: {
    Tooltip
  },
  data() {
    return {
      isShowTooltip: false,
      content: "",
    };
  },
  methods: {
    onMouseOver(str) {
      // 内容超出,显示文字提示内容
      const tag = this.$refs.text;
      const parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度
      const contentWidth = tag.offsetWidth; // 获取元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth;
      // 鼠标悬停后显示的内容
      this.content = this.text;
    }
  },
};
</script>

<style scoped>
.text-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

 

 
posted on 2022-03-25 18:13  超岭  阅读(694)  评论(0编辑  收藏  举报
博客园