Link

Link

출처: 문서

본문

텍스트 하이퍼링크 컴포넌트예요. 클릭 가능한 링크 텍스트를 만들 때 사용해요.

보안 경고 (Security Warning)

href prop은 <a> 태그에 그대로 렌더링돼요. 만약 javascript:alert(1) 같은 값이나 악의적인 URL을 넘기면 XSS나 open redirect 취약점이 생길 수 있어요.

URL은 사용하기 전에 항상 검증하고 정리해 주세요. 예를 들면 이렇게요.

function sanitizeUrl(url) {
  const allowedProtocols = ['http:', 'https:']
  try {
    const parsed = new URL(url, window.location.origin)
    return allowedProtocols.includes(parsed.protocol) ? parsed.href : '#'
  } catch {
    return '#'
  }
}

기본 (Basic)

기본 텍스트 링크예요.

.el-link {
  margin-right: 8px;
}

비활성 (Disabled)

링크의 비활성 상태예요. disabled prop을 쓰면 눌러도 반응하지 않게 돼요.

.el-link {
  margin-right: 8px;
}

밑줄 (Underline)

밑줄이 언제 나타날지를 제어해요.

WARNING

boolean 값은 deprecated 되었고, 3.0.0에서 제거될 예정이에요. 새 값으로 전환하는 걸 고려해 주세요.

TIP

2.9.9부터는 'always' | 'hover' | 'never' 값을 사용해서 밑줄 표시 시점을 제어할 수 있어요. 문서의 예시들은 모두 이 값을 사용해요. 2.9.9 미만 버전을 쓰고 있다면 다음을 참고해 주세요.

<el-link :underline="true">link</el-link>

<el-link :underline="false">link</el-link>

.el-link {
  margin-right: 8px;
}

아이콘 (Icon)

아이콘이 있는 링크예요.

TIP

icon 속성을 이용해 아이콘을 추가할 수 있어요. 컴포넌트 이름(미리 등록된)을 문자열로 넘기거나, SVG Vue 컴포넌트 형태의 컴포넌트 자체를 넘길 수 있어요. Element Plus는 icon 문서에서 확인할 수 있는 아이콘 세트를 제공해요.

import { Edit, View as IconView } from '@element-plus/icons-vue'

.el-link {
  margin-right: 8px;
}

API

Attributes

Slots

더 알아보기 (Learn more)