# @focus, @blur 예제
# @focus
- 사용자가 해당 태그에 포커싱(클릭) 했을 때 실행
@focus= **로 실행
# @blur
- 사용자가 해당 태그에 포커싱(클릭) 잃었을 때 실행
@blur= **로 실행
# 종합 예제
- 아래 예제는 PhoneNumberInput이라는 곳에 사용자가
focus하면 focusOnMobile값이 true로 바뀌면서 툴팁 content가 보이고,blur할 경우 focusOnMobile값이 false로 바뀌면서 툴팁 content가 안보이는 예제입니다
<template>
<el-tooltip
v-model="focusOnMobile"
manual
effect="light"
content="회원 앱과 연결되는 중요한 정보입니다. 신중히 입력해주세요."
placement="top"
/>
<PhoneNumberInput
v-model="data.mobile"
placeholder="휴대폰 번호"
:type="showMobileInput ? 'text' : 'password'"
:readonly="!showMobileInput"
@focus="focusOnMobile = true"
@blur="focusOnMobile = false"
/>
</template>
<script>
date() {
return {
focusOnMobile: false
//focus되면 툴팁이 보이고, blur되면 툴팁이 안보인다
}
}
</script>
