Vue小知识- 问题解决-tooltip组件封装

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文来记录一次工作中解决使用 Vue + ElementUI 开发组件遇到的问题, 小结一下

项目开发中, 总有一些问题

在实际项目开发中, 总会遇到一些问题自己就是转不过来弯了, 然后就可能拖很久很久也找不到问题的答案, 可能有时候和同学稍微探讨一下就很快有了解决问题的灵感..真的很神奇, 千呼万唤始出来的感觉. 有时候放下这个问题, 等过一段时间再来看也是瞬间就明白了, 为何当时就是转不出来呢? 这是一个迷..

项目中的 ellipsisTooltip 提示框问题

组件封装

EllipsisTooltip.vue 组件, 单独封装到组件模块内, src/components/..

/// scrollWidth: 对象的实际内容的宽度，不包含边线宽度，会随对象中内容超过可视区而变大
/// offsetWidth: 对象整体的实际宽度，包含滚动条等边线，会随对象显示大小的变化而改变

<template>
  <el-tooltip ref="tlp"
              effect="dark"
              :content="ellips-tooltiptext"
              :disabled="!tooltipFlag"
              :placement="placement">
    <div class="tooltip-wrap"
         @mouseenter="handleTooltipIn($event)"
         @mouseleave="handleTooltipOut($event)">
      {{ text }}
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: "EllipsisTooltip",
  props: {
    // 字符内容
    text: {
      type: String,
      default: "",
    },
    placement: {
      type: String,
      default: "top-start",
    },
  },
  data() {
    return {
      tooltipFlag: false, // 是否显示 tooltip
    };
  },
  methods: {
    handleTooltipIn(e) {
      // scrollWidth: 对象的实际内容的宽度，不包含边线宽度，会随对象中内容超过可视区而变大
      // offsetWidth: 对象整体的实际宽度，包含滚动条等边线，会随对象显示大小的变化而改变
      this.tooltipFlag = e.target.scrollWidth > e.target.offsetWidth;
    },
    handleTooltipOut(e) {
      this.tooltipFlag = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.tooltip-wrap {
  width: 100%;
  /* 文本不换行 */
  white-space: nowrap;
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
}
</style>

在页面中调用,

通过 template 模板的 slot-scope="{item}" 向组件传递数据

<template>
  <div class="hello">
    <el-form :model="basicInfo"
             size="mini"
             label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="input远程搜索框："
                        prop="startDate">
            <el-autocomplete suffix-icon="el-icon-search"
                             v-model.trim="basicInfo.selctValue"
                             placeholder="请输入"
                             :fetch-suggestions="querySearchAsync"
                             :trigger-on-focus="false"
                             @select="handleSelect"
                             style="width: 100%">
              <template slot-scope="{item}">
                <ellipsisTooltip :text="item.value" />
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

页面的处理逻辑


<script>
import EllipsisTooltip from '@/components/EllipsisTooltip.vue';
export default {
  name: 'HelloWorld',
  components: {
    EllipsisTooltip
  },
  data() {
    return {
      basicInfo: {
        selctValue:''
      }
    };
  },
  methods: {
    querySearchAsync(queryString) {
      let list = [];
      let wtParams = {
        pageNo: 0,
        countPerPage: 5,
        displayName: queryString,
      }
      if (queryString) {
        // 这是我项目中的接口 这里换成自己的接口接口
        const result = await this.masterData.cabinetList(wtParams);
        list = result.bizInfo;
        for (let i = 0; i < list.length; i++) {
          list[i].value = list[i].displayName;
        }
        let timeout = ''
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          cb(list)
        }, 100 * Math.random())
      }
    },
    handleSelect(item) {
      console.log("点击当前项的value值" + item.value);
    }
  },
};
</script>
<style scoped>
</style>