Element에서 배운 Vue.js의component 제작 방법 중 하나 (alert)

alert

전제 조건

Elemnt 2.52
공식 페이지
https://element.eleme.io/#/en-US

경고

준비된 기능

경고 메시지 표시

중앙 정렬

각 유형에 대해 준비된 아이콘 표시

설명 섹션의 표시

경고 종료/종료

사용자 정의 닫기 버튼

프로비저닝

 |-index.js
 |-src
   |-main.vue

index.js가 설치를 정의했습니다. ※아직 어떻게 처리했는지 잘 모르겠다.
main.위에서 문제를 보다.

<transition>

Vue.제공된 구성 부분.
애니메이션 등을 추가할 수 있을 것 같다.
CSS가 어디 있긴 하지만 지금은 어딘지 몰라서 들키자마자 추서한다.

<div>

v-show 제어를 통해 표시됩니다.다음에 설명한close 이벤트에서 v-show가 가짜라면 표시되지 않습니다.

class가bind에 의해
지정한 type에 따라class가 결정합니다.색상도 클라스로 결정해야 하기 때문에 어디선가 CSS로 정의할 수 있다고 생각합니다.

중앙을 맞추거나 센터가 제어한다.

<i>

아이콘의 표시를 제어합니다.설명 부분이 있는 경우 아이콘이 커진class를 설정합니다.

<div>
  <span>
   <slot>

title을 표시합니다.설명 부분이 있는 경우 타이틀을 굵게 하는class를 설정합니다.

<slot>
  <p>

설명 섹션을 표시합니다.

<i>

닫기 버튼을 제어합니다.

close-text를 설정하지 않으면 기본적으로 [x]를 표시합니다.설정된 경우 지정한 값은close 단추가 됩니다

.

clossable을 통해close 단추를 표시할지 여부를 제어합니다.표시되지 않는 경우 close 불가

@clickclose 이벤트를 실행합니다.close에서 하고 싶은 처리가 있으면 부모가 close 사건을 설정합니다.

알 수 없는 점 ※ 알면 예약 갱신

1. role="alert"
2. $slots.title, $slots.default
3. CSS

감상

처음이라 Qita 표기법을 포함해 잘 모르는 부분이 많다.
앞으로의 갱신은 개선될 것이다.