----这里的js将thead
格式化为MONTH YEAR,可以通过两个按钮进行更改。
----我有一个设计,可以显示月份,日期,假期名称及其说明。
----我有一个如何实现的想法,但是由于我是一个初学者,缺乏资源使我丧命。我正在努力从哪里开始。
<script>
// install from terminal [npm install moment --save]
import moment from 'moment'
export default {
data() {
return {
today: null,
}
},
methods: {
todayMonth() {
let date = moment().format('MMMM YYYY')
this.today = date
},
downMonth() {
let sub = moment(new Date(this.today)).subtract(1, 'M').format('MMMM YYYY')
this.today = sub
},
upMonth() {
let sub = moment(new Date(this.today)).add(1, 'M').format('MMMM YYYY')
this.today = sub
},
},
mounted() {
this.todayMonth()
}
}
</script>
<style>
#p1{
font-style: italic;
font-weight: 300;
color: #afafaf;
margin-top: -10px;
}
#date-head{
margin-top: 8px;
}
#Month_Date{
display: table-cell;
padding: 0.01em 16px;
background-color:#F55E1C;
color: white;
text-align: center;
width: 10%;
box-shadow: 0px 15px 20px grey;
}
#Month_Date_0{
display: table-cell;
padding: 0.01em 16px;
background-color:#F58523;
color: white;
text-align: center;
width: 10%;
height: 100%;
box-shadow: 0px 15px 30px grey;
}
#Holiday-Description{
display: table-cell;
padding: 0.01em 16px;
background-color: rgb(233, 232, 232);
color: #000;
width: 100%;
height: 100%;
box-shadow: 0px 15px 30px grey;
}
#b_container2 {
animation: float .6s ease-in;
margin-top: 15px;
margin-left: -20px;
}
#b_container1 {
width: 96%;
margin-top: 30px;
background-color: #F55E1C;
color: white;
padding: 13px;
font-weight: 500;
margin-left: -8.5px;
}
#t_head{
margin-top: -12px;
}
#icon_chev_up:hover, #icon_chev_down:hover{
cursor: pointer;
color: grey;
}
.icon_chev{
float: right;
margin-top: -38.5px;
margin-left: 200px;
font-size: 200%;
}
@keyframes float {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>