mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-17 23:50:37 +03:00
Code Activity

feat: add prefixClass prop (#401)

Browse Source
This commit is contained in:
xiemx
2019-12-17 14:18:26 +08:00
parent bb0255f188
commit a756753d12
20 changed files with 229 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/calendar/calendar-panel.vue
+23 -18
View File
@@ -1,54 +1,54 @@
<template>
<div
:class="[
'mx-calendar',
`mx-calendar-panel-${panel}`,
{ 'mx-calendar-week-mode': type === 'week' },
`${prefixClass}-calendar`,
`${prefixClass}-calendar-panel-${panel}`,
{ [`${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
+9 -1
View File
@@ -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
+11 -4
View File
@@ -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)">
<td v-if="showWeekNumber" class="mx-week-number">
<tr
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
+4 -1
View File
@@ -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
+6 -1
View File
@@ -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
+29 -14
View File
@@ -1,13 +1,18 @@
<template>
<div
:class="{
'mx-datepicker': true,
'mx-datepicker-range': range,
'mx-datepicker-inline': inline,
[`${prefixClass}-datepicker`]: true,
[`${prefixClass}-datepicker-range`]: range,
[`${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 v-if="hasSlot('header')" class="mx-datepicker-header">
<div :class="`${prefixClass}-datepicker-content`">
<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
+9 -1
View File
@@ -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
+9 -1
View File
@@ -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
+11 -4
View File
@@ -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"
style={{ top: this.top, left: this.left }}
class={`${prefixClass}-datepicker-main ${prefixClass}-datepicker-popup`}
style={{ top: this.top, left: this.left, position: 'absolute' }}
>
{this.$slots.default}
</div>
src/scrollbar/scrollbar-vertical.vue
+9 -4
View File
@@ -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
+6 -4
View File
@@ -1,5 +1,7 @@
.mx-zoom-in-down-enter-active,
.mx-zoom-in-down-leave-active {
@import './var.scss';
.#{$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,
.mx-zoom-in-down-leave-to {
.#{$namespace}-zoom-in-down-enter,
.#{$namespace}-zoom-in-down-leave-to {
opacity: 0;
transform: scaleY(0);
}
src/style/btn.scss
+2 -2
View File
@@ -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
+13 -11
View File
@@ -1,9 +1,11 @@
.mx-icon-left:before,
.mx-icon-right:before,
.mx-icon-double-left:before,
.mx-icon-double-right:before,
.mx-icon-double-left:after,
.mx-icon-double-right:after {
@import './var.scss';
.#{$namespace}-icon-left:before,
.#{$namespace}-icon-right:before,
.#{$namespace}-icon-double-left:before,
.#{$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,
.mx-icon-double-right:before,
.mx-icon-double-right:after {
.#{$namespace}-icon-right:before,
.#{$namespace}-icon-double-right:before,
.#{$namespace}-icon-double-right:after {
transform: rotate(135deg) scale(0.7);
}
src/style/index.scss
+45 -45
View File
@@ -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,
.mx-icon-clear {
.#{$namespace}-icon-calendar,
.#{$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,
.mx-btn-icon-double-left {
.#{$namespace}-btn-icon-left,
.#{$namespace}-btn-icon-double-left {
float: left;
}
.mx-btn-icon-right,
.mx-btn-icon-double-right {
.#{$namespace}-btn-icon-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 {
.mx-date-row {
.#{$namespace}-calendar-week-mode {
.#{$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 {
@extend .mx-calendar-header;
.#{$namespace}-time-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
+7 -5
View File
@@ -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
+2
View File
@@ -1,3 +1,5 @@
$namespace: 'mx' !default;
$default-color: #73879c !default;
$primary-color: #1284e7 !default;
src/time/list-columns.vue
+14 -7
View File
@@ -1,13 +1,17 @@
<template>
<div class="mx-time-columns">
<scrollbar-vertical v-for="(col, i) in columns" :key="i" class="mx-time-column">
<ul class="mx-time-list" :data-type="col.type" :data-index="i" @click="handleSelect">
<div :class="`${prefixClass}-time-columns`">
<scrollbar-vertical v-for="(col, i) in columns" :key="i" :class="`${prefixClass}-time-column`">
<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
+4 -2
View File
@@ -3,8 +3,7 @@
<div
v-for="item in list"
:key="item.value"
class="mx-time-option"
:class="getClasses(item.value)"
:class="[`${prefixClass}-time-option`, 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
+7 -4
View File
@@ -1,15 +1,15 @@
<template>
<div class="mx-time">
<div v-if="showTimeHeader" class="mx-time-header">
<div :class="`${prefixClass}-time`">
<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
+9 -1
View File
@@ -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: {