Javascript/vue/node/ライブラリ/modal

modalとは

lightbox(modal)系プラグイン

install

npm install vue-js-modal --save

sample

js-init

import VModal from 'vue-js-modal'
Vue.use(VModal)

js-event

methods: {
  show () {
    this.$modal.show('hello-world');
  },
  hide () {
    this.$modal.hide('hello-world');
  }
}

html

<modal name="hello-world">
  hello, world!
</modal>

中央に60%でスクロール許可表示

<modal name="hello-world" height="auto" width="60%" :scrollable="true">
</modal>

vue-js-modal公式

demo:http://vue-js-modal.yev.io/

https://github.com/euvl/vue-js-modal/blob/master/README.md

vue-modal系は他にいっぱいある

https://vuejsexamples.com/tag/modal/