【Vue.js】 BootstrapのModalをVueのコンポーネントにしてみた例

Tweet

Category JavaScript / Tagged vue 2017/02/12

問題

vue.jsでbootstrapのmodalっぽいコンポーネントを作りたい。

答え

きちんとやると、BootstrapのJavaScriptがやっていることを組み込んだ方がよいと思うけど、

vue-strap の例 – https://github.com/yuche/vue-strap/blob/master/src/Modal.vue

簡単にそれっぽいものを自作するとこんな感じでどうでしょう。

● JavaScript

Vue.component('modal', {
	props: ['show'],
	template: '<transition'
				+ ' v-on:enter="function(el){$(el).css(\'display\', \'block\')}"'
				+ ' v-on:after-enter="function(el){$(el).addClass(\'in\')}"'
				+ ' v-on:leave="function(el){$(el).removeClass(\'in\')}"'
				+ ' v-on:after-leave="function(el){$(el).css(\'display\', \'none\')}">'
		+ '<div class="modal fade" v-show="show">'
			+ '<div class="modal-dialog">'
				+ '<div class="modal-content">'
					+ '<div class="modal-header"><button type="button" class="close" v-on:click="$emit(\'end\')"><span>&times;</span></button><slot name="header"></slot></div>'
					+ '<div class="modal-body"><slot name="body"></slot></div>'
					+ '<div class="modal-footer"><slot name="footer"></slot></div>'
				+ '</div>'
			+ '</div>'
		+ '</div>'
	+ '</transition>'
});

● CSS

bootstrap.css 読み込んでおいてください

● HTML

<modal v-on:end="alert('中の閉じるボタンを押された → ダイアログ終了処理とかshow=falseとか');" v-bind:show="show">>
	<div slot="header">
		<h4 class="modal-title">モーダルのタイトル モーダルのタイトル</h4>
	</div>
	<div slot="body">
		<p>モーダルの中身</p>
		<p>モーダルの中身</p>
		<p>モーダルの中身</p>
		<p>モーダルの中身</p>
		<p>モーダルの中身</p>
	</div>
	<div slot="footer">
		<button type="button" v-on:click="alert('ダイアログ終了処理とかshow=falseとか');" class="btn btn-primary">実行</button>
	</div>
</modal>