<!--
 * @Author: micky
 * @Date: 2024-08-18 21:01:01
 * @LastEditors: micky
 * @LastEditTime: 2024-08-19 15:57:48
 * @FilePath: \chargingpile-uniapp\src\components\widgets\overflow-tooltip\overflow-tooltip.vue
-->
<template>
    <view class="overflow-tooltip">
        <view class="content" id="content" @click.stop="showTooltip">
            {{ content }}
        </view>
    </view>
</template>

<script setup lang="ts">
import { onMounted, getCurrentInstance } from 'vue'

defineProps({
    content: String
})
// const instance = getCurrentInstance() // 获取组件实例
onMounted(() => {
    // let query = uni.createSelectorQuery().in(instance).select('.content')
    // query
    //     .boundingClientRect((res: any) => {
    //         console.log('res', res)
    //     })
    //     .exec()
})
const showTooltip = e => {}
</script>
<style scoped lang="scss">
.overflow-tooltip {
    @apply w-full;
    .content {
        display: -webkit-box;
        /* 表示几行后超出隐藏 */
        -webkit-line-clamp: 1;
        /* 超出隐藏 */
        overflow: hidden;
        /*超出显示为省略号*/
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        /*强制英文单词自动换行*/
        word-break: break-all;
    }
}
</style>
