123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- import { defineComponent, onMounted, ref, watch, nextTick } from 'vue'
- import { ElPopover } from 'element-plus'
- import { generateProps } from '../helper/component-util'
- import { componentScheme } from './component.scheme'
- import './index.less'
- export default defineComponent({
- name: 'CipOverflowTooltip',
- props: generateProps(componentScheme),
- setup (props, { slots }) {
- const wrapperRef = ref()
- const isOverflow = ref(false)
- const computeOverflow = () => {
- const el = wrapperRef.value
- el.style.whiteSpace = 'nowrap'
- const parentElement = el.parentElement
- parentElement.style.overflow = 'hidden'
- // isOverflow.value =
- return el.scrollWidth > parentElement.offsetWidth
- }
- onMounted(() => {
- watch(() => props.rowKey, () => {
- isOverflow.value = false
- nextTick(() => {
- isOverflow.value = computeOverflow()
- })
- }, { immediate: true, deep: true })
- })
- return () => {
- return <div ref={wrapperRef}>
- {!isOverflow.value && slots.default?.()}
- {isOverflow.value &&
- <ElPopover trigger={props.trigger} placement={props.placement}>
- {{
- reference: () => <div class={'text-ellipsis'}>{slots.default?.()}</div>,
- default: () => slots.default?.()
- }}
- </ElPopover>
- }
- </div>
- }
- }
- })
|