mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Calendar): add color prop
This commit is contained in:
陈嘉涵
neverland
parent
56e450f29e
commit
3250804791
@ -82,6 +82,14 @@ Set `show-confirm` to` false` to hide the confirm button. In this case, the `con
|
||||
<van-calendar v-model="show" :show-confirm="false" />
|
||||
```
|
||||
|
||||
### Custom Color
|
||||
|
||||
Use `color` prop to custom calendar color
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" color="#07c160" />
|
||||
```
|
||||
|
||||
### Custom Date Range
|
||||
|
||||
Use `min-date` and `max-date` to custom date range
|
||||
@ -182,6 +190,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
|
||||
| v-model | Whether to show calendar | *boolean* | `false` | - |
|
||||
| type | Type，can be set to `single` `range` | *string* | `single` | - |
|
||||
| title | Title of calendar | *string* | `Calendar` | - |
|
||||
| color | Color for the bottom button and selected date | *string* | `#ee0a24` | - |
|
||||
| min-date | Min date | *Date* | Today | - |
|
||||
| max-date | Max date | *Date* | Six months after the today | - |
|
||||
| default-date | Default selected date | *Date \| Date[]* | Today | - |
|
||||
|
||||
@ -82,6 +82,14 @@ export default {
|
||||
<van-calendar v-model="show" :show-confirm="false" />
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`color`属性可以自定义日历的颜色，对选中日期和底部按钮生效
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" color="#07c160" />
|
||||
```
|
||||
|
||||
### 自定义日期范围
|
||||
|
||||
通过`min-date`和`max-date`定义日历的范围
|
||||
@ -182,6 +190,7 @@ export default {
|
||||
| v-model | 是否显示日历弹窗 | *boolean* | `false` | - |
|
||||
| type | 选择类型，`single`表示选择单个日期，<br>`range`表示选择日期区间 | *string* | `single` | - |
|
||||
| title | 日历标题 | *string* | `日期选择` | - |
|
||||
| color | 颜色，对底部按钮和选中日期生效 | *string* | `#ee0a24` | - |
|
||||
| min-date | 最小日期 | *Date* | 当前日期 | - |
|
||||
| max-date | 最大日期 | *Date* | 当前日期的六个月后 | - |
|
||||
| default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |
|
||||
|
||||
@ -8,6 +8,7 @@ export default createComponent({
|
||||
props: {
|
||||
date: Date,
|
||||
type: String,
|
||||
color: String,
|
||||
minDate: Date,
|
||||
maxDate: Date,
|
||||
showMark: Boolean,
|
||||
@ -129,7 +130,7 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
getDayStyle(index) {
|
||||
getDayStyle(type, index) {
|
||||
const style = {};
|
||||
|
||||
if (index === 0) {
|
||||
@ -140,6 +141,14 @@ export default createComponent({
|
||||
style.height = `${this.rowHeight}px`;
|
||||
}
|
||||
|
||||
if (this.color) {
|
||||
if (type === 'start' || type === 'end') {
|
||||
style.background = this.color;
|
||||
} else if (type === 'middle') {
|
||||
style.color = this.color;
|
||||
}
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
@ -168,7 +177,7 @@ export default createComponent({
|
||||
|
||||
genDay(item, index) {
|
||||
const { type, topInfo, bottomInfo } = item;
|
||||
const style = this.getDayStyle(index);
|
||||
const style = this.getDayStyle(type, index);
|
||||
|
||||
const onClick = () => {
|
||||
if (type !== 'disabled') {
|
||||
@ -179,7 +188,9 @@ export default createComponent({
|
||||
if (type === 'selected') {
|
||||
return (
|
||||
<div style={style} class={bem('day')} onClick={onClick}>
|
||||
<div class={bem('selected-day')}>{item.text}</div>
|
||||
<div class={bem('selected-day')} style={{ background: this.color }}>
|
||||
{item.text}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -33,6 +33,13 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customCalendar')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('customColor')"
|
||||
:value="formatRange(date.customColor)"
|
||||
@click="show('range', 'customColor')"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('customRange')"
|
||||
@ -69,6 +76,7 @@
|
||||
<van-calendar
|
||||
v-model="showCalendar"
|
||||
:type="type"
|
||||
:color="color"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
@ -81,6 +89,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GREEN } from '../../utils/constant';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
@ -94,6 +104,7 @@ export default {
|
||||
selectRange: '选择日期区间',
|
||||
quickSelect: '快捷选择',
|
||||
confirmText: '完成',
|
||||
customColor: '自定义颜色',
|
||||
customRange: '自定义日期范围',
|
||||
customConfirm: '自定义按钮文字',
|
||||
customDayText: '自定义日期文案',
|
||||
@ -112,6 +123,7 @@ export default {
|
||||
selectRange: 'Select Date Range',
|
||||
quickSelect: 'Quick Select',
|
||||
confirmText: 'OK',
|
||||
customColor: 'Custom Color',
|
||||
customRange: 'Custom Date Range',
|
||||
customConfirm: 'Custom Confirm Text',
|
||||
customDayText: 'Custom Day Text',
|
||||
@ -128,11 +140,13 @@ export default {
|
||||
selectRange: [],
|
||||
quickSelect1: null,
|
||||
quickSelect2: [],
|
||||
customColor: [],
|
||||
customConfirm: [],
|
||||
customRange: null,
|
||||
customDayText: []
|
||||
},
|
||||
type: 'single',
|
||||
color: undefined,
|
||||
minDate: undefined,
|
||||
maxDate: undefined,
|
||||
formatter: undefined,
|
||||
@ -147,6 +161,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
resetSettings() {
|
||||
this.color = undefined;
|
||||
this.minDate = undefined;
|
||||
this.maxDate = undefined;
|
||||
this.formatter = undefined;
|
||||
@ -166,6 +181,9 @@ export default {
|
||||
case 'quickSelect2':
|
||||
this.showConfirm = false;
|
||||
break;
|
||||
case 'customColor':
|
||||
this.color = GREEN;
|
||||
break;
|
||||
case 'customConfirm':
|
||||
this.confirmText = this.$t('confirmText');
|
||||
this.confirmDisabledText = this.$t('confirmDisabledText');
|
||||
|
||||
@ -18,6 +18,7 @@ import Header from './components/Header';
|
||||
export default createComponent({
|
||||
props: {
|
||||
title: String,
|
||||
color: String,
|
||||
value: Boolean,
|
||||
formatter: Function,
|
||||
defaultDate: [Date, Array],
|
||||
@ -228,6 +229,7 @@ export default createComponent({
|
||||
refInFor
|
||||
date={date}
|
||||
type={this.type}
|
||||
color={this.color}
|
||||
minDate={this.minDate}
|
||||
maxDate={this.maxDate}
|
||||
showMark={this.showMark}
|
||||
@ -257,6 +259,7 @@ export default createComponent({
|
||||
round
|
||||
block
|
||||
type="danger"
|
||||
color={this.color}
|
||||
class={bem('confirm')}
|
||||
disabled={this.buttonDisabled}
|
||||
onClick={this.onConfirm}
|
||||
|
||||
@ -101,7 +101,17 @@
|
||||
|
||||
&--middle {
|
||||
color: @calendar-range-middle-color;
|
||||
background-color: @calendar-range-middle-background-color;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: currentColor;
|
||||
opacity: @calendar-range-middle-background-opacity;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
|
||||
@ -23,6 +23,10 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>自定义颜色</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>自定义日期范围</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
|
||||
@ -1,5 +1,107 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`color prop when type is range 1`] = `
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">日期选择</div>
|
||||
<div class="van-calendar__month-title">2010年1月</div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">11</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">12</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">13</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">14</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">15</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">16</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">17</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">18</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">19</div>
|
||||
<div class="van-calendar__day van-calendar__day--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`color prop when type is single 1`] = `
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">日期选择</div>
|
||||
<div class="van-calendar__month-title">2010年1月</div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day" style="background: blue;">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`formatter prop 1`] = `
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
|
||||
@ -375,3 +375,35 @@ test('set show-mark prop to false', async () => {
|
||||
|
||||
expect(wrapper.find('.van-calendar__month-mark').element).toBeFalsy();
|
||||
});
|
||||
|
||||
test('color prop when type is single', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
color: 'blue',
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('color prop when type is range', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
defaultDate: [minDate, maxDate],
|
||||
type: 'range',
|
||||
minDate,
|
||||
maxDate,
|
||||
color: 'blue',
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -150,7 +150,7 @@
|
||||
@calendar-range-edge-color: @white;
|
||||
@calendar-range-edge-background-color: @red;
|
||||
@calendar-range-middle-color: @red;
|
||||
@calendar-range-middle-background-color: fade(@red, 10%);
|
||||
@calendar-range-middle-background-opacity: .1;
|
||||
@calendar-selected-day-size: 54px;
|
||||
@calendar-selected-day-color: @white;
|
||||
@calendar-info-font-size: @font-size-xs;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user