调整日历组件，新增切换样式功能（初版）

src/components/app-calendar/app-calendar.vue

@@ -77,7 +77,12 @@
       <div :class="['calendar-months', {'calendar-week-switch-months': weekSwitch}]">
         <span v-for="(m, i) in months" :key="m" @click.stop="changeMonth(i)" :class="{'active': i === month}">{{m}}</span>
       </div>
+
     </div>
+      <div v-if="isChangeStyle"  class="changebox">
+          <div v-if="changebtntop" @click="changeStyle()" class="changeStyle_bottom"></div>
+          <div v-if="!changebtntop" @click="changeStyle()" class="changeStyle_top"></div>
+      </div>
   </div>
 </template>
 
@@ -182,6 +187,10 @@
           return {};
         }
       },
+      isChangeStyle:{
+        type: Boolean,
+        default: false
+      },
       weekSwitch: {
         type: Boolean,
         default: false
@@ -203,6 +212,7 @@
     },
     data() {
       return {
+        changebtntop: false,
         years: [],
         yearsShow: false,
         year: 0,
@@ -340,6 +350,10 @@
       }
     },
     methods: {
+      changeStyle(){
+        this.changebtntop = !this.changebtntop;
+        this.render(this.year, this.month);
+      },
       init() {
         const now = new Date();
         this.year = now.getFullYear();
@@ -708,14 +722,14 @@
             });
           });
         }
-        if (weekSwitch) {
+        if (weekSwitch || this.changebtntop) {
           const tempLength = temp.length;
           const lastLineMonth = temp[tempLength - 1][0].date.split('-')[1]; // last line month
           const secondLastMonth = temp[tempLength - 2][0].date.split('-')[1]; // second-to-last line month
           lastLineMonth !== secondLastMonth && temp.splice(tempLength - 1, 1);
         }
         this.monthDays = temp;
-        if (weekSwitch && !this.isMonthRange) {
+        if (weekSwitch && !this.isMonthRange || this.changebtntop) {
           if (this.positionWeek) {
             let payloadDay = '';
             let searchIndex = true;

src/components/app-calendar/icon.css

@@ -21,4 +21,34 @@
     line-height: 1;
     height: 4px;
     color: #ccc;
-  }
\ No newline at end of file
+  }
+.changeStyle_bottom{
+    border-color: rgb(104, 96, 96);
+    border-width: 0 0 2px 2px;
+    border-style: solid;
+    -webkit-transform: rotateZ(-45deg);
+    transform: rotateZ(-45deg);
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    right: calc(50% - 7px );
+    transition: 100 unset;
+    top: 0px;
+}
+.changebox{
+    position: relative;
+    height: 25px;
+}
+.changeStyle_top{
+    border-color: rgb(104, 96, 96);
+    border-width: 0 0 2px 2px;
+    border-style: solid;
+    -webkit-transform: rotateZ(-45deg);
+    transform: rotateZ(136deg);
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    right: calc(50% - 7px );
+    transition: 100 unset;
+    top: 0px;
+}
\ No newline at end of file