mirror of https://github.com/ElemeFE/element
Form: add size attribute (#7428)
Black Wayne
杨奕
parent
ab47262588
commit
9b09f6aa9f
|
|
@ -31,6 +31,9 @@ const install = function(Vue, opts = {}) {
|
|||
|
||||
Vue.use(Loading.directive);
|
||||
|
||||
const ELEMENT = {};
|
||||
ELEMENT.size = opts.size || '';
|
||||
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
|
|
@ -38,6 +41,8 @@ const install = function(Vue, opts = {}) {
|
|||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
|
||||
Vue.prototype.$ELEMENT = ELEMENT;
|
||||
};
|
||||
|
||||
/* istanbul ignore if */
|
||||
|
|
|
|||
|
|
@ -1678,7 +1678,7 @@ Search and select options with a keyword.
|
|||
| filterable | whether the options can be searched | boolean | — | — |
|
||||
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
|
||||
| change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
|
||||
| size | size of Input | string | large / small / mini | — |
|
||||
| size | size of Input | string | medium / small / mini | — |
|
||||
|
||||
### props
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -287,7 +287,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
|
|||
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
|
||||
| width | width of Dialog | string | — | 50% |
|
||||
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
|
||||
| top | value for `margin-top` of Dialog CSS, works when `size` is not `full` | string | — | 15vh |
|
||||
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
|
||||
| modal | whether a mask is displayed | boolean | — | true |
|
||||
| modal-append-to-body | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean | — | true |
|
||||
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -739,6 +739,51 @@ This example shows how to customize your own validation rules to finish a two-fa
|
|||
When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
|
||||
:::
|
||||
|
||||
### Size control
|
||||
|
||||
All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
|
||||
|
||||
::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
|
||||
```html
|
||||
<el-form ref="form" :model="form" label-width="120px" size="mini">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="form.resource" size="medium">
|
||||
<el-radio border label="Sponsor"></el-radio>
|
||||
<el-radio border label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item size="large">
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
```
|
||||
:::
|
||||
|
||||
### Form Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
@ -752,6 +797,7 @@ 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 | 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 |
|
||||
| size | control the size of components in this form | string | medium / small / mini | - |
|
||||
|
||||
### Form Methods
|
||||
|
||||
|
|
@ -773,6 +819,7 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
|
|||
| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
|
||||
| show-message | whether to show the error message | boolean | — | true |
|
||||
| inline-message | inline style validate message | boolean | — | false |
|
||||
| size | control the size of components in this form-item | string | medium / small / mini | - |
|
||||
|
||||
### Form-Item Slot
|
||||
| Name | Description |
|
||||
|
|
|
|||
|
|
@ -1678,7 +1678,7 @@
|
|||
| filterable | 是否可搜索选项 | boolean | — | — |
|
||||
| debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
|
||||
| change-on-select | 是否允许选择任意一级的选项 | boolean | — | false |
|
||||
| size | 尺寸 | string | large / small / mini | — |
|
||||
| size | 尺寸 | string | medium / small / mini | — |
|
||||
|
||||
### props
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -282,7 +282,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
|
|||
| title | Dialog 的标题，也可通过具名 slot （见下表）传入 | string | — | — |
|
||||
| width | Dialog 的宽度 | string | — | 50% |
|
||||
| fullscreen | 是否为全屏 Dialog | boolean | — | false |
|
||||
| top | Dialog CSS 中的 margin-top 值（仅在 size 不为 full 时有效） | string | — | 15vh |
|
||||
| top | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
|
||||
| modal | 是否需要遮罩层 | boolean | — | true |
|
||||
| modal-append-to-body | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 | boolean | — | true |
|
||||
| append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -728,6 +728,52 @@
|
|||
嵌套在 `el-form-item` 中的 `el-form-item` 标签宽度默认为零，不会继承 `el-form` 的 `label-width`。如果需要可以为其单独设置 `label-width` 属性。
|
||||
:::
|
||||
|
||||
### 表单内组件尺寸控制
|
||||
|
||||
通过设置 Form 上的 `size` 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。
|
||||
|
||||
::: demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。
|
||||
```html
|
||||
<el-form ref="form" :model="form" label-width="80px" size="mini">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource" size="medium">
|
||||
<el-radio border label="线上品牌商赞助"></el-radio>
|
||||
<el-radio border label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item size="large">
|
||||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
```
|
||||
:::
|
||||
|
||||
### Form Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
@ -741,6 +787,7 @@
|
|||
| show-message | 是否显示校验错误信息 | boolean | — | true |
|
||||
| inline-message | 是否以行内形式展示校验信息 | boolean | — | false |
|
||||
| status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
|
||||
| size | 用于控制该表单内组件的尺寸 | string | medium / small / mini | - |
|
||||
|
||||
### Form Methods
|
||||
|
||||
|
|
@ -762,6 +809,7 @@
|
|||
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
|
||||
| show-message | 是否显示校验错误信息 | boolean | — | true |
|
||||
| inline-message | 以行内形式展示校验信息 | boolean | — | false |
|
||||
| size | 用于控制该表单域下组件的尺寸 | string | medium / small / mini | - |
|
||||
|
||||
### Form-Item Slot
|
||||
| name | 说明 |
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
:type="nativeType"
|
||||
:class="[
|
||||
type ? 'el-button--' + type : '',
|
||||
size ? 'el-button--' + size : '',
|
||||
buttonSize ? 'el-button--' + buttonSize : '',
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading,
|
||||
|
|
@ -25,6 +25,8 @@
|
|||
export default {
|
||||
name: 'ElButton',
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
|
|
@ -46,6 +48,15 @@
|
|||
round: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
buttonSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(evt) {
|
||||
this.$emit('click', evt);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
'is-opened': menuVisible,
|
||||
'is-disabled': disabled
|
||||
},
|
||||
size ? 'el-cascader--' + size : ''
|
||||
cascaderSize ? 'el-cascader--' + cascaderSize : ''
|
||||
]"
|
||||
@click="handleClick"
|
||||
@mouseenter="inputHover = true"
|
||||
|
|
@ -87,6 +87,8 @@ export default {
|
|||
|
||||
mixins: [popperMixin, emitter, Locale],
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
components: {
|
||||
ElInput
|
||||
},
|
||||
|
|
@ -179,6 +181,12 @@ export default {
|
|||
}
|
||||
});
|
||||
return labels;
|
||||
},
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
cascaderSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@
|
|||
|
||||
mixins: [Emitter],
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
selfModel: false,
|
||||
|
|
@ -133,8 +135,12 @@
|
|||
};
|
||||
},
|
||||
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
|
||||
size() {
|
||||
return this._checkboxGroup.size;
|
||||
return this._checkboxGroup.checkboxGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
},
|
||||
|
||||
isDisabled() {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
|
||||
mixins: [Emitter],
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
props: {
|
||||
value: {},
|
||||
disabled: Boolean,
|
||||
|
|
@ -18,6 +20,15 @@
|
|||
textColor: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
checkboxGroupSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(value) {
|
||||
this.dispatch('ElFormItem', 'el.form.change', [value]);
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@
|
|||
|
||||
mixins: [Emitter],
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
componentName: 'ElCheckbox',
|
||||
|
||||
data() {
|
||||
|
|
@ -131,10 +133,15 @@
|
|||
: this.disabled;
|
||||
},
|
||||
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
|
||||
checkboxSize() {
|
||||
const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
return this.isGroup
|
||||
? this._checkboxGroup.size || this.size
|
||||
: this.size;
|
||||
? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
|
||||
: temCheckboxSize;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
:class="[
|
||||
'el-color-picker',
|
||||
disabled ? 'is-disabled' : '',
|
||||
size ? `el-color-picker--${ size }` : ''
|
||||
colorSize ? `el-color-picker--${ colorSize }` : ''
|
||||
]"
|
||||
v-clickoutside="hide">
|
||||
<div class="el-color-picker__mask" v-if="disabled"></div>
|
||||
|
|
@ -46,6 +46,8 @@
|
|||
popperClass: String
|
||||
},
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
directives: { Clickoutside },
|
||||
|
||||
computed: {
|
||||
|
|
@ -58,6 +60,14 @@
|
|||
? `rgba(${ r }, ${ g }, ${ b }, ${ this.color.get('alpha') / 100 })`
|
||||
: `rgb(${ r }, ${ g }, ${ b })`;
|
||||
}
|
||||
},
|
||||
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
|
||||
colorSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
:class="'el-date-editor--' + type"
|
||||
:readonly="!editable || readonly"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:size="pickerSize"
|
||||
:name="name"
|
||||
v-if="!ranged"
|
||||
v-clickoutside="handleClose"
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
class="el-date-editor el-range-editor el-input__inner"
|
||||
:class="[
|
||||
'el-date-editor--' + type,
|
||||
'el-range-editor--' + size,
|
||||
'el-range-editor--' + pickerSize,
|
||||
pickerVisible ? 'is-active' : ''
|
||||
]"
|
||||
@click="handleRangeClick"
|
||||
|
|
@ -266,6 +266,8 @@ const valueEquals = function(a, b) {
|
|||
export default {
|
||||
mixins: [Emitter, NewPopper, Focus('reference')],
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
props: {
|
||||
size: String,
|
||||
format: String,
|
||||
|
|
@ -421,6 +423,14 @@ export default {
|
|||
} else {
|
||||
return this.value;
|
||||
}
|
||||
},
|
||||
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
|
||||
pickerSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,12 @@
|
|||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
dropdownSize() {
|
||||
return this.size || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$on('menu-item-click', this.handleMenuItemClick);
|
||||
this.initEvent();
|
||||
|
|
@ -114,7 +120,7 @@
|
|||
},
|
||||
|
||||
render(h) {
|
||||
let { hide, splitButton, type, size } = this;
|
||||
let { hide, splitButton, type, dropdownSize } = this;
|
||||
|
||||
var handleMainButtonClick = (event) => {
|
||||
this.$emit('click', event);
|
||||
|
|
@ -124,10 +130,10 @@
|
|||
let triggerElm = !splitButton
|
||||
? this.$slots.default
|
||||
: (<el-button-group>
|
||||
<el-button type={type} size={size} nativeOn-click={handleMainButtonClick}>
|
||||
<el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
|
||||
{this.$slots.default}
|
||||
</el-button>
|
||||
<el-button ref="trigger" type={type} size={size} class="el-dropdown__caret-button">
|
||||
<el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
|
||||
<i class="el-dropdown__icon el-icon-caret-bottom"></i>
|
||||
</el-button>
|
||||
</el-button-group>);
|
||||
|
|
|
|||
|
|
@ -86,7 +86,8 @@
|
|||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
size: String
|
||||
},
|
||||
watch: {
|
||||
error(value) {
|
||||
|
|
@ -158,6 +159,12 @@
|
|||
});
|
||||
}
|
||||
return isRequired;
|
||||
},
|
||||
_formSize() {
|
||||
return this.elForm.size;
|
||||
},
|
||||
elFormItemSize() {
|
||||
return this.size || this._formSize;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
size: String
|
||||
},
|
||||
watch: {
|
||||
rules() {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="el-input-number"
|
||||
:class="[
|
||||
size ? 'el-input-number--' + size : '',
|
||||
inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
|
||||
{ 'is-disabled': disabled },
|
||||
{ 'is-without-controls': !controls },
|
||||
{ 'is-controls-right': controlsAtRight }
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
@focus="handleFocus"
|
||||
@input="debounceHandleInput"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:size="inputNumberSize"
|
||||
:max="max"
|
||||
:min="min"
|
||||
:name="name"
|
||||
|
|
@ -60,6 +60,7 @@
|
|||
export default {
|
||||
name: 'ElInputNumber',
|
||||
mixins: [Focus('input')],
|
||||
inject: ['elFormItem'],
|
||||
directives: {
|
||||
repeatClick: RepeatClick
|
||||
},
|
||||
|
|
@ -130,6 +131,12 @@
|
|||
},
|
||||
controlsAtRight() {
|
||||
return this.controlsPosition === 'right';
|
||||
},
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
inputNumberSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="[
|
||||
type === 'textarea' ? 'el-textarea' : 'el-input',
|
||||
size ? 'el-input--' + size : '',
|
||||
inputSize ? 'el-input--' + inputSize : '',
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'el-input-group': $slots.prepend || $slots.append,
|
||||
|
|
@ -139,6 +139,9 @@
|
|||
},
|
||||
|
||||
computed: {
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
validateState() {
|
||||
return this.elFormItem ? this.elFormItem.validateState : '';
|
||||
},
|
||||
|
|
@ -152,6 +155,9 @@
|
|||
textareaStyle() {
|
||||
return merge({}, this.textareaCalcStyle, { resize: this.resize });
|
||||
},
|
||||
inputSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
},
|
||||
isGroup() {
|
||||
return this.$slots.prepend || this.$slots.append;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,11 +36,14 @@
|
|||
|
||||
mixins: [Emitter],
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
props: {
|
||||
label: {},
|
||||
disabled: Boolean,
|
||||
name: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
value: {
|
||||
get() {
|
||||
|
|
@ -69,8 +72,11 @@
|
|||
color: this._radioGroup.textColor || ''
|
||||
};
|
||||
},
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
size() {
|
||||
return this._radioGroup.size;
|
||||
return this._radioGroup.radioGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
},
|
||||
isDisabled() {
|
||||
return this.disabled || this._radioGroup.disabled;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@
|
|||
|
||||
componentName: 'ElRadioGroup',
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
mixins: [Emitter],
|
||||
|
||||
props: {
|
||||
|
|
@ -30,6 +32,16 @@
|
|||
textColor: String,
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
radioGroupSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$on('handleChange', value => {
|
||||
this.$emit('change', value);
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@
|
|||
|
||||
mixins: [Emitter],
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
componentName: 'ElRadio',
|
||||
|
||||
props: {
|
||||
|
|
@ -89,10 +91,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
radioSize() {
|
||||
const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
return this.isGroup
|
||||
? this._radioGroup.size || this.size
|
||||
: this.size;
|
||||
? this._radioGroup.radioGroupSize || temRadioSize
|
||||
: temRadioSize;
|
||||
},
|
||||
isDisabled() {
|
||||
return this.isGroup
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="el-select"
|
||||
:class="[size ? 'el-select--' + size : '']"
|
||||
:class="[selectSize ? 'el-select--' + selectSize : '']"
|
||||
v-clickoutside="handleClose">
|
||||
<div
|
||||
class="el-select__tags"
|
||||
|
|
@ -140,6 +140,8 @@
|
|||
|
||||
componentName: 'ElSelect',
|
||||
|
||||
inject: ['elFormItem'],
|
||||
|
||||
provide() {
|
||||
return {
|
||||
'select': this
|
||||
|
|
@ -147,6 +149,9 @@
|
|||
},
|
||||
|
||||
computed: {
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
iconClass() {
|
||||
let criteria = this.clearable &&
|
||||
!this.disabled &&
|
||||
|
|
@ -180,6 +185,10 @@
|
|||
let hasExistingOption = this.options.filter(option => !option.created)
|
||||
.some(option => option.currentLabel === this.query);
|
||||
return this.filterable && this.allowCreate && this.query !== '' && !hasExistingOption;
|
||||
},
|
||||
|
||||
selectSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
class="el-tag"
|
||||
:class="[
|
||||
type ? 'el-tag--' + type : '',
|
||||
size && `el-tag--${size}`,
|
||||
tagSize && `el-tag--${tagSize}`,
|
||||
{'is-hit': hit}
|
||||
]"
|
||||
:style="{backgroundColor: color}">
|
||||
|
|
@ -31,6 +31,11 @@
|
|||
handleClose(event) {
|
||||
this.$emit('close', event);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tagSize() {
|
||||
return this.size || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: $--font-size-base;
|
||||
line-height: $--input-height;
|
||||
|
||||
.el-input,
|
||||
.el-input__inner {
|
||||
|
|
@ -44,7 +45,6 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
padding: 0 25px 0 15px;
|
||||
color: $--input-color;
|
||||
width: 100%;
|
||||
|
|
@ -63,26 +63,17 @@
|
|||
|
||||
@include m(medium) {
|
||||
font-size: $--input-medium-font-size;
|
||||
|
||||
@include e(label) {
|
||||
line-height: #{$--input-medium-height };
|
||||
}
|
||||
line-height: #{$--input-medium-height};
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
font-size: $--input-small-font-size;
|
||||
|
||||
@include e(label) {
|
||||
line-height: #{$--input-small-height };
|
||||
}
|
||||
line-height: #{$--input-small-height};
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
font-size: $--input-mini-font-size;
|
||||
|
||||
@include e(label) {
|
||||
line-height: #{$--input-mini-height};
|
||||
}
|
||||
line-height: #{$--input-mini-height};
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,10 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .el-dropdown__icon {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
line-height: #{$--input-height - 2};
|
||||
|
||||
.el-input {
|
||||
display: block;
|
||||
|
|
@ -23,7 +24,6 @@
|
|||
top: 1px;
|
||||
width: $--input-height;
|
||||
height: auto;
|
||||
line-height: #{$--input-height - 2};
|
||||
text-align: center;
|
||||
background: $--background-color-base;
|
||||
color: $--color-text-regular;
|
||||
|
|
@ -70,9 +70,9 @@
|
|||
|
||||
@include m(medium) {
|
||||
width: 200px;
|
||||
line-height: #{$--input-medium-height - 2};
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
line-height: #{$--input-medium-height - 2};
|
||||
width: $--input-medium-height;
|
||||
font-size: $--input-medium-font-size;
|
||||
}
|
||||
|
|
@ -85,9 +85,9 @@
|
|||
|
||||
@include m(small) {
|
||||
width: 130px;
|
||||
line-height: #{$--input-small-height - 2};
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
line-height: #{$--input-small-height - 2};
|
||||
width: $--input-small-height;
|
||||
font-size: $--input-small-font-size;
|
||||
|
||||
|
|
@ -104,9 +104,9 @@
|
|||
|
||||
@include m(mini) {
|
||||
width: 130px;
|
||||
line-height: #{$--input-mini-height - 2};
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
line-height: #{$--input-mini-height - 2};
|
||||
width: $--input-mini-height;
|
||||
font-size: $--input-mini-font-size;
|
||||
|
||||
|
|
|
|||
|
|
@ -153,6 +153,9 @@ const install = function(Vue, opts = {}) {
|
|||
|
||||
Vue.use(Loading.directive);
|
||||
|
||||
const ELEMENT = {};
|
||||
ELEMENT.size = opts.size || '';
|
||||
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
|
|
@ -160,6 +163,8 @@ const install = function(Vue, opts = {}) {
|
|||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
|
||||
Vue.prototype.$ELEMENT = ELEMENT;
|
||||
};
|
||||
|
||||
/* istanbul ignore if */
|
||||
|
|
|
|||
Loading…
Reference in New Issue