반응형
단순 대화 상자와 비슷하지만, 외부에서 터치하거나 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
반응형
'프론트엔드 (Front-End) > VUE.js' 카테고리의 다른 글
<Node.js> 설치 및 버전 확인 (0) | 2022.10.13 |
---|---|
<Vue.js> node.js, nvm, npm (0) | 2022.10.13 |
[Vue.js] 파라미터에서 데이터 받아와 이벤트 수행 (0) | 2022.06.30 |
Vue.js 버튼 클릭 이벤트 (0) | 2022.06.30 |
Excel 구현 (.xlsx) (0) | 2022.06.22 |