何をするか？
WEBサービス内でコンテンツを削除したりする際にモーダル画面を出す時は
Vue.jsでやったりする方が楽だったりします。
その際にaxiosを使用して削除実行後に特定のページ、または同一ページに遷移した後に
フラッシュメッセージを出したいとします。いや、出したい。
*削除ボタン押してモーダルが出るこんなイメージ
削除用ルーティング
web.php
Route::post('/delete/{id}','DeleteController@idea_delete')->name('delete');
下記の様に削除ボタンがあったとしましょう。
今回は簡単な例なのでController内の記述は省きます
propsで削除する対象のidとweb.phpに記載してるルーティングを記載
ちなみに文字列をpropsで渡す場合は「:」付けるとエラーになります。
item_detail.blade.php
<div id="delete" class="p-ideaform__btngroup">
<delete-component :id={{ $item->id }} path={{"/delete/"}}></delete-component>
</div>
propsの値を渡すvueファイルが下
DeleteButton.vue
<template>
<div>
<div>
<!-- クリックしたらモーダル開きます -->
<a @click="openModal" class="c-card__btn"
>削除</a
>
</div>
<!-- 削除押した際のモーダル -->
<transition name="modal">
<div class="p-modal__body" v-if="modalFlg">
<h3>削除しますか？</h3>
<img :src="'/images/hatena.png'" alt="" class="p-modal__image" />
<div class="p-modal__btn">
<span class="c-btn u-green p-modal__btn--no" @click="closeModal">NO</span>
<button class="c-btn u-blue p-modal__btn--yes" @click="deleteItem(id)">YES</button>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
//idにはbladeテンプレートから渡されたid。pathには「/delete/」が入ってきますね。
props: ["id","path"],
data: function () {
return {
//最初はモーダルは閉じておくので初期値はfalse
modalFlg: false,
};
},
methods: {
//削除ボタンクリックしたらモーダル開く為のメソッドを定義
openModal() {
this.modalFlg = true;
},
//NOボタンクリックしたらモーダル閉じる為のメソッドを定義
closeModal() {
this.modalFlg = false;
},
//モーダルの「YES」を押したら削除
deleteItem(id) {
//pathの中身は「/delete/id(propsで受け取ったidの値)」になります。
const path = this.path + id;
//一つ下で定義してあるaxiosメソッドにpathを渡して実行
this.axios(path);
},
axios(path) {
axios
.post(path)
.then((res) => {
//「https://hoge.com/mypage」というURLなら
//location.protocolは「https:」を取得
//location.hostnameは「hoge.com」を取得
//location.replace()は指定したパスに遷移させるJSのメソッド。なので
//下記は「https://hoge.com/mypage」へ遷移させる。
const link =location.protocol + "//" + location.hostname + "/mypage"
// window.sessionStorage.setItem([プロパティ名],[値])でセッションに保存できる。
window.sessionStorage.setItem(['flash_message'],['アイデアを削除しました']);
location.replace(link);
}
})
.catch(function (err) {
console.log(err);
});
},
},
};
</script>
それでapp.blade.phpなどに実際のフラッシュメッセージのマークアップ
app.blade.php
@include('layouts.head')
<body>
<div id="app" class="l-main js-main">
<!-- この中にフラッシュメッセージ -->
<div class="js-delete-message c-flash">
<span class="js-delete-text c-flash_text"></span>
</div>
@yield('content')
</div>
@include('layouts.footer')
</body>
</html>
後はjQueryで操作できる
flash.js
const msg = window.sessionStorage.getItem(['flash_message']);
//もしセッションにメッセージがあればスライドダウンさせる
if(msg !== null){
$('.js-delete-text').html(msg);
$('.js-delete-message').slideDown();
//ほんで3秒後にしまってセッション削除
//セッションの削除はwindow.sessionStorage.removeItem([プロパティ名])
setTimeout(()=>{
$('.js-delete-message').slideUp();
window.sessionStorage.removeItem(['flash_message']);
},3000)
}
おまけのCSS
style.scss
//フラッシュメッセージ
.c-flash{
background: rgb(157, 241, 223);
opacity: .8;
width: 100%;
height: auto;
min-height: 50px;
position: absolute;
text-align: center;
font-weight: bold;
padding: 16px 10px;
z-index: 300;
display: none;
overflow-wrap: break-word;
}
//気になる解除を押した時に表示されるモーダル
.p-modal{
&__body{
background: #ddd;
padding: 18px 10px;
position: fixed;
z-index: 10;
top: 10%;
left: 50%;
width: 40%;
text-align: center;
transform: translateX(-50%);
@include mq(ls){
width: 70%;
}
h3{
text-align: center;
}
@include mq(sp){
width: 90%;
}
}
&__image{
width: 80%;
margin: auto;
display: block;
}
&__btn{
display: flex;
width: 100%;
justify-content: space-around;
margin-top: 16px;
&--no{
@include mq(ls){
padding: 24px 36px;
}
}
&--yes{
@include mq(ls){
padding: 24px 36px;
}
}
}
}
Vue.jsのtransitionアニメーション
vue.css
//Vue.jsのtransition
.modal-enter-active {
//要素が挿入される『前』に追加される。アニメーション終わったら削除
transition: all 0.5s;
opacity: 0;
transform: translate(-50%, 20px);
}
.modal-enter-to {
//要素が挿入された『後』に追加される。アニメーション終わったら削除
transition: all 0.5s;
opacity: 1;
transform: translate(-50%, 0);
}
.modal-leave-active {
//要素が削除される『前』に追加。アニメーション終わったら削除
transition: 0.6s;
opacity: 1;
transform: translate(-50%, 0);
}
.modal-leave-to {
//要素が削除された『後』に追加。アニメーション終わったら削除
transition: 0.6s;
opacity: 0;
transform: translate(-50%, 20px);
}
今回は以上です。
ちょっと長いですが、処理は単純。
特に削除機能は結構使用するのでvueコンポーネントで作成しておくと
使い勝手良いですね。
スタイルを変えたい時等はpropsでクラス名渡してあげたりすればOK