mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
TimePicker: add chalk theme (#7102)
* TimePicker: add chalk theme * minor style fixes
This commit is contained in:
杨奕
GitHub
parent
2a0a4bc651
commit
ad88dd2ec7
@ -512,11 +512,11 @@ Form component allows you to verify your data, helping you find and correct erro
|
||||
|
||||
### Custom validation rules
|
||||
|
||||
This example shows how to customize your own validation rules to finish a two-factor password verification. And you can you `status-feedback` to add validate status icon。
|
||||
This example shows how to customize your own validation rules to finish a two-factor password verification.
|
||||
|
||||
:::demo
|
||||
:::demo Here we use `status-icon` to reflect validation result as an icon.
|
||||
```html
|
||||
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Password" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
@ -750,6 +750,8 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
|
||||
| label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
|
||||
| label-suffix | suffix of the label | string | — | — |
|
||||
| show-message | whether to show the error message | boolean | — | true |
|
||||
| inline-message | whether to display the error message inline with the form item | boolean | — | false |
|
||||
| status-icon | whether to display an icon indicating the validation result | boolean | — | false |
|
||||
|
||||
### Form Methods
|
||||
|
||||
@ -772,9 +774,8 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
|
||||
| show-message | whether to show the error message | boolean | — | true |
|
||||
| inline-message | inline style validate message | boolean | — | false |
|
||||
|
||||
|
||||
### Form-Item Slot
|
||||
| name | Description |
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | content of Form Item |
|
||||
| label | content of label |
|
||||
|
||||
@ -193,30 +193,30 @@ export default {
|
||||
|
||||
Add an icon to indicate input type.
|
||||
|
||||
::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
|
||||
::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
|
||||
```html
|
||||
<div class="demo-input-suffix">
|
||||
属性方式：
|
||||
Using attributes
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
suffix-icon="date"
|
||||
placeholder="Pick a date"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
prefix-icon="search"
|
||||
placeholder="Type something"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
slot 方式：
|
||||
Using slots
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
placeholder="Pick a date"
|
||||
v-model="input22">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
placeholder="Type something"
|
||||
v-model="input23">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
@ -351,11 +351,11 @@ export default {
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
size="large"
|
||||
placeholder="Please Input"
|
||||
v-model="input6">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="Please Input"
|
||||
v-model="input7">
|
||||
</el-input>
|
||||
@ -623,7 +623,8 @@ Search data from server-side.
|
||||
|placeholder| placeholder of Input| string | — | — |
|
||||
|disabled | whether Input is disabled | boolean | — | false |
|
||||
|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — |
|
||||
|icon | icon name | string | — | — |
|
||||
| prefix-icon | prefix icon class | string | — | — |
|
||||
| suffix-icon | suffix icon class | string | — | — |
|
||||
|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
|
||||
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
||||
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|
||||
@ -637,11 +638,19 @@ Search data from server-side.
|
||||
|form | same as `form` in native input | string | — | — |
|
||||
| on-icon-click | hook function when clicking on the input icon | function | — | — |
|
||||
|
||||
### Input slot
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| prefix | content as Input prefix |
|
||||
| suffix | content as Input suffix |
|
||||
| prepend | content to prepend before Input |
|
||||
| append | content to append after Input |
|
||||
|
||||
### Input Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
|click | triggers when the icon inside Input is clicked | (event: Event) |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
| change | triggers when the icon inside Input value change | (value: string \| number) |
|
||||
|
||||
@ -155,10 +155,10 @@ Can pick an arbitrary time range.
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | Whether to show clear button | boolean | — | true |
|
||||
| size | size of Input | string | large/small/mini | — |
|
||||
| size | size of Input | string | medium / small / mini | — |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| align | alignment | left/center/right | left |
|
||||
| align | alignment | left / center / right | left |
|
||||
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
|name | same as `name` in native input | string | — | — |
|
||||
@ -175,7 +175,7 @@ Can pick an arbitrary time range.
|
||||
### Time Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
|
||||
| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
|
||||
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
|
||||
|
||||
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
::: demo Form 组件提供了表单验证的功能，只需要通过 `rule` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
|
||||
```html
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" message-position="right">
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
@ -503,18 +503,18 @@
|
||||
|
||||
### 自定义校验规则
|
||||
|
||||
这个例子中展示了如何使用自定义验证规则来完成密码的二次验证，并且你可以通过 `status-feedback` 来给输入框添加反馈图标。
|
||||
这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
|
||||
|
||||
::: demo
|
||||
::: demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
|
||||
```html
|
||||
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item status-feedback label="密码" prop="pass">
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="密码" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item status-feedback label="确认密码" prop="checkPass">
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item status-feedback label="年龄" prop="age">
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input v-model.number="ruleForm2.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@ -739,6 +739,8 @@
|
||||
| label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | — | — |
|
||||
| label-suffix | 表单域标签的后缀 | string | — | — |
|
||||
| show-message | 是否显示校验错误信息 | boolean | — | true |
|
||||
| inline-message | 是否以行内形式展示校验信息 | boolean | — | false |
|
||||
| status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
|
||||
|
||||
### Form Methods
|
||||
|
||||
|
||||
@ -239,18 +239,18 @@ export default {
|
||||
|
||||
带有图标标记输入类型
|
||||
|
||||
::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
|
||||
::: demo 可以通过 `prefix-icon` 和 `suffix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
|
||||
```html
|
||||
<div class="demo-input-suffix">
|
||||
属性方式：
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
suffix-icon="date"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
prefix-icon="search"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21">
|
||||
</el-input>
|
||||
</div>
|
||||
@ -393,22 +393,26 @@ export default {
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
size="large"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input6">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input7">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input8">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input9">
|
||||
</el-input>
|
||||
</div>
|
||||
@ -792,7 +796,8 @@ export default {
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | large, small, mini | — |
|
||||
| icon | 输入框尾部图标 | string | — | — |
|
||||
| prefix-icon | 输入框头部图标 | string | — | — |
|
||||
| suffix-icon | 输入框尾部图标 | string | — | — |
|
||||
| rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 |
|
||||
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
||||
| auto-complete | 原生属性，自动补全 | string | on, off | off |
|
||||
@ -804,12 +809,18 @@ export default {
|
||||
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
|
||||
| autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
|
||||
| form | 原生属性 | string | — | — |
|
||||
| on-icon-click | 点击 Input 内的图标的钩子函数 | function | — | — |
|
||||
|
||||
### Input slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| prefix | 输入框头部内容 |
|
||||
| suffix | 输入框尾部内容 |
|
||||
| prepend | 输入框前置内容 |
|
||||
| append | 输入框后置内容 |
|
||||
|
||||
### Input Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| click | 点击 Input 内的图标时触发 | (event: Event) |
|
||||
| blur | 在 Input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 在 Input 获得焦点时触发 | (event: Event) |
|
||||
| change | 在 Input 值改变时触发 | (value: string \| number) |
|
||||
|
||||
@ -154,10 +154,10 @@
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | — | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| size | 输入框尺寸 | string | medium / small / mini | — |
|
||||
| placeholder | 占位内容 | string | — | — |
|
||||
| value | 绑定值 | TimePicker: DateTimeSelect: String | — | — |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
|
||||
| align | 对齐方式 | string | left / center / right | left |
|
||||
| popper-class | TimePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| name | 原生属性 | string | — | — |
|
||||
@ -174,11 +174,11 @@
|
||||
### Time Picker Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
|
||||
| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
|
||||
| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|---------|--------|---------|
|
||||
| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
|
||||
| blur | 当 input 失去焦点时触发 | (event: Event) |
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
}"></span>
|
||||
<span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
|
||||
</span>
|
||||
<span class="el-color-picker__icon el-icon-caret-bottom" v-show="value || showPanelColor"></span>
|
||||
<span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
|
||||
</div>
|
||||
<picker-dropdown
|
||||
ref="dropdown"
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
v-for="(disabled, hour) in hoursList"
|
||||
track-by="hour"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': hour === hours, 'disabled': disabled }"
|
||||
v-text="hour"></li>
|
||||
:class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + hour).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
@mouseenter.native="emitSelectRange('minutes')"
|
||||
@ -28,8 +27,7 @@
|
||||
@click="handleClick('minutes', key, true)"
|
||||
v-for="(minute, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === minutes }"
|
||||
v-text="key"></li>
|
||||
:class="{ 'active': key === minutes }">{{ ('0' + key).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
v-show="showSeconds"
|
||||
@ -44,8 +42,7 @@
|
||||
@click="handleClick('seconds', key, true)"
|
||||
v-for="(second, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === seconds }"
|
||||
v-text="key"></li>
|
||||
:class="{ 'active': key === seconds }">{{ ('0' + key).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
@ -85,7 +82,7 @@
|
||||
if (!(newVal >= 0 && newVal <= 23)) {
|
||||
this.hoursPrivate = oldVal;
|
||||
}
|
||||
this.ajustElTop('hour', newVal);
|
||||
this.adjustElTop('hour', newVal);
|
||||
this.$emit('change', { hours: newVal });
|
||||
},
|
||||
|
||||
@ -93,7 +90,7 @@
|
||||
if (!(newVal >= 0 && newVal <= 59)) {
|
||||
this.minutesPrivate = oldVal;
|
||||
}
|
||||
this.ajustElTop('minute', newVal);
|
||||
this.adjustElTop('minute', newVal);
|
||||
this.$emit('change', { minutes: newVal });
|
||||
},
|
||||
|
||||
@ -101,7 +98,7 @@
|
||||
if (!(newVal >= 0 && newVal <= 59)) {
|
||||
this.secondsPrivate = oldVal;
|
||||
}
|
||||
this.ajustElTop('second', newVal);
|
||||
this.adjustElTop('second', newVal);
|
||||
this.$emit('change', { seconds: newVal });
|
||||
}
|
||||
},
|
||||
@ -135,7 +132,7 @@
|
||||
},
|
||||
|
||||
created() {
|
||||
this.debounceAjustElTop = debounce(100, type => this.ajustElTop(type, this[`${type}s`]));
|
||||
this.debounceAdjustElTop = debounce(200, type => this.adjustElTop(type, this[`${type}s`]));
|
||||
},
|
||||
|
||||
mounted() {
|
||||
@ -168,7 +165,9 @@
|
||||
|
||||
bindScrollEvent() {
|
||||
const bindFuntion = (type) => {
|
||||
this[`${type}El`].onscroll = (e) => this.handleScroll(type, e);
|
||||
this[`${type}El`].onscroll = (e) => {
|
||||
this.handleScroll(type, e);
|
||||
};
|
||||
};
|
||||
bindFuntion('hour');
|
||||
bindFuntion('minute');
|
||||
@ -176,19 +175,19 @@
|
||||
},
|
||||
|
||||
handleScroll(type) {
|
||||
const ajust = {};
|
||||
ajust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
|
||||
this.debounceAjustElTop(type);
|
||||
this.$emit('change', ajust);
|
||||
const adjust = {};
|
||||
adjust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
|
||||
this.debounceAdjustElTop(type);
|
||||
this.$emit('change', adjust);
|
||||
},
|
||||
|
||||
ajustScrollTop() {
|
||||
this.ajustElTop('hour', this.hours);
|
||||
this.ajustElTop('minute', this.minutes);
|
||||
this.ajustElTop('second', this.seconds);
|
||||
adjustScrollTop() {
|
||||
this.adjustElTop('hour', this.hours);
|
||||
this.adjustElTop('minute', this.minutes);
|
||||
this.adjustElTop('second', this.seconds);
|
||||
},
|
||||
|
||||
ajustElTop(type, value) {
|
||||
adjustElTop(type, value) {
|
||||
this[`${type}El`].scrollTop = Math.max(0, (value - 2.5) * 32 + 80);
|
||||
},
|
||||
|
||||
@ -218,7 +217,7 @@
|
||||
}
|
||||
|
||||
this.$emit('change', { [label]: now });
|
||||
this.ajustElTop(label.slice(0, -1), now);
|
||||
this.adjustElTop(label.slice(0, -1), now);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div
|
||||
v-show="visible"
|
||||
:style="{ width: width + 'px' }"
|
||||
class="el-picker-panel el-date-range-picker"
|
||||
class="el-picker-panel el-date-range-picker el-popper"
|
||||
:class="[{
|
||||
'has-sidebar': $slots.sidebar || shortcuts,
|
||||
'has-time': showTime
|
||||
@ -285,11 +285,11 @@
|
||||
},
|
||||
|
||||
minTimePickerVisible(val) {
|
||||
if (val) this.$nextTick(() => this.$refs.minTimePicker.ajustScrollTop());
|
||||
if (val) this.$nextTick(() => this.$refs.minTimePicker.adjustScrollTop());
|
||||
},
|
||||
|
||||
maxTimePickerVisible(val) {
|
||||
if (val) this.$nextTick(() => this.$refs.maxTimePicker.ajustScrollTop());
|
||||
if (val) this.$nextTick(() => this.$refs.maxTimePicker.adjustScrollTop());
|
||||
},
|
||||
|
||||
value(newVal) {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
:style="{
|
||||
width: width + 'px'
|
||||
}"
|
||||
class="el-picker-panel el-date-picker"
|
||||
class="el-picker-panel el-date-picker el-popper"
|
||||
:class="[{
|
||||
'has-sidebar': $slots.sidebar || shortcuts,
|
||||
'has-time': showTime
|
||||
@ -166,7 +166,7 @@
|
||||
},
|
||||
|
||||
timePickerVisible(val) {
|
||||
if (val) this.$nextTick(() => this.$refs.timepicker.ajustScrollTop());
|
||||
if (val) this.$nextTick(() => this.$refs.timepicker.adjustScrollTop());
|
||||
},
|
||||
|
||||
selectionMode(newVal) {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div
|
||||
v-show="visible"
|
||||
:style="{ width: width + 'px' }"
|
||||
class="el-time-range-picker el-picker-panel"
|
||||
class="el-time-range-picker el-picker-panel el-popper"
|
||||
:class="popperClass">
|
||||
<div class="el-time-range-picker__content">
|
||||
<div class="el-time-range-picker__cell">
|
||||
@ -126,7 +126,7 @@
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.panelCreated();
|
||||
this.$nextTick(_ => this.ajustScrollTop());
|
||||
this.$nextTick(_ => this.adjustScrollTop());
|
||||
},
|
||||
|
||||
visible(val) {
|
||||
@ -228,9 +228,9 @@
|
||||
this.$emit('pick', [this.minTime, this.maxTime], visible, first);
|
||||
},
|
||||
|
||||
ajustScrollTop() {
|
||||
this.$refs.minSpinner.ajustScrollTop();
|
||||
this.$refs.maxSpinner.ajustScrollTop();
|
||||
adjustScrollTop() {
|
||||
this.$refs.minSpinner.adjustScrollTop();
|
||||
this.$refs.maxSpinner.adjustScrollTop();
|
||||
},
|
||||
|
||||
scrollDown(step) {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
v-show="visible"
|
||||
:style="{ width: width + 'px' }"
|
||||
:class="popperClass"
|
||||
class="el-picker-panel time-select">
|
||||
class="el-picker-panel time-select el-popper">
|
||||
<el-scrollbar noresize wrap-class="el-picker-panel__content">
|
||||
<div class="time-select-item"
|
||||
v-for="item in items"
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div
|
||||
v-show="currentVisible"
|
||||
:style="{width: width + 'px'}"
|
||||
class="el-time-panel"
|
||||
class="el-time-panel el-popper"
|
||||
:class="popperClass">
|
||||
<div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
|
||||
<time-spinner
|
||||
@ -80,7 +80,7 @@
|
||||
minutes: date.getMinutes(),
|
||||
seconds: date.getSeconds()
|
||||
});
|
||||
this.$nextTick(_ => this.ajustScrollTop());
|
||||
this.$nextTick(_ => this.adjustScrollTop());
|
||||
},
|
||||
|
||||
selectableRange(val) {
|
||||
@ -163,8 +163,8 @@
|
||||
this.$emit('pick', date, visible, first);
|
||||
},
|
||||
|
||||
ajustScrollTop() {
|
||||
return this.$refs.spinner.ajustScrollTop();
|
||||
adjustScrollTop() {
|
||||
return this.$refs.spinner.adjustScrollTop();
|
||||
},
|
||||
|
||||
scrollDown(step) {
|
||||
|
||||
@ -12,15 +12,16 @@
|
||||
@blur="handleBlur"
|
||||
@keydown.native="handleKeydown"
|
||||
:value="displayValue"
|
||||
@mouseenter.native="handleMouseEnter"
|
||||
@mouseleave.native="showClose = false"
|
||||
@change.native="displayValue = $event.target.value"
|
||||
:validateEvent="false"
|
||||
:prefix-icon="triggerClass"
|
||||
ref="reference">
|
||||
<i slot="suffix"
|
||||
class="el-input__icon"
|
||||
@click="handleClickIcon"
|
||||
:class="[showClose ? 'el-icon-close' : triggerClass]"
|
||||
@mouseenter="handleMouseEnterIcon"
|
||||
@mouseleave="showClose = false"
|
||||
:class="{ 'el-icon-circle-close': showClose }"
|
||||
v-if="haveTrigger">
|
||||
</i>
|
||||
</el-input>
|
||||
@ -43,7 +44,9 @@ const NewPopper = {
|
||||
boundariesPadding: Popper.props.boundariesPadding
|
||||
},
|
||||
methods: Popper.methods,
|
||||
data: Popper.data,
|
||||
data() {
|
||||
return merge({ visibleArrow: true }, Popper.data);
|
||||
},
|
||||
beforeDestroy: Popper.beforeDestroy
|
||||
};
|
||||
|
||||
@ -362,7 +365,7 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMouseEnterIcon() {
|
||||
handleMouseEnter() {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (!this.valueIsEmpty && this.clearable) {
|
||||
this.showClose = true;
|
||||
@ -445,7 +448,7 @@ export default {
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.picker.ajustScrollTop && this.picker.ajustScrollTop();
|
||||
this.picker.adjustScrollTop && this.picker.adjustScrollTop();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="el-form-item" :class="{
|
||||
'el-form-item--feedback': statusFeedback,
|
||||
'el-form-item--feedback': elForm && elForm.statusIcon,
|
||||
'is-error': validateState === 'error',
|
||||
'is-validating': validateState === 'validating',
|
||||
'is-success': validateState === 'success',
|
||||
@ -15,7 +15,11 @@
|
||||
<div
|
||||
v-if="validateState === 'error' && showMessage && form.showMessage"
|
||||
class="el-form-item__error"
|
||||
:class="{'el-form-item__error--inline': inlineMessage}"
|
||||
:class="{
|
||||
'el-form-item__error--inline': typeof inlineMessage === 'boolean'
|
||||
? inlineMessage
|
||||
: (elForm && elForm.inlineMessage || false)
|
||||
}"
|
||||
>
|
||||
{{validateMessage}}
|
||||
</div>
|
||||
@ -72,11 +76,13 @@
|
||||
labelWidth: String,
|
||||
prop: String,
|
||||
required: Boolean,
|
||||
statusFeedback: Boolean,
|
||||
rules: [Object, Array],
|
||||
error: String,
|
||||
validateStatus: String,
|
||||
inlineMessage: Boolean,
|
||||
inlineMessage: {
|
||||
type: [String, Boolean],
|
||||
default: ''
|
||||
},
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
||||
@ -28,6 +28,8 @@
|
||||
default: ''
|
||||
},
|
||||
inline: Boolean,
|
||||
inlineMessage: Boolean,
|
||||
statusIcon: Boolean,
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<slot name="prefix"></slot>
|
||||
<i class="el-input__icon"
|
||||
v-if="prefixIcon"
|
||||
:class="['el-icon-' + prefixIcon]">
|
||||
:class="prefixIcon">
|
||||
</i>
|
||||
</span>
|
||||
<input
|
||||
@ -41,7 +41,7 @@
|
||||
<slot name="suffix"></slot>
|
||||
<i class="el-input__icon"
|
||||
v-if="suffixIcon"
|
||||
:class="['el-icon-' + suffixIcon]">
|
||||
:class="suffixIcon">
|
||||
</i>
|
||||
</span>
|
||||
<i class="el-input__icon"
|
||||
@ -132,7 +132,7 @@
|
||||
|
||||
computed: {
|
||||
validateState() {
|
||||
return this.formItem ? this.formItem.validateState : '';
|
||||
return this.elFormItem ? this.elFormItem.validateState : '';
|
||||
},
|
||||
validateIcon() {
|
||||
return {
|
||||
|
||||
@ -3,9 +3,10 @@
|
||||
|
||||
@include b(card) {
|
||||
border-radius: $--card-border-radius;
|
||||
border: 1px solid $--card-border-color;
|
||||
background-color: $--color-white;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
||||
box-shadow: $--box-shadow-light;
|
||||
color: $--color-text-primary;
|
||||
|
||||
@include e(header) {
|
||||
|
||||
@ -53,11 +53,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include m(large) {
|
||||
font-size: $--input-large-font-size;
|
||||
@include m(medium) {
|
||||
font-size: $--input-medium-font-size;
|
||||
|
||||
.el-cascader__label {
|
||||
line-height: #{$--input-large-height - 2};
|
||||
line-height: #{$--input-medium-height - 2};
|
||||
}
|
||||
}
|
||||
@include m(small) {
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
@include b(checkbox) {
|
||||
color: $--checkbox-color;
|
||||
font-weight: $--checkbox-font-weight;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
width: 280px;
|
||||
height: 180px;
|
||||
|
||||
@include e((white, black)) {
|
||||
@include e(('white', 'black')) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -69,11 +69,11 @@
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@include e(white) {
|
||||
@include e('white') {
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
@include e(black) {
|
||||
@include e('black') {
|
||||
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
||||
}
|
||||
|
||||
|
||||
@ -70,7 +70,8 @@ $--border-radius-circle: 100%;
|
||||
-------------------------- */
|
||||
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
||||
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
|
||||
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
|
||||
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Fill
|
||||
-------------------------- */
|
||||
$--fill-base: $--color-white;
|
||||
@ -308,7 +309,7 @@ $--notification-danger-color: $--color-danger;
|
||||
$--input-font-size: $--font-size-base;
|
||||
$--input-color: $--font-color-base;
|
||||
$--input-width: 140px;
|
||||
$--input-height: 36px;
|
||||
$--input-height: 40px;
|
||||
$--input-border: $--border-base;
|
||||
$--input-border-color: $--border-color-base;
|
||||
$--input-border-radius: $--border-radius-base;
|
||||
@ -330,14 +331,14 @@ $--input-disabled-border: $--disabled-border-base;
|
||||
$--input-disabled-color: $--disabled-color-base;
|
||||
$--input-disabled-placeholder-color: $--color-text-placeholder;
|
||||
|
||||
$--input-large-font-size: 16px;
|
||||
$--input-large-height: 42px;
|
||||
$--input-medium-font-size: 14px;
|
||||
$--input-medium-height: 36px;
|
||||
|
||||
$--input-small-font-size: 13px;
|
||||
$--input-small-height: 30px;
|
||||
$--input-small-height: 32px;
|
||||
|
||||
$--input-mini-font-size: 12px;
|
||||
$--input-mini-height: 22px;
|
||||
$--input-mini-height: 28px;
|
||||
|
||||
/* Cascader
|
||||
-------------------------- */
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@import "../common/var";
|
||||
|
||||
@include b(picker-panel) {
|
||||
color: $--datepicker-color;
|
||||
color: $--color-text-regular;
|
||||
border: 1px solid $--datepicker-border-color;
|
||||
box-shadow: 0 2px 6px #ccc;
|
||||
box-shadow: $--box-shadow-light;
|
||||
background: $--color-white;
|
||||
border-radius: 2px;
|
||||
border-radius: $--border-radius-base;
|
||||
line-height: 20px;
|
||||
margin: 5px 0;
|
||||
|
||||
@ -91,6 +91,10 @@
|
||||
padding: 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
transform: translateX(-400%);
|
||||
}
|
||||
}
|
||||
|
||||
.el-picker-panel *[slot=sidebar],
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
margin: 5px 0;
|
||||
border: solid 1px $--datepicker-border-color;
|
||||
background-color: $--color-white;
|
||||
box-shadow: $--box-shadow-base;
|
||||
box-shadow: $--box-shadow-light;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
@ -18,14 +18,10 @@
|
||||
overflow: hidden;
|
||||
|
||||
&::after, &::before {
|
||||
content: ":";
|
||||
content: "";
|
||||
top: 50%;
|
||||
color: $--color-white;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
margin-top: -15px;
|
||||
line-height: 16px;
|
||||
background-color: $--datepicker-active-color;
|
||||
height: 32px;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
@ -33,16 +29,20 @@
|
||||
box-sizing: border-box;
|
||||
padding-top: 6px;
|
||||
text-align: left;
|
||||
border-top: 1px solid $--border-color-light;
|
||||
border-bottom: 1px solid $--border-color-light;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
margin-left: 12%;
|
||||
margin-right: 12%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
padding-left: 50%;
|
||||
margin-right: -2px;
|
||||
margin-right: 12%;
|
||||
margin-left: 12%;
|
||||
}
|
||||
|
||||
&.has-seconds {
|
||||
@ -74,11 +74,15 @@
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
color: $--color-black;
|
||||
color: $--color-text-primary;
|
||||
|
||||
&.confirm {
|
||||
font-weight: 800;
|
||||
color: $--datepicker-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
transform: translateX(-400%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,18 +43,20 @@
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
color: $--font-color-base;
|
||||
|
||||
&:hover:not(.disabled):not(.active) {
|
||||
background: $--datepicker-cell-hover-color;
|
||||
background: $--background-color-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active:not(.disabled) {
|
||||
color: $--color-white;
|
||||
color: $--color-text-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $--datepicker-border-color;
|
||||
color: $--color-text-placeholder;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,19 +58,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(large) {
|
||||
@include m(medium) {
|
||||
width: 200px;
|
||||
|
||||
& .el-input-number__increase, .el-input-number__decrease {
|
||||
line-height: #{$--input-large-height - 2};
|
||||
width: $--input-large-height;
|
||||
font-size: $--input-large-font-size;
|
||||
line-height: #{$--input-medium-height - 2};
|
||||
width: $--input-medium-height;
|
||||
font-size: $--input-medium-font-size;
|
||||
}
|
||||
& .el-input-number__decrease {
|
||||
right: #{$--input-large-height + 1};
|
||||
right: #{$--input-medium-height + 1};
|
||||
}
|
||||
& .el-input__inner {
|
||||
padding-right: #{$--input-large-height * 2 + 10};
|
||||
padding-right: #{$--input-medium-height * 2 + 10};
|
||||
}
|
||||
}
|
||||
@include m(small) {
|
||||
|
||||
@ -106,19 +106,19 @@
|
||||
}
|
||||
@include m(suffix) {
|
||||
.el-input__inner {
|
||||
padding-right: 25px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
@include m(prefix) {
|
||||
.el-input__inner {
|
||||
padding-left: 25px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
@include m(large) {
|
||||
font-size: $--input-large-font-size;
|
||||
@include m(medium) {
|
||||
font-size: $--input-medium-font-size;
|
||||
|
||||
& .el-input__inner {
|
||||
height: $--input-large-height;
|
||||
height: $--input-medium-height;
|
||||
}
|
||||
}
|
||||
@include m(small) {
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
z-index: 100;
|
||||
min-width: 100%;
|
||||
box-shadow: $--box-shadow-light;
|
||||
border-radius: $--border-radius-small;
|
||||
}
|
||||
|
||||
& .el-submenu__title {
|
||||
@ -138,6 +139,8 @@
|
||||
top: 0;
|
||||
left: 100%;
|
||||
z-index: 10;
|
||||
border: 1px solid $--border-color-light;
|
||||
border-radius: $--border-radius-small;
|
||||
box-shadow: $--box-shadow-light;
|
||||
}
|
||||
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
transform: translateY(50%);
|
||||
}
|
||||
&.el-slider--with-input {
|
||||
padding-bottom: #{$--input-large-height + 22px};
|
||||
padding-bottom: #{$--input-medium-height + 22px};
|
||||
.el-slider__input {
|
||||
overflow: visible;
|
||||
float: none;
|
||||
|
||||
@ -19,12 +19,8 @@
|
||||
}
|
||||
|
||||
.time-select-item.selected:not(.disabled) {
|
||||
background-color: $--datepicker-active-color;
|
||||
color: $--color-white;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-primary;
|
||||
}
|
||||
color: $--color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time-select-item.disabled {
|
||||
@ -33,6 +29,7 @@
|
||||
}
|
||||
|
||||
.time-select-item:hover {
|
||||
background-color: $--datepicker-cell-hover-color;
|
||||
background-color: $--background-color-base;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -38,15 +38,15 @@ describe('TimePicker', () => {
|
||||
input.focus();
|
||||
input.blur();
|
||||
|
||||
Vue.nextTick(_ => {
|
||||
setTimeout(_ => {
|
||||
const times = vm.picker.$el.querySelectorAll('.active');
|
||||
|
||||
expect(times[0].textContent).to.equal('18');
|
||||
expect(times[1].textContent).to.equal('40');
|
||||
expect(times[2].textContent).to.equal('0');
|
||||
expect(times[2].textContent).to.equal('00');
|
||||
destroyVM(vm);
|
||||
done();
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('select time', done => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user