[Vue 2 스니펫] 필요한 경우에만 제목 속성 추가

오늘 우리는 텍스트가 잘린 경우 제목 속성을 추가하는 지시문을 만들 것입니다. 이렇게:



기본 지시문을 작성합니다.

function inserted(el) {
  function setTitleIfNecessary() {
// this is the magic function which checks if Ellipsis is Active
    if (isEllipsisActive(this)) { 
      this.setAttribute('title', this.innerText);
    }
  }

  el.addEventListener('mouseenter', setTitleIfNecessary, false);
  el.__title = setTitleIfNecessary;
}

// function unbind(el: HTMLElement) {
function unbind(el) {
  if (!el.__title) {
    return;
  }

  window.removeEventListener('mouseenter', el.__title);
  delete el.__title;
}

export const Title = {
  inserted,
  unbind,
};

export default Title;


다음은 isEllipsisActive 함수입니다.

function isEllipsisActive(e) {
  const c = e.cloneNode(true);
  c.style.display = 'inline-block';
  c.style.width = 'auto';
  c.style.visibility = 'hidden';
  document.body.appendChild(c);
  const truncated = c.clientWidth >= e.clientWidth;
  c.remove();
  return truncated;
}


이제 이것은 100% 완벽하지 않습니다. 그러나 나를 위해 그것은 일을합니다!

좋은 웹페이지 즐겨찾기