refactor: decade separator can replace by css

__test__/__snapshots__/calendar-panel.test.js.snap

@@ -201,7 +201,15 @@ exports[`CalendarPanel prop: type=year 1`] = `
       class="mx-calendar-header-label"
     >
       <span>
-        2010 ~ 2019
+        2010
+      </span>
+
+      <span
+        class="mx-calendar-decade-separator"
+      />
+
+      <span>
+        2019
       </span>
     </span>
   </div>

src/calendar/calendar-panel.vue

@@ -36,13 +36,17 @@
         <i class="mx-icon-right"></i>
       </button>
       <span class="mx-calendar-header-label">
-        <span v-if="panel === 'year'">{{ yearHeader }}</span>
+        <template v-if="panel === 'year'">
+          <span>{{ calendarDecade }}</span>
+          <span class="mx-calendar-decade-separator"></span>
+          <span>{{ calendarDecade + 9 }}</span>
+        </template>
         <button
           v-else-if="panel === 'month'"
           class="mx-btn mx-btn-text"
           @click="handelPanelChange('year')"
         >
-          {{ monthHeader }}
+          {{ calendarYear }}
         </button>
         <template v-else-if="panel === 'date'">
           <button
@@ -177,12 +181,6 @@ export default {
     showIconArrow() {
       return this.panel === 'date';
     },
-    yearHeader() {
-      return `${this.calendarDecade} ~ ${this.calendarDecade + 9}`;
-    },
-    monthHeader() {
-      return this.calendarYear;
-    },
     dateHeader() {
       const monthBeforeYear = this.t('monthBeforeYear');
       const yearFormat = this.t('yearFormat');

src/style/index.scss

@@ -183,6 +183,13 @@
   font-size: 14px;
 }
 
+.mx-calendar-decade-separator {
+  margin: 0 2px;
+  &:after {
+    content: '~';
+  }
+}
+
 .mx-calendar-content {
   position: relative;
   width: 224px;