feat: add prefixClass prop (#401)

src/calendar/calendar-panel.vue

@@ -1,54 +1,54 @@
 <template>
   <div
     :class="[
-      'mx-calendar',
+      `${prefixClass}-calendar`,
-      `mx-calendar-panel-${panel}`,
+      `${prefixClass}-calendar-panel-${panel}`,
-      { 'mx-calendar-week-mode': type === 'week' },
+      { [`${prefixClass}-calendar-week-mode`]: type === 'week' },
     ]"
   >
-    <div class="mx-calendar-header">
+    <div :class="`${prefixClass}-calendar-header`">
       <button
         v-show="showIconDoubleArrow"
         type="button"
-        class="mx-btn mx-btn-text mx-btn-icon-double-left"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-double-left`"
         @click="handleIconDoubleLeftClick"
       >
-        <i class="mx-icon-double-left"></i>
+        <i :class="`${prefixClass}-icon-double-left`"></i>
       </button>
       <button
         v-show="showIconArrow"
         type="button"
-        class="mx-btn mx-btn-text mx-btn-icon-left"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-left`"
         @click="handleIconLeftClick"
       >
-        <i class="mx-icon-left"></i>
+        <i :class="`${prefixClass}-icon-left`"></i>
       </button>
       <button
         v-show="showIconDoubleArrow"
         type="button"
-        class="mx-btn mx-btn-text mx-btn-icon-double-right"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-double-right`"
         @click="handleIconDoubleRightClick"
       >
-        <i class="mx-icon-double-right"></i>
+        <i :class="`${prefixClass}-icon-double-right`"></i>
       </button>
       <button
         v-show="showIconArrow"
         type="button"
-        class="mx-btn mx-btn-text mx-btn-icon-right"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-right`"
         @click="handleIconRightClick"
       >
-        <i class="mx-icon-right"></i>
+        <i :class="`${prefixClass}-icon-right`"></i>
       </button>
-      <span class="mx-calendar-header-label">
+      <span :class="`${prefixClass}-calendar-header-label`">
         <template v-if="panel === 'year'">
           <span>{{ calendarDecade }}</span>
-          <span class="mx-calendar-decade-separator"></span>
+          <span :class="`${prefixClass}-calendar-decade-separator`"></span>
           <span>{{ calendarDecade + 9 }}</span>
         </template>
         <button
           v-else-if="panel === 'month'"
           type="button"
-          class="mx-btn mx-btn-text"
+          :class="`${prefixClass}-btn ${prefixClass}-btn-text`"
           @click="handelPanelChange('year')"
         >
           {{ calendarYear }}
@@ -58,7 +58,9 @@
             v-for="item in dateHeader"
             :key="item.panel"
             type="button"
-            :class="`mx-btn mx-btn-text mx-btn-current-${item.panel}`"
+            :class="
+              `${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-current-${item.panel}`
+            "
             @click="handelPanelChange(item.panel)"
           >
             {{ item.label }}
@@ -66,7 +68,7 @@
         </template>
       </span>
     </div>
-    <div class="mx-calendar-content">
+    <div :class="`${prefixClass}-calendar-content`">
       <table-year
         v-show="panel === 'year'"
         :decade="calendarDecade"
@@ -124,6 +126,9 @@ export default {
     t: {
       default: () => getLocaleFieldValue,
     },
+    prefixClass: {
+      default: 'mx',
+    },
   },
   props: {
     value: {},
@@ -356,7 +361,7 @@ export default {
         const time = v.getTime();
         return time >= start && time <= end;
       });
-      return active ? 'mx-active-week' : '';
+      return active ? `${this.prefixClass}-active-week` : '';
     },
   },
 };

src/calendar/calendar-range.js

@@ -5,6 +5,11 @@ import { getValidDate, isValidDate, isValidRangeDate } from '../util/date';
 export default {
   name: 'CalendarRange',
   components: { CalendarPanel },
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     ...CalendarPanel.props,
   },
