@[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>