Skip to content

Commit a756753

Browse files
mengxiong10mengxiong10
committed
feat: add prefixClass prop (#401)
1 parent bb0255f commit a756753

20 files changed

+229
-130
lines changed

‎src/calendar/calendar-panel.vue

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
11
<template>
22
<div
33
:class="[
4-
'mx-calendar',
5-
`mx-calendar-panel-${panel}`,
6-
{ 'mx-calendar-week-mode': type === 'week' },
4+
`${prefixClass}-calendar`,
5+
`${prefixClass}-calendar-panel-${panel}`,
6+
{ [`${prefixClass}-calendar-week-mode`]: type === 'week' },
77
]"
88
>
9-
<div class="mx-calendar-header">
9+
<div :class="`${prefixClass}-calendar-header`">
1010
<button
1111
v-show="showIconDoubleArrow"
1212
type="button"
13-
class="mx-btn mx-btn-text mx-btn-icon-double-left"
13+
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-double-left`"
1414
@click="handleIconDoubleLeftClick"
1515
>
16-
<i class="mx-icon-double-left"></i>
16+
<i :class="`${prefixClass}-icon-double-left`"></i>
1717
</button>
1818
<button
1919
v-show="showIconArrow"
2020
type="button"
21-
class="mx-btn mx-btn-text mx-btn-icon-left"
21+
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-left`"
2222
@click="handleIconLeftClick"
2323
>
24-
<i class="mx-icon-left"></i>
24+
<i :class="`${prefixClass}-icon-left`"></i>
2525
</button>
2626
<button
2727
v-show="showIconDoubleArrow"
2828
type="button"
29-
class="mx-btn mx-btn-text mx-btn-icon-double-right"
29+
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-double-right`"
3030
@click="handleIconDoubleRightClick"
3131
>
32-
<i class="mx-icon-double-right"></i>
32+
<i :class="`${prefixClass}-icon-double-right`"></i>
3333
</button>
3434
<button
3535
v-show="showIconArrow"
3636
type="button"
37-
class="mx-btn mx-btn-text mx-btn-icon-right"
37+
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-right`"
3838
@click="handleIconRightClick"
3939
>
40-
<i class="mx-icon-right"></i>
40+
<i :class="`${prefixClass}-icon-right`"></i>
4141
</button>
42-
<span class="mx-calendar-header-label">
42+
<span :class="`${prefixClass}-calendar-header-label`">
4343
<template v-if="panel === 'year'">
4444
<span>{{ calendarDecade }}</span>
45-
<span class="mx-calendar-decade-separator"></span>
45+
<span :class="`${prefixClass}-calendar-decade-separator`"></span>
4646
<span>{{ calendarDecade + 9 }}</span>
4747
</template>
4848
<button
4949
v-else-if="panel === 'month'"
5050
type="button"
51-
class="mx-btn mx-btn-text"
51+
:class="`${prefixClass}-btn ${prefixClass}-btn-text`"
5252
@click="handelPanelChange('year')"
5353
>
5454
{{ calendarYear }}
@@ -58,15 +58,17 @@
5858
v-for="item in dateHeader"
5959
:key="item.panel"
6060
type="button"
61-
:class="`mx-btn mx-btn-text mx-btn-current-${item.panel}`"
61+
:class="
62+
`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-current-${item.panel}`
63+
"
6264
@click="handelPanelChange(item.panel)"
6365
>
6466
{{ item.label }}
6567
</button>
6668
</template>
6769
</span>
6870
</div>
69-
<div class="mx-calendar-content">
71+
<div :class="`${prefixClass}-calendar-content`">
7072
<table-year
7173
v-show="panel === 'year'"
7274
:decade="calendarDecade"
@@ -124,6 +126,9 @@ export default {
124126
t: {
125127
default: () => getLocaleFieldValue,
126128
},
129+
prefixClass: {
130+
default: 'mx',
131+
},
127132
},
128133
props: {
129134
value: {},
@@ -356,7 +361,7 @@ export default {
356361
const time = v.getTime();
357362
return time >= start && time <= end;
358363
});
359-
return active ? 'mx-active-week' : '';
364+
return active ? `${this.prefixClass}-active-week` : '';
360365
},
361366
},
362367
};

‎src/calendar/calendar-range.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import { getValidDate, isValidDate, isValidRangeDate } from '../util/date';
55
export default {
66
name: 'CalendarRange',
77
components: { CalendarPanel },
8+
inject: {
9+
prefixClass: {
10+
default: 'mx',
11+
},
12+
},
813
props: {
914
...CalendarPanel.props,
1015
},
@@ -124,6 +129,9 @@ export default {
124129
};
125130
return <calendar-panel {...{ props, on }}></calendar-panel>;
126131
});
127-
return <div class="mx-range-wrapper">{calendarRange}</div>;
132+
133+
const { prefixClass } = this;
134+
135+
return <div class={`${prefixClass}-range-wrapper`}>{calendarRange}</div>;
128136
},
129137
};

