[Ellipsis] Support multiple rows to ellipsis about vexip-ui HOT 6 CLOSED

@Hujianboo My thought is the following:

max-row is a prop to trigger whether is using line-clamp styles, its default value should be null. Ellipsis will turn on the multiple rows ellipsis when max-row is specified to a number (> 1), Ellipsis will work like before when this feature not effective.

With multiple rows, we should add a special class named nh.bm('multiple'), and can use wrapper.value.scrollHeight > wrapper.value.offsetHeight to judge whether to show tooltip.

The added class name will effect some styles:

.#{$namespace}-ellipsis {
  @include basis;

  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &--multiple {
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    text-overflow: unset; // or clip
    white-space: unset; // or normal
  }

  &__tip {
    padding: 8px 14px 10px;
  }
}

In my opinion, line-clamp is a vertical layout, it is difference to text-overflow which is horizonal layout, so we should not using line-clamp when in single row.

Thx.Agree with you. My solution is hurry and the logic of whether to display tooltip is false. Can I add this feature when I have time ?

from vexip-ui.

Does it mean that the component has one option named maxRow to decide the max displayed lines ? Do you mind using scss variable and @if rule to achieve it

from vexip-ui.

@Hujianboo yes, it should be add a prop to specify the max line count, max-row is ok.

My initial consideration is using -webkit-line-clamp to implement this feature. I had not know where it is needed to use the scss variables and @if rule?

from vexip-ui.

@Hujianboo yes, it should be add a prop to specify the max line count, max-row is ok.

My initial consideration is using -webkit-line-clamp to implement this feature. I had not know where it is needed to use the scss variables and @if rule?

I'm sorry that I didn't look at the structure carefully. It can be implemented without SCSS variables. What I thought before is that if there are multiple lines, using webkit ,otherwise it will remain the original logic .But it seems that there is no problem that just -webkit for all.

I just tried to use webkit. It seems that the range in the logic of calculating the width is invalid, and the original width cannot be calculated while the target is using webkit. https://github.com/qmhc/vexip-ui/blob/2aeca227976e5b7a116b23ef31a68299a4b876b7/components/ellipsis/ellipsis.vue#L128 Because I am not familiar with range, I directly cloned the old DOM to calculate the real width to implement it and the new Dom will be removed after calculation.

function handleTriggerEnter() {
      window.clearTimeout(timer.hover)

      timer.hover = window.setTimeout(() => {
        if (!wrapper.value || !wrapper.value.childNodes.length) {
          visible.value = false

          return
        }

        const dom = wrapper.value.cloneNode(true)
        dom.style.position = 'fixed'
        dom.style.top = '-999999px'
        dom.style.width = 'auto'
        document.body.appendChild(dom)
        visible.value = dom.clientWidth > wrapper.value.getBoundingClientRect().width
        content.value = visible.value ? wrapper.value.textContent ?? '' : ''
        dom.remove()
        nextTick(() => {
          active.value = true
        })
      }, 250)
    }

Do you have another idea to solve the problem?
--------add-------
the ellpsis.scss

@use './design' as *;
@use './tooltip.scss';

.#{$namespace}-ellipsis {
  @include basis;

  width: 100%;
  overflow: hidden;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  &__tip {
    padding: 8px 14px 10px;
  }
}

the template

  <div
    ref="wrapper"
    :class="nh.b()"
    v-bind="$attrs"
    :style="{
      '-webkit-line-clamp': props.displayNum //default value is 1
    }"
    @mouseenter="handleTriggerEnter"
    @mouseleave="handleTriggerLeave"
  >
    <slot></slot>
  </div>

from vexip-ui.

@Hujianboo My thought is the following:

max-row is a prop to trigger whether is using line-clamp styles, its default value should be null. Ellipsis will turn on the multiple rows ellipsis when max-row is specified to a number (> 1), Ellipsis will work like before when this feature not effective.

With multiple rows, we should add a special class named nh.bm('multiple'), and can use wrapper.value.scrollHeight > wrapper.value.offsetHeight to judge whether to show tooltip.

The added class name will effect some styles:

.#{$namespace}-ellipsis {
  @include basis;

  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &--multiple {
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    text-overflow: unset; // or clip
    white-space: unset; // or normal
  }

  &__tip {
    padding: 8px 14px 10px;
  }
}

In my opinion, line-clamp is a vertical layout, it is difference to text-overflow which is horizonal layout, so we should not using line-clamp when in single row.

from vexip-ui.

@Hujianboo You're very welcome!

from vexip-ui.