<Vue.js> Dialog 밖의 영역 눌러도 닫히지 않도록 하는 방법 (by vuetify)

단순 대화 상자와 비슷하지만, 외부에서 터치하거나 esc 키를 누를 때 해제되지 않습니다.

 

 

 

 

 

ESC 나  밖의 영역을 누를 시에도 모달이 사라지지 않는다. 

 

<template>
  <v-row justify="center">
    <v-dialog
      v-model="dialog"
      persistent   // <= 해당 옵션을 넣어줘야 기능이 구현된다.
      max-width="290"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Open Dialog
        </v-btn>
      </template>
      <v-card>
        <v-card-title class="text-h5">
          Use Google's location service?
        </v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="green darken-1"
            text
            @click="dialog = false"
          >
            Disagree
          </v-btn>
          <v-btn
            color="green darken-1"
            text
            @click="dialog = false"
          >
            Agree
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false, //다이얼로그 기본 FALSE , TRUE 일 경우 페이지 로드시 자동으로 모달 오픈
      }
    },
  }
</script>

 

참고 :  https://vuetifyjs.com/en/components/dialogs/#transitions