# @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>
#vue
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 3/25/2024, 12:16:11 PM