CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다. 

모달팝업을 만드는 방법을 포스팅하려고 합니다.

추가적으로 바깥 영역을 클릭했을 때 모달이 사라지게 하고 싶습니다.

1) Modal Show 버튼을 클릭 시 Modal Popup 출력.
2) 바깥영역, close 버튼을 클릭 시 Modal Popup 숨김.

이 두 가지 동작이 가능하게 하려고합니다.

// App.vue > 모달 창을 포함하고 있는 메인 뷰
<template>
  <div>
    <button type="button" @click="showModal">Modal Show</button>
    <ModalView
      v-show="showStatus"
      v-model="showStatus"
      @closeModal="closeModal"
    />
  </div>
</template>

<script>
import ModalView from "./Modal.vue";

export default {
  components: {
    ModalView,
  },
  data() {
    return {
      showStatus: false,
    };
  },
  methods: {
    showModal() {
      this.showStatus = true;
    },
    closeModal() {
      this.showStatus = false;
    },
  },
};
</script>

showStatus 라는 ref 를 기본 값으로 false 로 놓고, true가 되었을 때만 팝업이 뜨도록 처리하려고 합니다.

이벤트 핸들러가 호출하는 메서드로 showModal() 과 closeModal() 을 생성하였습니다.

직관적으로 show는 show를, close는 close를 작성하여 shoStatus 의 값을 true/false로 변경하겠습니다.

// Modal.vue
<template>
  <div class="modal-view" @click="closeModal">
    <div class="modal-view-area" @click.stop="">
      <h2 class="modal-text-header">Modal View</h2>
      <div class="block-content"></div>
      <div class="modal-bottom">
        <button class="modal-btn" @click="closeModal">Close</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: { showStatus: Boolean },
  methods: {
    closeModal() {
      this.$emit("closeModal");
    },
  },
};
</script>

props로 showStatus를 전달받아 바깥영역, 닫기 버튼을 클릭하면 $emit을 통해 closeModal 이벤트를 발생시킵니다. 

그리고 App.vue에서 closeModal 메서드를 호출하게 되어 모달 팝업을 숨김처리합니다.

다른건 다 그렇다고 치고, 코드를 자세히 살펴보시면, 특별한 처리를 하지 않았는데, 모달창의 영역을 클릭하였을 때는 팝업이 안닫히지만, 그 외의 영역을 클릭하였을 때는 닫히는 것을 볼 수 있습니다.

처음에는 css의 z-index 를 설정하면 영역 컨트롤이 가능한줄 알고 열심히 z-index를 설정했었죠.

그러나 vue.js 공식 문서에 숨겨져있는 한 내용을 확인하게되었습니다.

바로 이 부분입니다.

<div class="modal-view" @click="closeModal">
    <div class="modal-view-area" @click.stop="">

바로 @click.stop 입니다. 이게 바로 핵심.

@click.stop을 작성해준 부분의 영역은 클릭이벤트 전부를 멈추게 만듭니다. 

추가적으로 button에 @click 이벤트 핸들러를 제공한것처럼 명시하지 않는다면 말이죠.

이렇게 작성해주시면,  모달 영역을 클릭해도 닫히지 않는 모습을 보여줍니다. 

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

Vue.js 에서 클릭 이벤트 (click event) 로 한 개의 이벤트가 아닌 여러 개의 이벤트를 주고 싶을 때 사용할 수 있다.
=> 당연히 method 실행도 가능하다.

버튼을 누르면 2개의 알림창( alert() )이 출력되도록 하겠다.

<template>
    <main>
        <button type="button" @click="event1(), event2()">다중이벤트버튼</button>
    </main>
</template>
<script>
export default {
    name: '',
    components: {},
    methods: {
        event1() {
            alert('event1')
        },
        event2() {
            alert('event2')
        }
    }
}
</script>

콤마로 구분해놓으면 첫번째 실행이 끝난 후 실행이 된다.

안녕하세요 상훈입니다.

Kotlin 에서 button 클릭 시, 혹은 image button 클릭 시,
Toast 메시지를 출력하는 방법에 대해 포스팅 하겠습니다.

var contentToast = Toast.makeText(this, "Content button clicked", Toast.LENGTH_SHORT)
contentToast.show()

toast의 메시지 생성 방법은 위와 같습니다.
변수에 toast 메시지 내용을 할당하고, show() 함수를 통해 해당 내용을 체이닝하여 출력하는 방식.

예제1)

버튼 클릭 시, toast 메시지 출력

private lateinit var binding: ActivityMainBinding

onCreate(){

  binding.contentBtn.setOnClickListener {
      var contentToast = Toast.makeText(this, "Content button clicked", Toast.LENGTH_SHORT)
      contentToast.show()
  }
       
}

contentBtn이라는 id 를 가진 Image Button에 대한 클릭 이벤트 안에 Toast 메시지를 출력하도록 작성하였습니다.

예제2) : 좋아요 버튼

이미지 버튼을 2개 준비합니다. [ 클릭 전, 클릭 후 ] 의 각각의 이미지를 나타냅니다.

binding.heartBtn.setOnClickListener {
    if (!liked) {
        binding.heartBtn.setBackgroundResource(R.drawable.checkedheart);
        var likeToast = Toast.makeText(this, "Liked!!", Toast.LENGTH_SHORT)
        likeToast.show()
    } else {
        binding.heartBtn.setBackgroundResource(R.drawable.heart);
        var likeToast = Toast.makeText(this, "UnLiked!!", Toast.LENGTH_SHORT)
        likeToast.show()
    }
    liked = !liked; // reverse
}

클릭 시 toast 메시지 출력과 빈 하트가 빨간 하트로 변경되게 설정하였습니다.

vue로 따지자면 v-if( ! liked ) / else 가 되겠네요.

안녕하세요 상훈입니다.

Vue.js에서 Javascript의 onclick addEventListener와 같이 onclick 이벤트를 주는 방법을 설명하겠습니다.

뷰는 매우 간단하더군요.

0. 기본문법

<button v-on:click=""></button>
<button @click=""></button>

v-on:click 이 기본, 

그리고 @click이 축약 버전입니다. 입맛에 맞게 사용하시면 됩니다.

1. 익히 알고 있는 함수 호출하기

2. 간단한 연산 결과값 도출

1. 함수 호출하기

<button @click="LetsGoVue"></button>

<script>
export default {
  name: 'App',
  data() {},
  methods: {
  	LetsGoVue() {
    	console.log('hello')
    }
  }

</script>

2. 연산 결과값 도출 [ v-if, v-on:click ] 

예시) 모달창 팝업

버튼 클릭 시, 모달창이 뜨고 사라지게 하는 내용을 구현하겠습니다.

<div class="black-bg" v-if="modalStatus">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button class="modal-close" @click="modalStatus = 0 ">닫기</button>
    </div>
</div>

모달레이아웃 div 부분입니다. 

modalStatus라는 변수가 1일 때만 해당 내용이 존재하게 하는 조건문[ v-if ] 으로 구현하였습니다.

button을 클릭시 modalStatus라는 변수에 0을 대입하는 것으로 구현하였습니다.

script 내 data 내에 modalStatus 변수의 기본값을 0으로 설정하여 처음 렌더링 되었을 때, 보이지 않게 설정하였습니다.