Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In this article, I will summarize the problems I encountered in a workaround to develop components using Vue + ElementUI

In project development, there are always some problems

In the actual project development, there are always some problems that I just can’t turn around, and then I may drag it out for a long time and also can’t find the answer to the problem. Sometimes I may have inspiration to solve the problem after a little discussion with my classmates. It’s amazing. It’s amazing. Sometimes when you put down the problem and look at it again after a period of time, you will understand it instantly. Why can’t you get it out at that time? It’s a mystery..

EllipsisTooltip prompt box problem in project

Component packaging

Ellipsistooltip. vue component, wrapped separately in component module, SRC /components/..

  • /// scrollWidth: The width of the actual content of the object, not including the edge width, which increases as the content in the object exceeds the viewable area
  • /// offsetWidth: The actual width of the entire object, including scrollbars and other edges, varies with the display size of the object
<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: {
    // Character content
    text: {
      type: String.default: "",},placement: {
      type: String.default: "top-start",}},data() {
    return {
      tooltipFlag: false.// Whether to display tooltip
    };
  },
  methods: {
    handleTooltipIn(e) {
      // scrollWidth: The width of the actual content of the object, not including the edge width, which increases as the content in the object exceeds the viewable area
      // offsetWidth: The actual width of the whole object, including the scrollbars and other edges, changes with the display size of the object
      this.tooltipFlag = e.target.scrollWidth > e.target.offsetWidth;
    },
    handleTooltipOut(e) {
      this.tooltipFlag = false; ,}}};</script>
<style lang="scss" scoped>
.tooltip-wrap {
  width: 100%;
  /* Text does not wrap */
  white-space: nowrap;
  overflow: hidden;
  /* The text exceeds the ellipsis */
  text-overflow: ellipsis;
}
</style>

Copy the code

Call in the page,

Pass data to the component through the slot-scope=”{item}” of the Template template

<template>
  <div class="hello">
    <el-form :model="basicInfo"
             size="mini"
             label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="Input Remote search box:"
                        prop="startDate">
            <el-autocomplete suffix-icon="el-icon-search"
                             v-model.trim="basicInfo.selctValue"
                             placeholder="Please enter"
                             :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>
Copy the code

Page processing logic


<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) {
        // This is the interface in my project
        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("Click on the value of the current item"+ item.value); }}}; </script><style scoped>
</style>
Copy the code