ElementUI源码label-wrap.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) {
	        console.log('this.$el.firstElementChild', 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>