@@ -124,6 +129,9 @@ export default {
       };
       return <calendar-panel {...{ props, on }}></calendar-panel>;
     });
-    return <div class="mx-range-wrapper">{calendarRange}</div>;
+
+    const { prefixClass } = this;
+
+    return <div class={`${prefixClass}-range-wrapper`}>{calendarRange}</div>;
   },
 };

src/calendar/table-date.vue

@@ -1,14 +1,18 @@
 <template>
-  <table class="mx-table mx-table-date">
+  <table :class="`${prefixClass}-table ${prefixClass}-table-date`">
     <thead>
       <tr>
-        <th v-if="showWeekNumber" class="mx-week-number-header"></th>
+        <th v-if="showWeekNumber" :class="`${prefixClass}-week-number-header`"></th>
         <th v-for="day in days" :key="day">{{ day }}</th>
       </tr>
     </thead>
     <tbody @click="handleCellClick">
-      <tr v-for="(row, i) in dates" :key="i" class="mx-date-row" :class="getRowClasses(row)">
+      <tr
-        <td v-if="showWeekNumber" class="mx-week-number">
+        v-for="(row, i) in dates"
+        :key="i"
+        :class="[`${prefixClass}-date-row`, getRowClasses(row)]"
+      >
+        <td v-if="showWeekNumber" :class="`${prefixClass}-week-number`">
           {{ getWeekNumber(row[0].day) }}
         </td>
         <td
