mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-03-13 15:57:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

LabelWrap: fix label-width bug (#2742)

Browse Source 
* LabelWrap: fix label-width bug

* LabelWrap: add unit test

* LabelWrap: update unit test
This commit is contained in:
Summer 2021-07-30 11:38:48 +08:00 committed by GitHub
parent a7b4b61dc1
commit e0b79f8eda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/form/__tests__/form.spec.ts
View File

@ -89,6 +89,50 @@ describe('Form', () => {
expect(marginRight).toEqual(marginRight1)
})
test('form-item auto label width', async() => {
const wrapper = mountForm({
template: `
<el-form ref="form" label-position="right" label-width="150px" :model="form">
<el-form-item label="名称">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="活动区域" label-width="auto">
<el-input v-model="form.region" />
</el-form-item>
<el-form-item label="活动形式(我是一个很长很长很长很长的label)" label-width="auto">
<el-input v-model="form.type" />
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: '',
region: '',
type: '',
},
}
},
})
await nextTick()
const formItemLabels = wrapper.findAll<HTMLElement>('.el-form-item__label')
const formItemLabelWraps = wrapper.findAll<HTMLElement>('.el-form-item__label-wrap')
const labelWrapMarginLeft1 = formItemLabelWraps[0].element.style.marginLeft
const labelWrapMarginLeft2 = formItemLabelWraps[1].element.style.marginLeft
expect(labelWrapMarginLeft1).toEqual(labelWrapMarginLeft2)
expect(labelWrapMarginLeft2).toEqual('')
const labelWidth0 = parseInt(formItemLabels[0].element.style.width, 10)
expect(labelWidth0).toEqual(150)
const labelWidth1 = formItemLabels[1].element.style.width
const labelWidth2 = formItemLabels[2].element.style.width
expect(labelWidth1).toEqual(labelWidth2)
expect(labelWidth2).toEqual('auto')
})
test('inline form', () => {
const wrapper = mountForm({
template: `

2
packages/form/src/label-wrap.ts
View File

@ -64,7 +64,7 @@ export default defineComponent({
const autoLabelWidth = elForm.autoLabelWidth
const style = {} as CSSProperties
if (autoLabelWidth && autoLabelWidth !== 'auto') {
const marginWidth = parseInt(autoLabelWidth, 10) - computedWidth.value
const marginWidth = Math.max(0, parseInt(autoLabelWidth, 10) - computedWidth.value)
const marginPositon = elForm.labelPosition === 'left' ? 'marginRight' : 'marginLeft'
if (marginWidth) {
style[marginPositon] = marginWidth + 'px'