vue 实现12个月的平铺式日历插件
实现的基本样式如下:使用方法1、安装插件npm install vue-material-year-calendar --save2、导入插件import YearCalendar from 'vue-material-year-calendar'3、代码实现<template><YearCalendarv-model="year":activeDates.sync="activ
·
实现的基本样式如下:
使用方法
1、安装插件
npm install vue-material-year-calendar --save
2、导入插件
import YearCalendar from 'vue-material-year-calendar'
3、代码实现
<template>
<YearCalendar
v-model="year"
:activeDates.sync="activeDates"
@toggleDate="toggleDate"
prefixClass="your_customized_wrapper_class"
:activeClass="activeClass"
></YearCalendar>
</template>
<script>
import YearCalendar from 'vue-material-year-calendar'
export default {
components: { YearCalendar },
data () {
return {
year: 2019,
activeDates: [
{ date: '2019-02-13' },
{ date: '2019-02-14', className: 'red' },
{ date: '2019-02-15', className: 'blue' },
{ date: '2019-02-16', className: 'your_customized_classname' }
],
activeClass: '',
}
},
methods: {
toggleDate (dateInfo) {
console.log(dateInfo) // { date: '2010-10-23', selected: true }
}
}
}
</script>
<style lang="stylus">
.your_customized_wrapper_class
background-color: #0aa
color: white
&.red
background-color: red
color: white
&:after
background-image url('./assets/baseline-remove_circle-24px.svg')
background-size 100% 100%
&.blue
background-color: #0000aa
color: white
&.your_customized_classname
background-color: yellow
color: black
</style>
原文参考地址:https://github.com/nono1526/vue-material-year-calendar#readme
更多推荐
已为社区贡献9条内容
所有评论(0)