【간단】vue-click-outside 라이브러리를 사용해 보았다

와츠요 이라고 합니다.
연말 연시에 만들었던 ToDo 앱으로 매우 유용한 라이브러리를 소개합니다.

'vue-click-outside'를 사용하려는 이유

작성한 ToDo 앱에서 모달 윈도우를 사용하고 그것을 닫는 동작을 원했습니다

"☓"로 닫는 동작이라면 잘못된 탭이나 잘못된 클릭을 초래할 수 있습니다

실제로 "vue-click-outside"를 사용한 앱은 여기입니다.



이 이미지에서 말하면 검은 부분을 누르거나 클릭하면 모달이 닫힙니다.

실제 코드

ToDo.vue

<template>
---中略---
  <div class="modal" :class="{'is-active':isActive}"> //isActiveがtrueならモーダルを表示
    <div v-click-outside="close" @click="close" class="modal-background"></div>
    <div class="modal-content">
      <div class="box">
        <div class="content has-text-centered">
          <div class="control">
            <form class="field is-grouped" @submit.prevent="Add">
              <div class="control is-expanded">
                <input class="input is-rounded" type="text" v-model="newItem" placeholder="Title">
                <textarea class="textarea" type="text" v-model="newContent" style="white-space: pre;" placeholder="Todo"></textarea>
                <input class="button is-info is-rounded" type="submit" value="Add">
              </div>
            </form>
          </div>
          <span>&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
---中略---
</template>
<script>
import ClickOutside from 'vue-click-outside' //import
  export default {
    name: 'ToDo',
    newItem: "",
    props: ["user"],
    data () {
      return {
        todos: [],
        components: [],
        isActive: false //初期画面ではモーダルを表示しないためfalse
      }
    },
---中略---
    methods: {
      close: function () {
        ---中略---
        this.isActive = !this.isActive
      }
    },
    mounted () { 
      this.popupItem = this.$el //popupItemを使用して、イベントの外側をクリックしないようにする
    },
    directives: { //directivesオプションを使用することにより、ローカルディレクティブに登録されるため、機能を使うことができる
      ClickOutside 
    }
---中略---
</script>

위 파일의 스크립트 내에서 vue-click-outside를 가져오면 v-click-outside="close"는 모달 창의 범위를 벗어나 클릭하여 모달을 닫는 기능을 제공할 수 있습니다.

methods 옵션 내에 있는 close 함수는 초기 data로 false로 설정한 isActive를 !isActive로, 즉 true로 변경하는 것으로 모달을 닫는 처리가 완성됩니다.

감상

실현하고 싶은 기능이 벌써 라이브러리화하고 있으면(자) 엄청 편하구나라고 몸을 가지고 실감했습니다.

자신도 가까운 장래에 도서관을 만들고 싶다 ...!

트위터 , 코멘트에 대한 피드백 기다리고 있습니다! !