77 行
2.6 KiB
Vue
77 行
2.6 KiB
Vue
|
<template>
|
||
|
<span>
|
||
|
<div class="row body">
|
||
|
<div class="col-md-3"><b>種類</b></div>
|
||
|
<div class="col">
|
||
|
<div class="form-check">
|
||
|
<input class="form-check-input" name="isPost" type="radio" id="type-post" :value="1" v-model="choice">
|
||
|
<label class="form-check-label" for="type-post">ポスト</label>
|
||
|
</div>
|
||
|
<div class="form-check">
|
||
|
<input class="form-check-input" name="isPost" type="radio" id="type-page" :value="0" v-model="choice">
|
||
|
<label class="form-check-label" for="type-page">ページ</label>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div v-if="choice === 1">
|
||
|
<div class="row body">
|
||
|
<div class="col-md-3"><b>公開設定</b></div>
|
||
|
<div class="col">
|
||
|
<select id="public_status" name="public_status" class="form-control" v-model="pub">
|
||
|
<option :value="0">公開</option>
|
||
|
<option :value="1">スケジュールを設定</option>
|
||
|
<option :value="2">限定公開</option>
|
||
|
<option :value="3">非公開</option>
|
||
|
<option :value="4">下書き</option>
|
||
|
</select>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="row body" v-if="pub === 1">
|
||
|
<div class="col-md-3"><b>公開日時</b></div>
|
||
|
<div class="col">
|
||
|
<date-picker name="publish_date" v-model="pubdate" :config="options" id="publish_date" />
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="row body" v-else>
|
||
|
<div class="col-md-3"><b>メニュー</b></div>
|
||
|
<div class="col">
|
||
|
<div class="form-group form-check">
|
||
|
<input type="checkbox" name="isMenu" class="form-check-input" id="menu" v-model="menu">
|
||
|
<label class="form-check-label" for="menu">メニューに表示する</label>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</span>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import datePicker from 'vue-bootstrap-datetimepicker';
|
||
|
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
|
||
|
|
||
|
export default {
|
||
|
components: { datePicker },
|
||
|
props: { c: String, p: String, m: null, d: null },
|
||
|
data: function () {
|
||
|
return {
|
||
|
options: { format: 'YYYY年MM月DD日 HH:mm:ss', locale: 'ja', useCurrent: true, showClear: true, showClose: true },
|
||
|
choice: Number(this.c),
|
||
|
pub: Number(this.p),
|
||
|
menu: this.m,
|
||
|
pubdate: this.d
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
choice: function (v) {
|
||
|
this.choice = Number(this.choice);
|
||
|
if (this.choice === 0) this.pub = 0;
|
||
|
else this.menu = false;
|
||
|
},
|
||
|
pub: function (v) {
|
||
|
this.pub = Number(this.pub);
|
||
|
if (this.pub !== 1) this.pubdate = null;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|