/
githubmirror
/
element
Обзор
Документация
Войти
/
githubmirror
/
element
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
packages/form/src/label-wrap.vue
78 строк
2 KB
hetech
Form: fix label style (#14969)
03 апр 2019, 15:03
03 апр 2019, 15:03
7b24f82
Код
Авторство
О чём код?
<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>