mirror of https://github.com/ElemeFE/element
add clearable api (#1994)
parent
6e428ffcc7
commit
882a9d796e
|
@ -256,6 +256,7 @@ Picking a date range is supported.
|
|||
| disabled | whether DatePicker is disabled | boolean | - | false |
|
||||
|size | size of Input | string | large/small/mini | — |
|
||||
| editable | whether the input is editable | boolean | - | true |
|
||||
| clearable | Whether to show clear button | boolean | - | true |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
|
|
|
@ -210,6 +210,7 @@ Select date and time in one picker.
|
|||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| 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 | — |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
|
|
|
@ -146,7 +146,8 @@ Can pick an arbitrary time range.
|
|||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | - | false |
|
||||
| editable | whether the input is editable | boolean | - | true |
|
||||
|size | size of Input | string | large/small/mini | — |
|
||||
| clearable | Whether to show clear button | boolean | - | true |
|
||||
| size | size of Input | string | large/small/mini | — |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
|
|
|
@ -289,6 +289,7 @@
|
|||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | - | false |
|
||||
| editable | 文本框可输入 | boolean | - | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | - | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
|
|
|
@ -233,6 +233,7 @@
|
|||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | - | false |
|
||||
| editable | 文本框可输入 | boolean | - | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | - | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
|
|
|
@ -153,6 +153,7 @@
|
|||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | - | false |
|
||||
| editable | 文本框可输入 | boolean | - | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | - | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 占位内容 | string | — | — |
|
||||
| format | 时间格式化(TimePicker) | string | 小时:`HH`,分:`mm`,秒:`ss` | 'HH:mm:ss' |
|
||||
|
|
|
@ -187,6 +187,10 @@ export default {
|
|||
readonly: Boolean,
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
popperClass: String,
|
||||
editable: {
|
||||
type: Boolean,
|
||||
|
@ -324,18 +328,18 @@ export default {
|
|||
methods: {
|
||||
handleMouseEnterIcon() {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (!this.valueIsEmpty) {
|
||||
if (!this.valueIsEmpty && this.clearable) {
|
||||
this.showClose = true;
|
||||
}
|
||||
},
|
||||
|
||||
handleClickIcon() {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (this.valueIsEmpty) {
|
||||
this.pickerVisible = !this.pickerVisible;
|
||||
} else {
|
||||
if (this.showClose) {
|
||||
this.internalValue = '';
|
||||
this.$emit('input', '');
|
||||
} else {
|
||||
this.pickerVisible = !this.pickerVisible;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -91,6 +91,31 @@ describe('DatePicker', () => {
|
|||
}, DELAY);
|
||||
});
|
||||
|
||||
it('disabled clear value', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-date-picker v-model="value" ref="compo" :clearable="false"></el-date-picker>
|
||||
`,
|
||||
data() {
|
||||
return { value: '' };
|
||||
}
|
||||
}, true);
|
||||
const input = vm.$el.querySelector('input');
|
||||
|
||||
input.focus();
|
||||
setTimeout(_ => {
|
||||
const $el = vm.$refs.compo.picker.$el;
|
||||
$el.querySelector('td.available').click();
|
||||
vm.$nextTick(_ => {
|
||||
vm.$el.querySelector('.el-input__icon').click();
|
||||
setTimeout(_ => {
|
||||
expect(vm.value).to.be.exist;
|
||||
done();
|
||||
}, DELAY);
|
||||
});
|
||||
}, DELAY);
|
||||
});
|
||||
|
||||
it('reset', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
|
|
Loading…
Reference in New Issue