Quasar v1日期组件限制日期：无法为optionsFn传额外参数

Quasar的q-date组件options属性默认只给传入的函数提供date一个参数，要传递额外参数可以用以下几种方法：

方法1：模板中用箭头函数包裹 #

在模板里直接通过箭头函数把额外参数传给目标方法，既保留默认的date参数，又能传入自定义参数：

<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      :options="(date) => optionsFn(date, customStart, customEnd)"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: '2019/02/01',
      customStart: '2019/02/03',
      customEnd: '2019/02/15'
    }
  },
  methods: {
    optionsFn (date, start, end) {
      return date >= start && date <= end
    }
  }
}
</script>

方法2：用闭包返回处理函数 #

在methods里定义一个生成器方法，接收额外参数后返回一个处理日期的函数，利用闭包特性让内部函数访问外部参数：

<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      :options="generateOptionsFn(customStart, customEnd)"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: '2019/02/01',
      customStart: '2019/02/03',
      customEnd: '2019/02/15'
    }
  },
  methods: {
    generateOptionsFn (start, end) {
      // 返回的函数会被q-date自动传入date参数
      return (date) => {
        return date >= start && date <= end
      }
    }
  }
}
</script>

方法3：直接通过this访问组件内变量 #

如果额外参数是组件data或props中的变量，不需要显式传递，直接在options函数里用this访问即可：

<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      :options="optionsFn"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: '2019/02/01',
      customStart: '2019/02/03',
      customEnd: '2019/02/15'
    }
  },
  methods: {
    optionsFn (date) {
      // 直接通过this访问data里的变量
      return date >= this.customStart && date <= this.customEnd
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者power-cut