mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,302 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user