Skip to content

E
Element
Commit f1b8909e authored by baiyaaaaa's avatar baiyaaaaa Committed by cinwell.li
Browse files
Options

remove labelWidth when labelPosition is 'top' (#2417)

parent d65ecbc7
Hide whitespace changes
Inline Side-by-side
Showing with 31 additions and 180 deletions
examples/docs/en-US/form.md
View file @ f1b8909e
...@@ -51,18 +51,8 @@ ...@@ -51,18 +51,8 @@
user: '', user: '',
region: '' region: ''
}, },
formStacked: { labelPosition: 'right',
name: '', formLabelAlign: {
region: '',
type: '',
remark: ''
},
formAlignRight: {
name: '',
region: '',
type: ''
},
formAlignLeft: {
name: '', name: '',
region: '', region: '',
type: '' type: ''
...@@ -221,13 +211,6 @@ ...@@ -221,13 +211,6 @@
margin-right: 10px; margin-right: 10px;
} }
} }
.demo-form-stacked {
width: 270px;
.el-select .el-input {
width: 100%;
}
}
.demo-ruleForm { .demo-ruleForm {
width: 480px; width: 480px;
...@@ -372,91 +355,32 @@ When the vertical space is limited and the form is relatively simple, you can pu ...@@ -372,91 +355,32 @@ When the vertical space is limited and the form is relatively simple, you can pu
Depending on your design, there are several different ways to align your label element. Depending on your design, there are several different ways to align your label element.
#### Top
:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field. :::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field.
```html ```html
<el-form label-position="top" :model="formStacked" class="demo-form-stacked"> <el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">Left</el-radio-button>
<el-radio-button label="right">Right</el-radio-button>
<el-radio-button label="top">Top</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
<el-form-item label="Name"> <el-form-item label="Name">
<el-input v-model="formStacked.name"></el-input> <el-input v-model="formLabelAlign.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="Activity zone"> <el-form-item label="Activity zone">
<el-input v-model="formStacked.region"></el-input> <el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formStacked.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formStacked: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
#### Right
:::demo When `label-position` is omitted, labels will align to the right
```html
<el-form :model="formAlignRight" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="formAlignRight.name"></el-input>
</el-form-item>
<el-form-item label="Promote area">
<el-input v-model="formAlignRight.region"></el-input>
</el-form-item>
<el-form-item label="Form of activity">
<el-input v-model="formAlignRight.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignRight: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
#### Left
:::demo When `label-position` is set to `top`, labels will align to the left.
```html
<el-form :model="formAlignLeft" label-position="left" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="formAlignLeft.name"></el-input>
</el-form-item>
<el-form-item label="Promotion area">
<el-input v-model="formAlignLeft.region"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="Activity form"> <el-form-item label="Activity form">
<el-input v-model="formAlignLeft.type"></el-input> <el-input v-model="formLabelAlign.type"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<script> <script>
export default { export default {
data() { data() {
return { return {
formAlignLeft: { labelPosition: 'right',
formLabelAlign: {
name: '', name: '',
region: '', region: '',
type: '' type: ''
...@@ -466,7 +390,6 @@ Depending on your design, there are several different ways to align your label e ...@@ -466,7 +390,6 @@ Depending on your design, there are several different ways to align your label e
} }
</script> </script>
``` ```
::: :::
### Validation ### Validation
......
examples/docs/zh-CN/form.md
View file @ f1b8909e
...@@ -51,18 +51,8 @@ ...@@ -51,18 +51,8 @@
user: '', user: '',
region: '' region: ''
}, },
formStacked: { labelPosition: 'right',
name: '', formLabelAlign: {
region: '',
type: '',
remark: ''
},
formAlignRight: {
name: '',
region: '',
type: ''
},
formAlignLeft: {
name: '', name: '',
region: '', region: '',
type: '' type: ''
...@@ -216,13 +206,6 @@ ...@@ -216,13 +206,6 @@
margin-right: 10px; margin-right: 10px;
} }
} }
.demo-form-stacked {
width: 270px;
.el-select .el-input {
width: 100%;
}
}
.demo-ruleForm { .demo-ruleForm {
width: 460px; width: 460px;
...@@ -365,88 +348,31 @@ ...@@ -365,88 +348,31 @@
根据具体目标和制约因素，选择最佳的标签对齐方式。 根据具体目标和制约因素，选择最佳的标签对齐方式。
顶部对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部 ::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
```html ```html
<el-form label-position="top" :model="formStacked" class="demo-form-stacked"> <el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">左对齐</el-radio-button>
<el-radio-button label="right">右对齐</el-radio-button>
<el-radio-button label="top">顶部对齐</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input v-model="formStacked.name"></el-input> <el-input v-model="formLabelAlign.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="活动区域"> <el-form-item label="活动区域">
<el-input v-model="formStacked.region"></el-input> <el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="活动展开形式">
<el-input v-model="formStacked.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formStacked: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
右对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，默认不设置的情况下标签是右对齐的
```html
<el-form :model="formAlignRight" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="formAlignRight.name"></el-input>
</el-form-item>
<el-form-item label="推广地">
<el-input v-model="formAlignRight.region"></el-input>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="formAlignRight.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignRight: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
左对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `left` 时标签会变为左对齐
```html
<el-form :model="formAlignLeft" label-position="left" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="formAlignLeft.name"></el-input>
</el-form-item>
<el-form-item label="推广地">
<el-input v-model="formAlignLeft.region"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="活动形式"> <el-form-item label="活动形式">
<el-input v-model="formAlignLeft.type"></el-input> <el-input v-model="formLabelAlign.type"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<script> <script>
export default { export default {
data() { data() {
return { return {
formAlignLeft: { labelPosition: 'right',
formLabelAlign: {
name: '', name: '',
region: '', region: '',
type: '' type: ''
......
packages/form/src/form-item.vue
View file @ f1b8909e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
'is-validating': validateState === 'validating', 'is-validating': validateState === 'validating',
'is-required': isRequired || required 'is-required': isRequired || required
}"> }">
<label class="el-form-item__label" v-bind:style="labelStyle" v-if="label"> <label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
{{label + form.labelSuffix}} {{label + form.labelSuffix}}
</label> </label>
<div class="el-form-item__content" v-bind:style="contentStyle"> <div class="el-form-item__content" v-bind:style="contentStyle">
...@@ -76,6 +76,7 @@ ...@@ -76,6 +76,7 @@
computed: { computed: {
labelStyle() { labelStyle() {
var ret = {}; var ret = {};
if (this.form.labelPosition === 'top') return ret;
var labelWidth = this.labelWidth || this.form.labelWidth; var labelWidth = this.labelWidth || this.form.labelWidth;
if (labelWidth) { if (labelWidth) {
ret.width = labelWidth; ret.width = labelWidth;
...@@ -84,6 +85,7 @@ ...@@ -84,6 +85,7 @@
}, },
contentStyle() { contentStyle() {
var ret = {}; var ret = {};
if (this.form.labelPosition === 'top') return ret;
var labelWidth = this.labelWidth || this.form.labelWidth; var labelWidth = this.labelWidth || this.form.labelWidth;
if (labelWidth) { if (labelWidth) {
ret.marginLeft = labelWidth; ret.marginLeft = labelWidth;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment