12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import { defineComponent, onMounted, ref, watch, nextTick } from 'vue'
- import { ElPopover } from 'element-plus'
- import './index.less'
- export default defineComponent({
- name: 'CipOverflowTooltip',
- props: {
- placement: {
- type: String,
- default: 'top',
- validate: (value) => {
- return ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'].includes(value)
- }
- },
- trigger: {
- type: String,
- default: 'hover',
- validate: (value) => {
- return ['click', 'focus', 'hover', 'manual'].includes(value)
- }
- },
- rowKey: {}
- },
- 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>
- }
- }
- })
|