基础的配置

页面代码

ibps-date-range基本默认的配置代码展示。直接写入模板内（需要有个根元素包裹），传入对应得属性值即可。

<template>
  <div>
      ...
      <!--日期控件-->
      <ibps-date-range
      v-else-if="item.fieldType === 'yearrange'"
      v-model="params[item.modelValue + item.datefmt]"
      :size="item.size ? item.size : size"
      :disabled="item.disabled"
      :readonly="item.readonly"
      :editable="item.editable"
      :placeholder="item.placeholder?item.placeholder:$t('common.placeholder.please-select')"
      :style="itemStyle + (item.itemWidth ? `width: ${item.itemWidth}%;` : '')"
      :value-format="item.field_options.datefmt||'yyyy'"
      :format="item.field_options.datefmt||'yyyy'"
      type="year"
      clearable
      @change="date => changeDate(date, item.prop[0], item.prop[1])"
      @keyup.enter.native.stop="handleEnter"
      />
      ...
  </div>
</template>

<script>
...
import IbpsDateRange from '@/components/ibps-date-range'
...
export default {
  components: {
   ...
   IbpsDateRange,
   ...
  },
  data() {
    ...
  }
}
</script>

详细的请查看API进行使用。