Ant Design Vue 메시지에 여러 줄 표시

4002 단어 AntDesignVue.js

AntDesign용 MessageAPI



AntDesign을 사용하면 this.$message.info('Hello') 등을 사용할 수 있습니다.

너무 좋아요.

여러 줄 표시하기


치료 정도♥빛의 미소녀2020년 봄부터 방송되기 때문에 전달이 필요하다.
그래서 두 줄을 표시하고 싶으니까 줄 바꿈부터 넣으세요.

겉과 다르게...
물론 <br>를 넣어도 바로 표시됩니다.
이대로 가면 내년 봄부터 시작되는 새로운 빛의 미소녀의 멋스러움이 제대로 전달되지 않을 것이다.

String은 안 돼요.


메시지 API의 함수는 첫 번째 매개변수info를 따릅니다.
그래서 string | VNode | (h) => VNode 안 될 것 같아서 다른 걸 시도해 봤어요.

VNode란 무엇입니까?


여기에서 가상 노드에 해당한다고 설명했다.
어쨌든 이 근처에서 가상 노드에게 직접 맡길 수 있어요.

VNode 만드는 법


문서에도 string 함수가 있습니다.
그러나 createElement 안에 있지 않기 때문에 해당하는 함수가 없다render.
createElement를 h라고 부르는 것은 Vue 생태계에서 흔히 볼 수 있는 습관이다.그리고 실제로 JSX는 필수적이다.Vue의 Babel 플러그인 버전 3.4.0 이상에서 ES2015 구문에서 JSX를 포함하는 방법이나 getter(함수나 아로 함수 제외)에 대해const h=this.$createElement가 주입되었기 때문에 (h) 매개변수를 생략할 수 있습니다.이전 버전에서, 만약 h가 이 역할 영역에서 사용할 수 없다면, 프로그램은throw 오류를 발생합니다.
그렇다고 합니다.
응?h 괜찮아요...?

그래서

this.$message.info(h => {
  return h('span', [
    h('span', 'ヒーリングっど♥プリキュア'),
    h('br'),
    h('span', '2020年春からスタート!')
  ])
})

하하하!!
줄바꿈뿐만 아니라 하트 로고도 빨갛게 변할 수 있다.
동작을 확인한 놈은 남을 거야.

귀찮지 않아요?


JSX도 할 수 있을 것 같고 쓸 수 있다면 그게 좋을 것 같아요.
정부에서도 그렇게 말했어요.
다음은 @karur4n 뭐라고 쓸까요?
재밌는 사람이라 기사도 재밌을 것 같은데.
잘 부탁드립니다.

좋은 웹페이지 즐겨찾기