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

배경설명

• 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>