<el-tooltip class="item hello" :disabled="isTooltipDisabled" :content="selectTooltipArr.join(',')"
placement="top-start">
<el-select :popper-append-to-body="false" v-model="value2" multiple collapse-tags style="margin-left: 20px;"
placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
</el-option>
</el-select>
</el-tooltip>
<script>
import { reactive, toRefs, watch, nextTick } from 'vue'
export default {
setup(props, { attrs, slots, emit }) {
const state = reactive({
options: [{
value: '选项1',
label: '黄金糕对方独特风格一个范围的突发问题一份给我'
}, {
value: '选项2',
label: '双皮奶微博v更大范围广泛为国父一味跟风五月份'
}, {
value: '选项3',
label: '蚵仔煎的货物清单给我他反对他无法'
}, {
value: '选项4',
label: '龙须面请问多个服务器的访谈物权法的土匪特务'
}, {
value: '选项5',
label: '北京烤鸭的方法完全推翻独特风味独特访谈问题'
}, {
value: '选项6',
label: '龙须面请问多个服务器的访谈物权法的土匪特务'
}, {
value: '选项7',
label: '北京烤鸭的方法完全推翻独特风味独特访谈问题'
},],
value2: [],
isTooltipDisabled: true,//判断是否展示tooltip提示
selectTooltipArr: [],
})
const sm = {
btn() {
if (state.hdFullImg == null || sessionStorage.getItem('noTip')) {
console.log('55')
} else {
state.taskdialogVisible = true;
}
},
handle_ok() {
// @ts-ignore
if (state.hdFullImg == true) {
// @ts-ignore
sessionStorage.setItem('noTip', true)
}
state.taskdialogVisible = false;
}
}
//监听下拉选择框的数值的变化,用来hover出现提示的作用
watch(() => state.value2, (newVal) => {
console.log(newVal, '555955')
state.selectTooltipArr = []
newVal.forEach((element) => {
// @ts-ignore
state.selectTooltipArr.push(element.label)
console.log(state.selectTooltipArr, '99');
})
nextTick(function () {
if (!newVal.length) {
return (state.isTooltipDisabled = true)
}
if (newVal.length > 1) {
state.isTooltipDisabled = false
} else {
state.isTooltipDisabled = true
// 获取元素
const obj2 = document.querySelector('.el-select__tags-text')
if (typeof obj2 !== 'undefined') {
// @ts-ignore
state.isTooltipDisabled = obj2.scrollWidth <= obj2.offsetWidth
} else {
state.isTooltipDisabled = true
}
}
})
})
return {
...toRefs(state),
...sm
}
}
}
</script>
<style lang="scss" scoped>
.hello {
// 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
:deep(input::-webkit-input-placeholder) {
color: #fff;
}
:deep(input::-moz-input-placeholder) {
color: #fff;
}
:deep(input::-ms-input-placeholder) {
color: #fff;
}
}
.hello .el-select__tags-text:first-child,
.hello :deep(.el-select__tags-text:first-child) {
font-size: 0.14rem;
position: relative;
top: 2px;
}
body :deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected) {
background: transparent !important;
}
body .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background: transparent !important;
}
.el-select .el-select__tags>span,
.el-select :deep(.el-select__tags>span) {
width: 140px;
display: flex;
}
</style>