79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<script>
|
|
|
|
export default {
|
|
props: {
|
|
isAutoWidth: Boolean,
|
|
updateAll: Boolean
|
|
},
|
|
|
|
inject: ['elForm', 'elFormItem'],
|
|
|
|
render() {
|
|
const slots = this.$slots.default;
|
|
if (!slots) return null;
|
|
if (this.isAutoWidth) {
|
|
const autoLabelWidth = this.elForm.autoLabelWidth;
|
|
const style = {};
|
|
if (autoLabelWidth && autoLabelWidth !== 'auto') {
|
|
const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
|
|
if (marginLeft) {
|
|
style.marginLeft = marginLeft + 'px';
|
|
}
|
|
}
|
|
return (<div class="el-form-item__label-wrap" style={style}>
|
|
{ slots }
|
|
</div>);
|
|
} else {
|
|
return slots[0];
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
getLabelWidth() {
|
|
if (this.$el && this.$el.firstElementChild) {
|
|
const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
|
|
return Math.ceil(parseFloat(computedWidth));
|
|
} else {
|
|
return 0;
|
|
}
|
|
},
|
|
updateLabelWidth(action = 'update') {
|
|
if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
|
|
if (action === 'update') {
|
|
this.computedWidth = this.getLabelWidth();
|
|
} else if (action === 'remove') {
|
|
this.elForm.deregisterLabelWidth(this.computedWidth);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
computedWidth(val, oldVal) {
|
|
if (this.updateAll) {
|
|
this.elForm.registerLabelWidth(val, oldVal);
|
|
this.elFormItem.updateComputedLabelWidth(val);
|
|
}
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
computedWidth: 0
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.updateLabelWidth('update');
|
|
},
|
|
|
|
updated() {
|
|
this.updateLabelWidth('update');
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.updateLabelWidth('remove');
|
|
}
|
|
};
|
|
</script>
|