[vuejs] component 태그 종류 동적 변경 | is 속성 활용

Jinbro·6일 전
0

Vuejs

목록 보기
10/10

배경설명

  • image 출력 공통 컴포넌트
    • <img> or <i>
    • props 값에 따라 동적 적용 필요

분석

  • component is 속성 활용 시 태그 종류 동적 변경 가능
  • 속성값 null 설정 시 속성 제거

설계

구분설명샘플
img 태그src 속성 추가<img src="/resouce/img/default.png">
i 태그css 정의된 class 에 따른 아이콘 이미지 노출
role 속성 추가 ex. role="image"
<i class="icon-img-00" role="image">

개발

  • js
// props
propElTag: {type: String, default: 'img'},
propImgPath: {type: String, default: '/resouce/img/default.png'},
propClassTxt: {type: String, default: 'icon-img-00'},
propRoleVal: {type: String, default: 'image'},
  
// computed
isImgTag: function() {
	return this.propElTag === 'img';
},
  • html
<component
	:is="isImgTag ? 'img' : 'i'"
	:src="isImgTag ? propImgPath : null"
    :class="isImgTag ? null : propClassTxt"
	:role="isImgTag ? null : propRoleVal"
></component>
profile
자기 개발 기록 저장소

0개의 댓글