「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) j...」) |
|||
| 行23: | 行23: | ||
<modal name="hello-world"> | <modal name="hello-world"> | ||
hello, world! | hello, world! | ||
| + | </modal> | ||
| + | |||
| + | ==中央に60%でスクロール許可表示== | ||
| + | <modal name="hello-world" height="auto" width="60%" :scrollable="true"> | ||
</modal> | </modal> | ||
2018年5月30日 (水) 17:04時点における最新版
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
