Vuetify는 별다른 설정없이 개선된 User Interface를 사용할 수 있는 방법을 제공하는 패키지이다. 이를 이용한 Dialog 표시 방법을 보여준다.
참고로, 이 글에서 소개할 다이얼로그는 모달(modal)방식이다. Vuetify dialog는 다양한 스타일의 다이얼로그를 간단한 명령으로 생성할 수 있다.
개발 환경
다음과 같이 개발 환경을 설정한다.
npm install @vue/cli -g
vue --version
Vuetify는 3.0 버전 이상이어야 제대로 동작한다.
프로젝트 생성
다음과 같이 프로젝트를 생성한다.
vue create app
cd app
vue add vuetify
npm install vuetify-dialog
생성된 폴더 내 main.js 에 다음과 같이 코딩한다.
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VuetifyDialog from 'vuetify-dialog'
Vue.config.productionTip = false
Vue.use(VuetifyDialog, {
context: {
vuetify
}
})
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
<template>
...
<button v-on:click="greet">Greet</button>
...
</template>
<script>
export default {
name: 'HelloWorld',
methods: {
greet: function () {
this.$dialog.confirm({
text: "What's your name? <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Natgeologo.svg/1200px-Natgeologo.svg.png' height=100/><input value='input'></input>", title: 'Warning'});
}
},
...
</script>
이제 서버를 실행한다.
npm run serve
결과는 다음과 같다.
Greet 버튼을 클릭하면, 다음과 같이 모달 다이얼로그가 실행된다.
레퍼런스
댓글 없음:
댓글 쓰기