99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<template>
|
|
<view
|
|
:id="tId"
|
|
:class="' ' + tClass + ' ' + classPrefix + ' '+(switchMode !== 'none' ? classPrefix + '__with-action' : '')"
|
|
>
|
|
<view
|
|
v-if="switchMode !== 'none'"
|
|
:class="classPrefix + '__action'"
|
|
>
|
|
<view
|
|
v-if="switchMode === 'year-month'"
|
|
:class="utils.cls(classPrefix + '__icon', [['disabled', preYearBtnDisable]])"
|
|
:data-disabled="preYearBtnDisable"
|
|
data-type="pre-year"
|
|
@click="handleSwitchModeChange"
|
|
>
|
|
<t-icon name="chevron-left-double" />
|
|
</view>
|
|
<view
|
|
:class="utils.cls(classPrefix + '__icon', [['disabled', prevMonthBtnDisable]])"
|
|
:data-disabled="prevMonthBtnDisable"
|
|
data-type="pre-month"
|
|
@click="handleSwitchModeChange"
|
|
>
|
|
<t-icon name="chevron-left" />
|
|
</view>
|
|
</view>
|
|
<view :class="classPrefix + '__title'">
|
|
{{ title }}
|
|
</view>
|
|
<view
|
|
v-if="switchMode !== 'none'"
|
|
:class="classPrefix + '__action'"
|
|
>
|
|
<view
|
|
:class="utils.cls(classPrefix + '__icon', [['disabled', nextMonthBtnDisable]])"
|
|
:data-disabled="nextMonthBtnDisable"
|
|
data-type="next-month"
|
|
@click="handleSwitchModeChange"
|
|
>
|
|
<t-icon name="chevron-right" />
|
|
</view>
|
|
<view
|
|
v-if="switchMode === 'year-month'"
|
|
:class="utils.cls(classPrefix + '__icon', [['disabled', nextYearBtnDisable]])"
|
|
:data-disabled="nextYearBtnDisable"
|
|
data-type="next-year"
|
|
@click="handleSwitchModeChange"
|
|
>
|
|
<t-icon name="chevron-right-double" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import TIcon from '../icon/icon.vue';
|
|
import utils from '../common/utils.wxs';
|
|
import props from './calendar-header.props';
|
|
import { getMonthTitle } from './computed';
|
|
|
|
export default {
|
|
name: 'TCalendarHeader',
|
|
options: {
|
|
styleIsolation: 'shared',
|
|
},
|
|
components: {
|
|
TIcon,
|
|
},
|
|
props: {
|
|
...props,
|
|
},
|
|
emits: [
|
|
'handleSwitchModeChange',
|
|
],
|
|
data() {
|
|
return {
|
|
utils,
|
|
};
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
handleSwitchModeChange(...args) {
|
|
this.$emit('handleSwitchModeChange', ...args);
|
|
},
|
|
getMonthTitle,
|
|
},
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import './calendar.css';
|
|
</style>
|