[Vue 2 스니펫] 필요한 경우에만 제목 속성 추가
5439 단어 vuetodayilearnedjavascript
기본 지시문을 작성합니다.
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% 완벽하지 않습니다. 그러나 나를 위해 그것은 일을합니다!
Reference
이 문제에 관하여([Vue 2 스니펫] 필요한 경우에만 제목 속성 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/neophen/vue-2-snippets-add-title-attribute-only-if-needed-40je텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)