9. [vue-js-modal] Modal | vue.js 모달 드래그

드래그도 가능함

 

---

1. vue-js-modal 을 install 받아준다 

npm install vue-js-modal --save

 

https://www.npmjs.com/package/vue-js-modal

vue-js-modal

---

2. main.js에 vue-js-modal 플러그인을 추가해준다.

import Vue from 'vue';
import App from './App.vue';
import VueJsModal from 'vue-js-modal';

Vue.use(VueJsModal, {
  dialog: true,
  dynamicDefaults: {
    draggable: true,
  },
});

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
}).$mount('#app');

---

3. vue 파일에 이 코드를 넣어준다

<template>
   <div id="app">
    <button v-on:click="show">show!</button>
    <modal name="hello-world" :draggable="true">
      <p>hello, world!</p>
      <button v-on:click="hide">hide</button>
    </modal>
  </div>
</template>

<script>
export default {

  data() {
    return {};
  },
  mounted() {},
  methods: {
    show(){
      this.$modal.show('hello-world');
    },
    hide(){
      this.$modal.hide('hello-world');
    },  
};
</script>

<style lang="scss" scoped></style>

---

4. 완성. CSS는 프로젝트에 맞게 만들어서 쓰면 끝 

---

5. 이건 참고한 코드펜 주소

- vue.js 에서 드래그 되는 모달창 만들려고 검색하다가 찾은건데

- 코드만 있고 vue-js-modal 을 install 받아야 하는게 없어서 검색하다가 찾은 방법을 포스팅 해 본다

- 여기 들어가서 보면 드래그 되는 Modal 창 미리 확인해 볼 수 있음

 

https://codepen.io/kabanoki/pen/MRXNGy

Vue.js modal draggable