first commit

uni_modules/tdesign-uniapp/components/calendar/calendar-header.vue

@@ -0,0 +1,98 @@
+<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>