bn-q-icon/components/en-from/en-date/en-date.vue

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <uni-datetime-picker
          :type="type"
          :value="inputValue"
          :start="startDate"
          :end="endDate"
          @change="change"
      />
    </view>

  </view>
</template>

<script>
export default {
  name: 'en-date',
  props: {
    type: {
      //date/daterange/datetime/datetimerange
      type: String,
      default: 'date'
    },
    label: {
      type: String,
      default: '标题'
    },
    startDate: {
      type: String,
      default: '2000-01-01'
    },
    endDate: {
      type: String,
      default: '2099-12-13'
    },
    disabled: {
      default: false
    },
    value: {
      default: ''
    }
  },
  data() {
    return {
      inputValue: '',
      labelWidth: 0
    }
  },
  components: {},
  mounted() {
    this.inputValue = this.value
    this.setLabelWidth()
  },
  watch: {
    'value': function () {
      if (this.inputValue !== this.value) {
        this.inputValue = this.value
      }
    },
    'inputValue': function () {
      this.$emit('input', this.inputValue)
    }
  },
  methods: {
    setLabelWidth() {
      let differenceNum = 4 - this.label.length;
      if (differenceNum === 2) {
        this.labelWidth = '2em'
      } else if (differenceNum === 1) {
        this.labelWidth = '0.5em'
      }
    },
    change(e){
      this.inputValue=e
    }
  }

}
</script>

<style lang="scss" scoped>
@import url("../../static/css/en-common.css");

.box {
  padding: 20rpx 0 20rpx 0;
  .input-box {
    display: flex;
    align-items: center;
    .input-box-left {
      width: 210 rpx;
      font-size: 32 rpx;
      color: #333333;
    }
  }
}

</style>