Ant Design Vue 메시지에 여러 줄 표시
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 뭐라고 쓸까요?
재밌는 사람이라 기사도 재밌을 것 같은데.
잘 부탁드립니다.
Reference
이 문제에 관하여(Ant Design Vue 메시지에 여러 줄 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tomoyuki_okawa/items/087e97720692ce17c2d8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
치료 정도♥빛의 미소녀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 뭐라고 쓸까요?
재밌는 사람이라 기사도 재밌을 것 같은데.
잘 부탁드립니다.
Reference
이 문제에 관하여(Ant Design Vue 메시지에 여러 줄 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tomoyuki_okawa/items/087e97720692ce17c2d8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)