网站开发大作业报告,网站规划的意义,东莞建设网招标信息,网站外部推广文章目录1. 安装scss2. 安装日历组件3. 安装提示组件4. 注册组件5. 页面6. 效果图1. 安装scss
npm i -D sass-loader8.0.2
npm i node-sass4.14.12. 安装日历组件
npm i vue-calendar-component --save3. 安装提示组件
npm install --save vue-component-toast4. 注册组件
…
文章目录1. 安装scss2. 安装日历组件3. 安装提示组件4. 注册组件5. 页面6. 效果图1. 安装scss
npm i -D sass-loader8.0.2
npm i node-sass4.14.12. 安装日历组件
npm i vue-calendar-component --save3. 安装提示组件
npm install --save vue-component-toast4. 注册组件
main.js
import toast from vue-component-toast
import vue-component-toast/dist/css/vc-toast.min.css// Vue.use(toast, [global-option])
Vue.use(toast)5. 页面
templatediv classcontentCalendarrefCalendar:markDateMorearr:markDatearr2v-on:isTodayclickTodayagoDayHide1530115221v-on:choseDayclickDayv-on:changeMonthchangeDate/Calendarbrdiv classchoseMonth-style stylebackground-color: #398ade; clickChoseMonthChock 点击跳到2022-01-21/div/div
/templatescript
import Calendar from vue-calendar-component;export default {data() {return {arr2: [],arr: [{date: 2022/01/1,className: mark1},{date: 2022/01/13,className: mark2}]};},components: {Calendar},methods: {clickDay(data) {console.log(选中了, data); //选中某天this.$toast(选中了 data);},clickToday(data) {console.log(跳到了本月今天, data); //跳到了本月},changeDate(data) {this.$toast(切换到的月份为 data);console.log(左右点击切换月份, data); //左右点击切换月份},ChoseMonthChock() {this.$refs.Calendar.ChoseMonth(2018-12-13); //跳到12月12日选中12月12日}},created() {function format(date, index) {date new Date(date);return ${date.getFullYear()}-${date.getMonth() 1}-${index};}// setTimeout(() {// this.arr [// {// date: format(new Date(), 3),// className: mark1// },// {// date: format(new Date(), 12),// className: mark2// }// ];// this.arr.push({// date: format(new Date(), 15),// className: mark1// });// }, 300);}
};
/scriptstyle scoped
/* 重写css部分 start */
/deep/ .wh_content_item {color: black;
}/deep/ .wh_top_changge li {color: black;
}/deep/ .wh_jiantou1 {border-top: 2px solid #030303;border-left: 2px solid #030303;
}/deep/ .wh_jiantou2 {border-top: 2px solid #030303;border-right: 2px solid #030303;
}/deep/ .wh_jiantou1 {background-color: white;
}/deep/ .wh_content_all {background-color: #ffffff
}/deep/ .wh_content_item .wh_isToday {background-color: #2b85e4
}/deep/ .wh_content_item .wh_chose_day {background-color: #9acafc;
}/* 重写css部分 end */h3 {text-align: center;width: 90%;margin: auto;
}.choseMonth-style {margin: auto;width: 220px;height: 44px;line-height: 44px;/*background: #0fc37c;*/color: #fff;font-size: 17px;text-align: center;margin-top: 20px;
}.wh_container .mark1 {background-color: orange;
}.wh_container .mark2 {background-color: blue;
}.wh_content_item .wh_isMark {background: orange;
}
/style6. 效果图
