vue element遠(yuǎn)程搜索下拉框出tooltip el-autocomplete下拉框出省略號時鼠標(biāo)移上去出提示

@[TOC](vue element遠(yuǎn)程搜索下拉框出tooltip el-autocomplete下拉框出省略號時鼠標(biāo)移上去出提示 )

需求如下

1.element遠(yuǎn)程搜索框下 下拉框文字超出寬度后會出省略號 要求鼠標(biāo)移上去能夠出文字

效果圖如下

el-autocomplete.gif

對el-tooltip進(jìn)行了二次封裝

<template>
  <el-tooltip
    ref="tlp"
    :content="text"
    effect="dark"
    :disabled="!tooltipFlag"
    :placement="placement"
    class="tooltip"
  >
    <div
        class="tooltip-wrap"
        @mouseenter="handleTooltipIn($event)"
        @mouseleave="handleTooltipOut($event)"
    >{{ text }}</div>
  </el-tooltip>
</template>
<script>
export default {
  name: 'EllipsisTooltip',
  props: {
    // 字符內(nèi)容
    text: {
      type: String,
      default: ''
    },
    // tooltip顯示位置
    placement: {
      type: String,
      default: 'top-start'
    }
  },
  data() {
    return {
      tooltipFlag: false // 是否顯示tooltip
    }
  },
  mounted() {
  },
  methods: {
    handleTooltipIn (event) {
      // scrollWidth: 對象的實(shí)際內(nèi)容的寬度夭拌,不包邊線寬度蚌堵,會隨對象中內(nèi)容超過可視區(qū)后而變大。
      // offsetWidth對象整體的實(shí)際寬度朝抖,包滾動條等邊線,會隨對象顯示大小的變化而改變氯葬。
      this.tooltipFlag = event.target.scrollWidth > event.target.offsetWidth
    },
    handleTooltipOut(event) {
      this.tooltipFlag = false
    }
  },
};
</script>
<style>
.tooltip-wrap{
  width: 100%;
  /*文本不換行*/
  white-space: nowrap;
  overflow: hidden;
  /*文字超出用省略號*/
  text-overflow:ellipsis;
}
</style>

組件使用

// 組件使用
<template>
  <div class="hello">
    <el-form
        :model="basicInfo"
        size="mini"
        label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="input遠(yuǎn)程搜索框:"
              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:''
      }
    };
  },
  mounted() {

  },
  beforeUnmount() {
  },
  methods: {
    querySearchAsync(queryString) {
      let list = [];
      let wtParams = {
        pageNo: 0,
        countPerPage: 5,
        displayName: queryString,
      }
      if (queryString) {
        // 這是我項(xiàng)目中的接口 這里換成自己的接口接口
        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("點(diǎn)擊當(dāng)前項(xiàng)的value值" + item.value);
    }
  },
};
</script>
<style scoped>
</style>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末府树,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子芥永,更是在濱河造成了極大的恐慌,老刑警劉巖钝吮,帶你破解...
    沈念sama閱讀 218,451評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件埋涧,死亡現(xiàn)場離奇詭異,居然都是意外死亡奇瘦,警方通過查閱死者的電腦和手機(jī)棘催,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來耳标,“玉大人醇坝,你說我怎么就攤上這事〈纹拢” “怎么了?”我有些...
    開封第一講書人閱讀 164,782評論 0 354
  • 文/不壞的土叔 我叫張陵砸琅,是天一觀的道長。 經(jīng)常有香客問我症脂,道長,這世上最難降的妖魔是什么摊腋? 我笑而不...
    開封第一講書人閱讀 58,709評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮嘁傀,結(jié)果婚禮上兴蒸,老公的妹妹穿的比我還像新娘细办。我一直安慰自己,他們只是感情好笑撞,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,733評論 6 392
  • 文/花漫 我一把揭開白布岛啸。 她就那樣靜靜地躺著,像睡著了一般茴肥。 火紅的嫁衣襯著肌膚如雪坚踩。 梳的紋絲不亂的頭發(fā)上瓤狐,一...
    開封第一講書人閱讀 51,578評論 1 305
  • 那天批幌,我揣著相機(jī)與錄音,去河邊找鬼荧缘。 笑死拦宣,一個胖子當(dāng)著我的面吹牛截粗,可吹牛的內(nèi)容都是我干的鸵隧。 我是一名探鬼主播,決...
    沈念sama閱讀 40,320評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼从诲,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了系洛?” 一聲冷哼從身側(cè)響起略步,我...
    開封第一講書人閱讀 39,241評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎趟薄,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杭煎,經(jīng)...
    沈念sama閱讀 45,686評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡羡铲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,878評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了也切。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,992評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡雷恃,死狀恐怖疆股,靈堂內(nèi)的尸體忽然破棺而出倒槐,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,715評論 5 346
  • 正文 年R本政府宣布羡忘,位于F島的核電站磕昼,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏票从。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,336評論 3 330
  • 文/蒙蒙 一浸间、第九天 我趴在偏房一處隱蔽的房頂上張望吟榴。 院中可真熱鬧魁蒜,春花似錦吩翻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽弧轧。三九已至碗殷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锌妻,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評論 1 270
  • 我被黑心中介騙來泰國打工襟己, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留牍陌,地道東北人。 一個月前我還...
    沈念sama閱讀 48,173評論 3 370
  • 正文 我出身青樓员咽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親契讲。 傳聞我的和親對象是個殘疾皇子仿吞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,947評論 2 355

推薦閱讀更多精彩內(nèi)容