‎src/calendar/table-date.vue

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
<template>
2-
<table class="mx-table mx-table-date">
2+
<table :class="`${prefixClass}-table ${prefixClass}-table-date`">
33
<thead>
44
<tr>
5-
<th v-if="showWeekNumber" class="mx-week-number-header"></th>
5+
<th v-if="showWeekNumber" :class="`${prefixClass}-week-number-header`"></th>
66
<th v-for="day in days" :key="day">{{ day }}</th>
77
</tr>
88
</thead>
99
<tbody @click="handleCellClick">
10-
<tr v-for="(row, i) in dates" :key="i" class="mx-date-row" :class="getRowClasses(row)">
11-
<td v-if="showWeekNumber" class="mx-week-number">
10+
<tr
11+
v-for="(row, i) in dates"
12+
:key="i"
13+
:class="[`${prefixClass}-date-row`, getRowClasses(row)]"
14+
>
15+
<td v-if="showWeekNumber" :class="`${prefixClass}-week-number`">
1216
{{ getWeekNumber(row[0].day) }}
1317
</td>
1418
<td
@@ -41,6 +45,9 @@ export default {
4145
getWeek: {
4246
default: () => getWeek,
4347
},
48+
prefixClass: {
49+
default: 'mx',
50+
},
4451
},
4552
props: {
4653
calendarYear: {

‎src/calendar/table-month.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<table class="mx-table mx-table-month" @click="handleClick">
2+
<table :class="`${prefixClass}-table ${prefixClass}-table-month`" @click="handleClick">
33
<tr v-for="(row, i) in months" :key="i">
44
<td
55
v-for="(cell, j) in row"
@@ -24,6 +24,9 @@ export default {
2424
t: {
2525
default: () => getLocaleFieldValue,
2626
},
27+
prefixClass: {
28+
default: 'mx',
29+
},
2730
},
2831
props: {
2932
getCellClasses: {

‎src/calendar/table-year.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<table class="mx-table mx-table-year" @click="handleClick">
2+
<table :class="`${prefixClass}-table ${prefixClass}-table-year`" @click="handleClick">
33
<tr v-for="(row, i) in years" :key="i">
44
<td
55
v-for="(cell, j) in row"
@@ -19,6 +19,11 @@ import { chunk } from '../util/base';
1919
2020
export default {
2121
name: 'TableYear',
22+
inject: {
23+
prefixClass: {
24+
default: 'mx',
25+
},
26+
},
2227
props: {
2328
decade: Number,
2429
getCellClasses: {

‎src/date-picker.vue

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<template>
22
<div
33
:class="{
4-
'mx-datepicker': true,
5-
'mx-datepicker-range': range,
6-
'mx-datepicker-inline': inline,
4+
[`${prefixClass}-datepicker`]: true,
5+
[`${prefixClass}-datepicker-range`]: range,
6+
[`${prefixClass}-datepicker-inline`]: inline,
77
disabled: disabled,
88
}"
99
>
10-
<div v-if="!inline" class="mx-input-wrapper" @mousedown="openPopup" @touchstart="openPopup">
10+
<div
11+
v-if="!inline"
12+
:class="`${prefixClass}-input-wrapper`"
13+
@mousedown="openPopup"
14+
@touchstart="openPopup"
15+
>
1116
<slot name="input">
1217
<input
1318
ref="input"
@@ -23,12 +28,12 @@
2328
@change="handleInputChange"
2429
/>
2530
</slot>
26-
<i v-if="showClearIcon" class="mx-icon-clear" @mousedown.stop="handleClear">
31+
<i v-if="showClearIcon" :class="`${prefixClass}-icon-clear`" @mousedown.stop="handleClear">
2732
<slot name="icon-clear">
2833
<icon-close></icon-close>
2934
</slot>
3035
</i>
31-
<i class="mx-icon-calendar">
36+
<i :class="`${prefixClass}-icon-calendar`">
3237
<slot name="icon-calendar">
3338
<icon-calendar></icon-calendar>
3439
</slot>
@@ -43,23 +48,26 @@
4348
:append-to-body="appendToBody"
4449
@clickoutside="handleClickOutSide"
4550
>
46-
<div v-if="hasSlot('sidebar') || shortcuts.length" class="mx-datepicker-sidebar">
51+
<div
52+
v-if="hasSlot('sidebar') || shortcuts.length"
53+
:class="`${prefixClass}-datepicker-sidebar`"
54+
>
4755
<slot name="sidebar" :value="currentValue" :emit="emitValue"></slot>
4856
<button
4957
v-for="(v, i) in shortcuts"
5058
:key="i"
5159
type="button"
52-
class="mx-btn mx-btn-text mx-btn-shortcut"
60+
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-shortcut`"
5361
@click="handleSelectShortcut(v)"
5462
>
5563
{{ v.text }}
5664
</button>
5765
</div>
58-
<div class="mx-datepicker-content">
59-
<div v-if="hasSlot('header')" class="mx-datepicker-header">
66+
<div :class="`${prefixClass}-datepicker-content`">
67+
<div v-if="hasSlot('header')" :class="`${prefixClass}-datepicker-header`">
6068
<slot name="header" :value="currentValue" :emit="emitValue"></slot>
6169
</div>
62-
<div class="mx-datepicker-body">
70+
<div :class="`${prefixClass}-datepicker-body`">
6371
<slot name="content" :value="currentValue" :emit="emitValue">
6472
<component
6573
:is="currentComponent"
@@ -69,12 +77,12 @@
6977
></component>
7078
</slot>
7179
</div>
72-
<div v-if="hasSlot('footer') || confirm" class="mx-datepicker-footer">
80+
<div v-if="hasSlot('footer') || confirm" :class="`${prefixClass}-datepicker-footer`">
7381
<slot name="footer" :value="currentValue" :emit="emitValue"></slot>
7482
<button
7583
v-if="confirm"
7684
type="button"
77-
class="mx-btn mx-datepicker-btn-confirm"
85+
:class="`${prefixClass}-btn ${prefixClass}-datepicker-btn-confirm`"
7886
@click="handleConfirmDate"
7987
>
8088
{{ confirmText }}
@@ -122,6 +130,7 @@ export default {
122130
return {
123131
t: this.getLocaleFieldValue,
124132
getWeek: this.getWeek,
133+
prefixClass: this.prefixClass,
125134
};
126135
},
127136
props: {
@@ -176,8 +185,14 @@ export default {
176185
type: Boolean,
177186
default: true,
178187
},
188+
prefixClass: {
189+
type: String,
190+
default: 'mx',
191+
},
179192
inputClass: {
180-
default: 'mx-input',
193+
default() {
194+
return `${this.prefixClass}-input`;
195+
},
181196
},
182197
inputAttr: {
183198
type: Object,

‎src/datetime/datetime-panel.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import { pick } from '../util/base';
55

66
export default {
77
name: 'DatetimePanel',
8+
inject: {
9+
prefixClass: {
10+
default: 'mx',
11+
},
12+
},
813
props: {
914
...CalendarPanel.props,
1015
...TimePanel.props,
@@ -78,10 +83,13 @@ export default {
7883
'title-click': this.closeTimePanel,
7984
},
8085
};
86+
87+
const { prefixClass } = this;
88+
8189
return (
8290
<div>
8391
<CalendarPanel {...calendarProps} />
84-
{this.timeVisible && <TimePanel class="mx-calendar-time" {...timeProps} />}
92+
{this.timeVisible && <TimePanel class={`${prefixClass}-calendar-time`} {...timeProps} />}
8593
</div>
8694
);
8795
},

‎src/datetime/datetime-range.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import { isValidRangeDate, assignTime } from '../util/date';
55

66
export default {
77
name: 'DatetimeRange',
8+
inject: {
9+
prefixClass: {
10+
default: 'mx',
11+
},
12+
},
813
props: {
914
...CalendarRange.props,
1015
...TimeRange.props,
@@ -85,10 +90,13 @@ export default {
8590
'title-click': this.closeTimePanel,
8691
},
8792
};
93+
94+
const { prefixClass } = this;
95+
8896
return (
8997
<div>
9098
<CalendarRange {...calendarProps} />
91-
{this.timeVisible && <TimeRange class="mx-calendar-time" {...timeProps} />}
99+
{this.timeVisible && <TimeRange class={`${prefixClass}-calendar-time`} {...timeProps} />}
92100
</div>
93101
);
94102
},

‎src/popup.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import { getPopupElementSize, getRelativePosition, getScrollParent } from './uti
33

44
export default {
55
name: 'Popup',
6+
inject: {
7+
prefixClass: {
8+
default: 'mx',
9+
},
10+
},
611
props: {
712
visible: {
813
type: Boolean,
@@ -90,15 +95,17 @@ export default {
9095
},
9196
},
9297
render() {
98+
const { prefixClass } = this;
99+
93100
if (this.inline) {
94-
return <div class="mx-datepicker-main">{this.$slots.default}</div>;
101+
return <div class={`${prefixClass}-datepicker-main`}>{this.$slots.default}</div>;
95102
}
96103
return (
97-
<transition name="mx-zoom-in-down">
104+
<transition name={`${prefixClass}-zoom-in-down`}>
98105
{this.visible && (
99106
<div
100-
class="mx-datepicker-main mx-datepicker-popup"
101-
style={{ top: this.top, left: this.left }}
107+
class={`${prefixClass}-datepicker-main ${prefixClass}-datepicker-popup`}
108+
style={{ top: this.top, left: this.left, position: 'absolute' }}
102109
>
103110
{this.$slots.default}
104111
</div>

0 commit comments

Comments
 (0)