64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<template>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="props.content"
|
|
placement="bottom-start"
|
|
:disabled="isShow"
|
|
>
|
|
<div :class="lines?'content-lines':textAlign=='left'?'left-content':'content'" :style="{width: props.width+'px'}" @mouseover="isShowTooltip">
|
|
<span ref="contentRef">
|
|
<slot name="content">{{ props.content }}</slot>
|
|
</span>
|
|
</div>
|
|
</el-tooltip>
|
|
</template>
|
|
<script setup>
|
|
const props = defineProps({
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
lines: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
textAlign: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
})
|
|
const contentRef = ref()
|
|
const isShow = ref(false)
|
|
const isShowTooltip = () => {
|
|
isShow.value = parseInt(props.width) > contentRef.value.offsetWidth;
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.left-content{
|
|
width: 45px;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.content {
|
|
width: 45px;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.content-lines{
|
|
word-break:break-all;
|
|
overflow:hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
</style>
|