@@ -41,6 +45,9 @@ export default {
     getWeek: {
       default: () => getWeek,
     },
+    prefixClass: {
+      default: 'mx',
+    },
   },
   props: {
     calendarYear: {

src/calendar/table-month.vue

@@ -1,5 +1,5 @@
 <template>
-  <table class="mx-table mx-table-month" @click="handleClick">
+  <table :class="`${prefixClass}-table ${prefixClass}-table-month`" @click="handleClick">
     <tr v-for="(row, i) in months" :key="i">
       <td
         v-for="(cell, j) in row"
@@ -24,6 +24,9 @@ export default {
     t: {
       default: () => getLocaleFieldValue,
     },
+    prefixClass: {
+      default: 'mx',
+    },
   },
   props: {
     getCellClasses: {

src/calendar/table-year.vue

@@ -1,5 +1,5 @@
 <template>
-  <table class="mx-table mx-table-year" @click="handleClick">
+  <table :class="`${prefixClass}-table ${prefixClass}-table-year`" @click="handleClick">
     <tr v-for="(row, i) in years" :key="i">
       <td
         v-for="(cell, j) in row"
@@ -19,6 +19,11 @@ import { chunk } from '../util/base';
 
 export default {
   name: 'TableYear',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     decade: Number,
     getCellClasses: {

src/date-picker.vue

@@ -1,13 +1,18 @@
 <template>
   <div
     :class="{
-      'mx-datepicker': true,
+      [`${prefixClass}-datepicker`]: true,
-      'mx-datepicker-range': range,
+      [`${prefixClass}-datepicker-range`]: range,
-      'mx-datepicker-inline': inline,
+      [`${prefixClass}-datepicker-inline`]: inline,
       disabled: disabled,
     }"
   >
-    <div v-if="!inline" class="mx-input-wrapper" @mousedown="openPopup" @touchstart="openPopup">
+    <div
+      v-if="!inline"
+      :class="`${prefixClass}-input-wrapper`"
+      @mousedown="openPopup"
+      @touchstart="openPopup"
+    >
       <slot name="input">
         <input
           ref="input"
@@ -23,12 +28,12 @@
           @change="handleInputChange"
         />
       </slot>
-      <i v-if="showClearIcon" class="mx-icon-clear" @mousedown.stop="handleClear">
+      <i v-if="showClearIcon" :class="`${prefixClass}-icon-clear`" @mousedown.stop="handleClear">
         <slot name="icon-clear">
           <icon-close></icon-close>
         </slot>
       </i>
-      <i class="mx-icon-calendar">
+      <i :class="`${prefixClass}-icon-calendar`">
         <slot name="icon-calendar">
           <icon-calendar></icon-calendar>
         </slot>
@@ -43,23 +48,26 @@
       :append-to-body="appendToBody"
       @clickoutside="handleClickOutSide"
     >
-      <div v-if="hasSlot('sidebar') || shortcuts.length" class="mx-datepicker-sidebar">
+      <div
+        v-if="hasSlot('sidebar') || shortcuts.length"
+        :class="`${prefixClass}-datepicker-sidebar`"
+      >
         <slot name="sidebar" :value="currentValue" :emit="emitValue"></slot>
         <button
           v-for="(v, i) in shortcuts"
           :key="i"
           type="button"
-          class="mx-btn mx-btn-text mx-btn-shortcut"
+          :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-shortcut`"
           @click="handleSelectShortcut(v)"
         >
           {{ v.text }}
         </button>
       </div>
-      <div class="mx-datepicker-content">
+      <div :class="`${prefixClass}-datepicker-content`">
-        <div v-if="hasSlot('header')" class="mx-datepicker-header">
+        <div v-if="hasSlot('header')" :class="`${prefixClass}-datepicker-header`">
           <slot name="header" :value="currentValue" :emit="emitValue"></slot>
         </div>
-        <div class="mx-datepicker-body">
+        <div :class="`${prefixClass}-datepicker-body`">
           <slot name="content" :value="currentValue" :emit="emitValue">
             <component
               :is="currentComponent"
@@ -69,12 +77,12 @@
             ></component>
           </slot>
         </div>
-        <div v-if="hasSlot('footer') || confirm" class="mx-datepicker-footer">
+        <div v-if="hasSlot('footer') || confirm" :class="`${prefixClass}-datepicker-footer`">
           <slot name="footer" :value="currentValue" :emit="emitValue"></slot>
           <button
             v-if="confirm"
             type="button"
-            class="mx-btn mx-datepicker-btn-confirm"
+            :class="`${prefixClass}-btn ${prefixClass}-datepicker-btn-confirm`"
             @click="handleConfirmDate"
           >
             {{ confirmText }}
@@ -122,6 +130,7 @@ export default {
     return {
       t: this.getLocaleFieldValue,
       getWeek: this.getWeek,
+      prefixClass: this.prefixClass,
     };
   },
   props: {
@@ -176,8 +185,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    prefixClass: {
+      type: String,
+      default: 'mx',
+    },
     inputClass: {
-      default: 'mx-input',
+      default() {
+        return `${this.prefixClass}-input`;
+      },
     },
     inputAttr: {
       type: Object,

src/datetime/datetime-panel.js

@@ -5,6 +5,11 @@ import { pick } from '../util/base';
 
 export default {
   name: 'DatetimePanel',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     ...CalendarPanel.props,
     ...TimePanel.props,
@@ -78,10 +83,13 @@ export default {
         'title-click': this.closeTimePanel,
       },
     };
+
+    const { prefixClass } = this;
+
     return (
       <div>
         <CalendarPanel {...calendarProps} />
-        {this.timeVisible && <TimePanel class="mx-calendar-time" {...timeProps} />}
+        {this.timeVisible && <TimePanel class={`${prefixClass}-calendar-time`} {...timeProps} />}
       </div>
     );
   },

src/datetime/datetime-range.js

@@ -5,6 +5,11 @@ import { isValidRangeDate, assignTime } from '../util/date';
 
 export default {
   name: 'DatetimeRange',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     ...CalendarRange.props,
     ...TimeRange.props,
@@ -85,10 +90,13 @@ export default {
         'title-click': this.closeTimePanel,
       },
     };
+
+    const { prefixClass } = this;
+
     return (
       <div>
         <CalendarRange {...calendarProps} />
-        {this.timeVisible && <TimeRange class="mx-calendar-time" {...timeProps} />}
+        {this.timeVisible && <TimeRange class={`${prefixClass}-calendar-time`} {...timeProps} />}
       </div>
     );
   },

src/popup.js

@@ -3,6 +3,11 @@ import { getPopupElementSize, getRelativePosition, getScrollParent } from './uti
 
 export default {
   name: 'Popup',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     visible: {
       type: Boolean,
@@ -90,15 +95,17 @@ export default {
     },
   },
   render() {
+    const { prefixClass } = this;
+
     if (this.inline) {
-      return <div class="mx-datepicker-main">{this.$slots.default}</div>;
+      return <div class={`${prefixClass}-datepicker-main`}>{this.$slots.default}</div>;
     }
     return (
-      <transition name="mx-zoom-in-down">
+      <transition name={`${prefixClass}-zoom-in-down`}>
         {this.visible && (
           <div
-            class="mx-datepicker-main mx-datepicker-popup"
+            class={`${prefixClass}-datepicker-main ${prefixClass}-datepicker-popup`}
-            style={{ top: this.top, left: this.left }}
+            style={{ top: this.top, left: this.left, position: 'absolute' }}
           >
             {this.$slots.default}
           </div>

src/scrollbar/scrollbar-vertical.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mx-scrollbar"
+    :class="`${prefixClass}-scrollbar`"
     :style="{
       position: 'relative',
       overflow: 'hidden',
@@ -8,16 +8,16 @@
   >
     <div
       ref="wrap"
-      class="mx-scrollbar-wrap"
+      :class="`${prefixClass}-scrollbar-wrap`"
       :style="{ marginRight: `-${scrollbarWidth}px` }"
       @scroll="handleScroll"
     >
       <slot></slot>
     </div>
-    <div class="mx-scrollbar-track">
+    <div :class="`${prefixClass}-scrollbar-track`">
       <div
         ref="thumb"
-        class="mx-scrollbar-thumb"
+        :class="`${prefixClass}-scrollbar-thumb`"
         :style="{ height: thumbHeight, top: thumbTop }"
         @mousedown="handleDragstart"
       ></div>
@@ -30,6 +30,11 @@
 import getScrollbarWidth from '../util/scrollbar-width';
 
 export default {
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   data() {
     return {
       scrollbarWidth: 0,

src/style/animation.scss

@@ -1,5 +1,7 @@
-.mx-zoom-in-down-enter-active,
+@import './var.scss';
-.mx-zoom-in-down-leave-active {
+
+.#{$namespace}-zoom-in-down-enter-active,
+.#{$namespace}-zoom-in-down-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
@@ -7,8 +9,8 @@
   transform-origin: center top;
 }
 
-.mx-zoom-in-down-enter,
+.#{$namespace}-zoom-in-down-enter,
-.mx-zoom-in-down-leave-to {
+.#{$namespace}-zoom-in-down-leave-to {
   opacity: 0;
   transform: scaleY(0);
 }

src/style/btn.scss

@@ -1,6 +1,6 @@
 @import './var.scss';
 
-.mx-btn {
+.#{$namespace}-btn {
   box-sizing: border-box;
   line-height: 1;
   font-size: 14px;
@@ -20,7 +20,7 @@
   }
 }
 
-.mx-btn-text {
+.#{$namespace}-btn-text {
   border: 0;
   padding: 0 4px;
   text-align: left;

src/style/icon.scss

@@ -1,9 +1,11 @@
-.mx-icon-left:before,
+@import './var.scss';
-.mx-icon-right:before,
+
-.mx-icon-double-left:before,
+.#{$namespace}-icon-left:before,
-.mx-icon-double-right:before,
+.#{$namespace}-icon-right:before,
-.mx-icon-double-left:after,
+.#{$namespace}-icon-double-left:before,
-.mx-icon-double-right:after {
+.#{$namespace}-icon-double-right:before,
+.#{$namespace}-icon-double-left:after,
+.#{$namespace}-icon-double-right:after {
   content: '';
   position: relative;
   top: -1px;
@@ -20,16 +22,16 @@
   transform: rotate(-45deg) scale(0.7);
 }
 
-.mx-icon-double-left:after {
+.#{$namespace}-icon-double-left:after {
   left: -4px;
 }
 
-.mx-icon-double-right:before {
+.#{$namespace}-icon-double-right:before {
   left: 4px;
 }
 
-.mx-icon-right:before,
+.#{$namespace}-icon-right:before,
-.mx-icon-double-right:before,
+.#{$namespace}-icon-double-right:before,
-.mx-icon-double-right:after {
+.#{$namespace}-icon-double-right:after {
   transform: rotate(135deg) scale(0.7);
 }

src/style/index.scss

@@ -4,7 +4,7 @@
 @import './scrollbar.scss';
 @import './animation.scss';
 
-.mx-datepicker {
+.#{$namespace}-datepicker {
   position: relative;
   display: inline-block;
   width: 210px;
@@ -17,30 +17,30 @@
   }
 }
 
-.mx-datepicker-range {
+.#{$namespace}-datepicker-range {
   width: 320px;
 }
 
-.mx-datepicker-inline {
+.#{$namespace}-datepicker-inline {
   width: auto;
 }
 
-.mx-input-wrapper {
+.#{$namespace}-input-wrapper {
   position: relative;
-  .mx-icon-clear {
+  .#{$namespace}-icon-clear {
     display: none;
   }
   &:hover {
-    .mx-icon-clear {
+    .#{$namespace}-icon-clear {
       display: block;
     }
-    .mx-icon-clear + .mx-icon-calendar {
+    .#{$namespace}-icon-clear + .#{$namespace}-icon-calendar {
       display: none;
     }
   }
 }
 
-.mx-input {
+.#{$namespace}-input {
   display: inline-block;
   box-sizing: border-box;
   width: 100%;
@@ -74,8 +74,8 @@
   }
 }
 
-.mx-icon-calendar,
+.#{$namespace}-icon-calendar,
-.mx-icon-clear {
+.#{$namespace}-icon-clear {
   position: absolute;
   top: 50%;
   right: 8px;
@@ -86,21 +86,21 @@
   vertical-align: middle;
 }
 
-.mx-icon-clear {
+.#{$namespace}-icon-clear {
   cursor: pointer;
   &:hover {
     color: rgba(0, 0, 0, 0.8);
   }
 }
 
-.mx-datepicker-main {
+.#{$namespace}-datepicker-main {
   font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', sans-serif;
   color: $default-color;
   background-color: #fff;
   border: 1px solid $border-color;
 }
 
-.mx-datepicker-popup {
+.#{$namespace}-datepicker-popup {
   position: absolute;
   margin-top: 1px;
   margin-bottom: 1px;
@@ -108,7 +108,7 @@
   z-index: 1000;
 }
 
-.mx-datepicker-sidebar {
+.#{$namespace}-datepicker-sidebar {
   float: left;
   box-sizing: border-box;
   width: 100px;
@@ -116,38 +116,38 @@
   overflow: auto;
 }
 
-.mx-datepicker-sidebar + .mx-datepicker-content {
+.#{$namespace}-datepicker-sidebar + .#{$namespace}-datepicker-content {
   margin-left: 100px;
   border-left: 1px solid $border-color;
 }
 
-.mx-datepicker-body {
+.#{$namespace}-datepicker-body {
   position: relative;
   user-select: none;
 }
 
-.mx-btn-shortcut {
+.#{$namespace}-btn-shortcut {
   display: block;
   padding: 0 6px;
   line-height: 24px;
 }
 
-.mx-range-wrapper {
+.#{$namespace}-range-wrapper {
   display: flex;
 }
 
-.mx-datepicker-header {
+.#{$namespace}-datepicker-header {
   padding: 6px 8px;
   border-bottom: 1px solid $border-color;
 }
 
-.mx-datepicker-footer {
+.#{$namespace}-datepicker-footer {
   padding: 6px 8px;
   text-align: right;
   border-top: 1px solid $border-color;
 }
 
-.mx-calendar {
+.#{$namespace}-calendar {
   box-sizing: border-box;
   width: 248px;
   padding: 6px 12px;
@@ -156,7 +156,7 @@
   }
 }
 
-.mx-calendar-header {
+.#{$namespace}-calendar-header {
   box-sizing: border-box;
   height: 34px;
   line-height: 34px;
@@ -164,27 +164,27 @@
   overflow: hidden;
 }
 
-.mx-btn-icon-left,
+.#{$namespace}-btn-icon-left,
-.mx-btn-icon-double-left {
+.#{$namespace}-btn-icon-double-left {
   float: left;
 }
-.mx-btn-icon-right,
+.#{$namespace}-btn-icon-right,
-.mx-btn-icon-double-right {
+.#{$namespace}-btn-icon-double-right {
   float: right;
 }
 
-.mx-calendar-header-label {
+.#{$namespace}-calendar-header-label {
   font-size: 14px;
 }
 
-.mx-calendar-decade-separator {
+.#{$namespace}-calendar-decade-separator {
   margin: 0 2px;
   &:after {
     content: '~';
   }
 }
 
-.mx-calendar-content {
+.#{$namespace}-calendar-content {
   position: relative;
   height: 224px;
   box-sizing: border-box;
@@ -210,13 +210,13 @@
   }
 }
 
-.mx-calendar-week-mode {
+.#{$namespace}-calendar-week-mode {
-  .mx-date-row {
+  .#{$namespace}-date-row {
     cursor: pointer;
     &:hover {
       background-color: $calendar-hover-background-color;
     }
-    &.mx-active-week {
+    &.#{$namespace}-active-week {
       background-color: $calendar-in-range-background-color;
     }
     .cell {
@@ -232,11 +232,11 @@
   }
 }
 
-.mx-week-number {
+.#{$namespace}-week-number {
   opacity: 0.5;
 }
 
-.mx-table {
+.#{$namespace}-table {
   table-layout: fixed;
   border-collapse: separate;
   border-spacing: 0;
@@ -254,7 +254,7 @@
   }
 }
 
-.mx-table-date {
+.#{$namespace}-table-date {
   td,
   th {
     height: 32px;
@@ -269,7 +269,7 @@
   }
 }
 
-.mx-time {
+.#{$namespace}-time {
   flex: 1;
   width: 224px;
   background: #fff;
@@ -277,32 +277,32 @@
     border-left: 1px solid $border-color;
   }
 }
-.mx-calendar-time {
+.#{$namespace}-calendar-time {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
-.mx-time-header {
+.#{$namespace}-time-header {
-  @extend .mx-calendar-header;
+  @extend .#{$namespace}-calendar-header;
   border-bottom: 1px solid $border-color;
 }
 
-.mx-time-content {
+.#{$namespace}-time-content {
   height: 224px;
   box-sizing: border-box;
   overflow: hidden;
 }
 
-.mx-time-columns {
+.#{$namespace}-time-columns {
   display: flex;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 
-.mx-time-column {
+.#{$namespace}-time-column {
   flex: 1;
   position: relative;
   border-left: 1px solid $border-color;
@@ -311,7 +311,7 @@
   &:first-child {
     border-left: 0;
   }
-  .mx-time-list {
+  .#{$namespace}-time-list {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -321,7 +321,7 @@
       height: 32 * 6px;
     }
   }
-  .mx-time-item {
+  .#{$namespace}-time-item {
     cursor: pointer;
     font-size: 12px;
     height: 32px;
@@ -343,7 +343,7 @@
   }
 }
 
-.mx-time-option {
+.#{$namespace}-time-option {
   cursor: pointer;
   padding: 8px 10px;
   font-size: 14px;

src/style/scrollbar.scss

@@ -1,19 +1,21 @@
-.mx-scrollbar {
+@import './var.scss';
+
+.#{$namespace}-scrollbar {
   height: 100%;
   &:hover {
-    .mx-scrollbar-track {
+    .#{$namespace}-scrollbar-track {
       opacity: 1;
     }
   }
 }
 
-.mx-scrollbar-wrap {
+.#{$namespace}-scrollbar-wrap {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.mx-scrollbar-track {
+.#{$namespace}-scrollbar-track {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -23,7 +25,7 @@
   border-radius: 4px;
   opacity: 0;
   transition: opacity 0.24s ease-out;
-  .mx-scrollbar-thumb {
+  .#{$namespace}-scrollbar-thumb {
     position: absolute;
     width: 100%;
     height: 0;

src/style/var.scss

@@ -1,3 +1,5 @@
+$namespace: 'mx' !default;
+
 $default-color: #73879c !default;
 $primary-color: #1284e7 !default;
 

src/time/list-columns.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="mx-time-columns">
+  <div :class="`${prefixClass}-time-columns`">
-    <scrollbar-vertical v-for="(col, i) in columns" :key="i" class="mx-time-column">
+    <scrollbar-vertical v-for="(col, i) in columns" :key="i" :class="`${prefixClass}-time-column`">
-      <ul class="mx-time-list" :data-type="col.type" :data-index="i" @click="handleSelect">
+      <ul
+        :class="`${prefixClass}-time-list`"
+        :data-type="col.type"
+        :data-index="i"
+        @click="handleSelect"
+      >
         <li
           v-for="(item, j) in col.list"
           :key="item.value"
-          class="mx-time-item"
           :data-index="j"
-          :class="getClasses(item.value)"
+          :class="[`${prefixClass}-time-item`, getClasses(item.value)]"
         >
           {{ item.text }}
         </li>
@@ -62,9 +66,12 @@ const scrollTo = (element, to, duration = 0) => {
 
 export default {
   name: 'ListColumns',
-
   components: { ScrollbarVertical },
-
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     date: Date,
     getClasses: {

src/time/list-options.vue

@@ -3,8 +3,7 @@
     <div
       v-for="item in list"
       :key="item.value"
-      class="mx-time-option"
+      :class="[`${prefixClass}-time-option`, getClasses(item.value)]"
-      :class="getClasses(item.value)"
       @click="handleSelect(item.value)"
     >
       {{ item.text }}
@@ -44,6 +43,9 @@ export default {
     t: {
       default: () => getLocaleFieldValue,
     },
+    prefixClass: {
+      default: 'mx',
+    },
   },
   props: {
     date: Date,

src/time/time-panel.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="mx-time">
+  <div :class="`${prefixClass}-time`">
-    <div v-if="showTimeHeader" class="mx-time-header">
+    <div v-if="showTimeHeader" :class="`${prefixClass}-time-header`">
       <button
         type="button"
-        class="mx-btn mx-btn-text mx-time-header-title"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-time-header-title`"
         @click="handleClickTitle"
       >
         {{ title }}
       </button>
     </div>
-    <div class="mx-time-content">
+    <div :class="`${prefixClass}-time-content`">
       <list-options
         v-if="timePickerOptions"
         :date="innerValue"
@@ -49,6 +49,9 @@ export default {
     t: {
       default: () => getLocaleFieldValue,
     },
+    prefixClass: {
+      default: 'mx',
+    },
   },
   props: {
     value: {},

src/time/time-range.js

@@ -3,6 +3,11 @@ import { isValidRangeDate } from '../util/date';
 
 export default {
   name: 'TimeRange',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     ...TimePanel.props,
   },
@@ -59,8 +64,11 @@ export default {
     const defaultValues = Array.isArray(this.defaultValue)
       ? this.defaultValue
       : [this.defaultValue, this.defaultValue];
+
+    const { prefixClass } = this;
+
     return (
-      <div class="mx-range-wrapper">
+      <div class={`${prefixClass}-range-wrapper`}>
         <TimePanel
           {...{
             props: {