facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
2018年5月30日 (水) 17:04時点におけるAdmin (トーク | 投稿記録)による版

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内検索

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/