303 lines
7.9 KiB
Vue
303 lines
7.9 KiB
Vue
<template>
|
||
<view class="tm-monthCalendar " :class="[inline?'d-inline-block':'d-block']">
|
||
<view @click.stop.prevent="showpop=!showpop"><slot></slot></view>
|
||
<tm-poup :black="black_tmeme" @change="toogle" ref="pop" v-model="showpop" height="900" >
|
||
|
||
<view class="tm-monthCalendar-wk">
|
||
<view class="shadow-10">
|
||
<view class="tm-monthCalendar-title ">
|
||
<view class="text-size-g text-align-left pl-32 py-32" :class="[color_tmeme,black_tmeme?'bk':'']">
|
||
<view class="text-size-g text-white" style="font-size: 42upx;">{{ selectedDay?selectedDay.year:'' }}年</view>
|
||
<view class="text-size-lg text-white" style="font-size: 72upx;">
|
||
{{ selectedDay?selectedDay.month:'' }}
|
||
<text class="text-size-g pl-10">月</text>
|
||
</view>
|
||
</view>
|
||
<view class="tm-monthCalendar-close"><tm-icons @click="$refs.pop.close()" name="icon-times" :color="'white'"></tm-icons></view>
|
||
</view>
|
||
<view class="flex-between pa-24 " style="width: 50%;margin: auto;">
|
||
<view><tm-icons @click="preYear" name="icon-angle-left" color="grey-lighten-1"></tm-icons></view>
|
||
<view class="text-size-g text-weight-b">{{ titleVale }}</view>
|
||
<view><tm-icons @click="nextYear" name="icon-angle-right" color="grey-lighten-1"></tm-icons></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tm-monthCalendar-body">
|
||
<view class="tm-monthCalendar-bg flex-center">
|
||
<text class="text" :class="[black_tmeme ? ' opacity-5 ' : '']">{{ selectedDay?selectedDay.year:'' }}</text>
|
||
</view>
|
||
<view class="tm-monthCalendar-content">
|
||
<view style="height: 32upx;"></view>
|
||
<tm-row>
|
||
<tm-col
|
||
@click="day_danxuanclick(item, index)"
|
||
|
||
align="center"
|
||
grid="3"
|
||
v-for="(item, index) in nowData"
|
||
:key="index"
|
||
:round="6"
|
||
>
|
||
<view class="tm-monthCalendar-col flex-center flex-col round-6" :class="[item.checked === true ? color_tmeme : '']">
|
||
<text class="text-size-g" :class="[item.checked ? 'text-white' : '']">{{ item.text }}</text>
|
||
</view>
|
||
</tm-col>
|
||
</tm-row>
|
||
</view>
|
||
|
||
<view class="pa-32">
|
||
<tm-button @click="confirm" block itemeClass="round-24" :theme="btnColor ? btnColor : color_tmeme" fontSize="32">{{ btnText }}</tm-button>
|
||
</view>
|
||
</view>
|
||
</tm-poup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 月份日历
|
||
* @description 日历组件，提供节气、农历公历显示，时间范围选择等功能。
|
||
* @property {Function} confirm = [] 当选择日期确认后触发，如果未选择确认后不会触发事件。
|
||
* @property {String} btn-text = [] 底部按钮确认的文字
|
||
* @property {Boolean} inline = [] 默认true,是否内联或者块状block,内联有助于单行内想快速显示操作多个日历。非内联，适合独占一行。
|
||
* @property {String} btn-color = [primary|green|orange|red|blue|bg-gradient-blue-lighten] 默认：bg-gradient-blue-lighten底部按钮确认的背景颜色仅支持主题色名称
|
||
* @property {String} color = [primary|green|orange|red|blue] 主题默认:primary，提供是请写主题色名称
|
||
* @property {String} default-value = [] 默认时间默认:当前时间，格式：'2021-7-21'
|
||
* @property {Boolean|String} disabled = [true|false] 是否禁用，只读，默认false
|
||
* @property {Boolean|String} black = [true|false] 是否开启暗黑模式
|
||
*/
|
||
|
||
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
|
||
import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
|
||
import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
|
||
import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
|
||
import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
|
||
export default {
|
||
components:{tmIcons,tmCol,tmRow,tmButton,tmPoup},
|
||
name: 'tm-monthCalendar',
|
||
props: {
|
||
black: {
|
||
type: Boolean | String,
|
||
default: null
|
||
},
|
||
disabled: {
|
||
type: Boolean | String,
|
||
default: false
|
||
},
|
||
// 默认年月2020-7
|
||
defaultValue: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
|
||
// 底部按钮文件
|
||
btnText: {
|
||
type: String,
|
||
default: '确认'
|
||
},
|
||
// 底部按钮背景主题色名称
|
||
btnColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 主题色。
|
||
color: {
|
||
type: String,
|
||
default: 'primary'
|
||
},
|
||
|
||
value: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 跟随主题色的改变而改变。
|
||
fllowTheme:{
|
||
type:Boolean|String,
|
||
default:true
|
||
},
|
||
inline:{
|
||
type:Boolean|String,
|
||
default:true
|
||
}
|
||
|
||
},
|
||
model: {
|
||
prop: 'value',
|
||
event: 'input'
|
||
},
|
||
computed:{
|
||
black_tmeme: function() {
|
||
if (this.black !== null) return this.black;
|
||
return this.$tm.vx.state().tmVuetify.black;
|
||
},
|
||
color_tmeme:function(){
|
||
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
|
||
return this.$tm.vx.state().tmVuetify.color;
|
||
}
|
||
return this.color;
|
||
},
|
||
},
|
||
watch: {
|
||
value:function(val){
|
||
this.showpop = val;
|
||
},
|
||
|
||
|
||
defaultValue: function(val) {
|
||
let d = new Date().toLocaleDateString();
|
||
|
||
if (this.defaultValue) {
|
||
d = this.defaultValue.replace(/-/g,'/');
|
||
}
|
||
this.selectedDay = null;
|
||
this.cal = new Date(d);
|
||
this.titleVale = this.cal.getFullYear() + '年';
|
||
this.getData();
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
showpop:false,
|
||
nowData: [], //当前月份数据。
|
||
cal: null, //日历对象数据。
|
||
selectedDay: null,
|
||
titleVale: '',
|
||
dataValue:null,
|
||
};
|
||
},
|
||
mounted() {
|
||
let d = new Date().toLocaleDateString();
|
||
if (this.defaultValue) {
|
||
d = this.defaultValue.replace(/-/g,'/');
|
||
this.dataValue = this.defaultValue;
|
||
}
|
||
|
||
this.cal = new Date(d);
|
||
this.titleVale = this.cal.getFullYear() + '年';
|
||
this.getData();
|
||
this.showpop = this.value;
|
||
},
|
||
methods: {
|
||
// 取当前年份的月数据。
|
||
getData() {
|
||
let text = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
|
||
let year = this.cal.getFullYear();
|
||
let month = this.cal.getMonth();
|
||
this.nowData = [];
|
||
for (let i = 0; i < 12; i++) {
|
||
let checked = false;
|
||
if (this.selectedDay) {
|
||
checked = this.selectedDay.year == year && this.selectedDay.index == i ? true : false;
|
||
} else {
|
||
checked = month == i ? true : false;
|
||
}
|
||
let obj = {
|
||
month: i + 1,
|
||
text: text[i],
|
||
index: i,
|
||
year: year,
|
||
checked: checked
|
||
};
|
||
this.nowData.push(obj);
|
||
if (checked) {
|
||
this.selectedDay = obj;
|
||
}
|
||
}
|
||
},
|
||
|
||
confirm() {
|
||
this.$emit('confirm', this.selectedDay);
|
||
this.$refs.pop.close();
|
||
},
|
||
close(){
|
||
this.$refs.pop.close();
|
||
},
|
||
toogle(e){
|
||
let t = this;
|
||
if(e){
|
||
this.$nextTick(function(){
|
||
if(this.dataValue != this.defaultValue){
|
||
this.dataValue = this.defaultValue.replace(/-/g,'/');
|
||
}
|
||
})
|
||
}
|
||
this.$emit('input',e);
|
||
this.$emit('update:value',e);
|
||
},
|
||
|
||
|
||
preYear() {
|
||
if (!this.cal) return;
|
||
this.cal.setFullYear(this.cal.getFullYear() - 1);
|
||
this.titleVale = this.cal.getFullYear() + '年';
|
||
this.getData();
|
||
},
|
||
nextYear() {
|
||
if (!this.cal) return;
|
||
this.cal.setFullYear(this.cal.getFullYear() + 1);
|
||
this.titleVale = this.cal.getFullYear() + '年';
|
||
this.getData();
|
||
},
|
||
day_danxuanclick(item, index) {
|
||
if (this.disabled) {
|
||
this.$tm.toast('不可选择');
|
||
return;
|
||
}
|
||
let d = { ...item };
|
||
this.selectedDay = item;
|
||
this.getData();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tm-monthCalendar-col {
|
||
width: 100%;
|
||
height: 120upx;
|
||
// text-align: center;
|
||
// line-height: 80upx;
|
||
line-height: 0;
|
||
position: relative;
|
||
.text {
|
||
position: absolute;
|
||
bottom: 14upx;
|
||
}
|
||
}
|
||
.textOn {
|
||
color: #1976d2 !important;
|
||
}
|
||
.tm-monthCalendar-wk {
|
||
width: 100%;
|
||
.tm-monthCalendar-title {
|
||
position: relative;
|
||
|
||
.tm-monthCalendar-close {
|
||
position: absolute;
|
||
top: 32upx;
|
||
right: 32upx;
|
||
}
|
||
}
|
||
}
|
||
.tm-monthCalendar-body {
|
||
position: relative;
|
||
|
||
.tm-monthCalendar-bg {
|
||
height: 400upx;
|
||
|
||
.text {
|
||
font-size: 200upx;
|
||
color: rgba(225, 225, 225, 0.4);
|
||
}
|
||
}
|
||
|
||
.tm-monthCalendar-content {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
</style>
|