van-calendar-dict组件

接收calendar组件所有属性及方法。此组件主要作用为选中值后 再次打开并将选项滚到其他位置，关掉再打开时，能够定位到当前值所在位置。

新增间隔符等配置

<template>
  <div class="van-calendar-dict">
    <van-calendar-dict label="单选" input-align="right" v-model="value1" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>
    <van-calendar-dict label="单选赋值" v-model="value11" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="区间" input-align="right" type="range" v-model="value2" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>
    <van-calendar-dict label="区间赋值" v-model="value22" type="range" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="多选" input-align="right" type="multiple" v-model="value3" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>
    <van-calendar-dict label="多选赋值" v-model="value33" type="multiple" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="日期间隔符" spacer="/" input-align="right" v-model="value4" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="区间日期间隔符" label-width="120px" dateSpacer="~" type="range" spacer="/" input-align="right" v-model="value5" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>
  
    <van-calendar-dict label="多个日期展示" :formateShowValue="formateShowValue" v-model="value6" type="multiple" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

     <van-calendar-dict label="多个日期展示" defaultValue="好运来" v-model="value7"  input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value11: "2022-07-04",
      value2: "",
      value22: ["2022.01.04", "2022.01.20"],
      value3: "",
      value33: ["2022.01.04", "2022.01.20"],
      value4: "",
      value5: "",
      value6: "",
      value7: "as"
    }
  },
  methods: {
    formateShowValue(datas) {
      return datas&&datas.join(",") || ""
    }
  }
}
</script>

<style>

</style>

显示代码

Calendar Dict Attributes

参数	说明	类型	可选值	默认值
spacer	日期间隔符	String	—	-
dateSpacer	区间日期的中间间隔符	String	—	至
formateShowValue	多个日期 时格式化函数	Function	—	(dates) => {if (dates&&dates.length > 0) {return 选择了 ${dates.length} 个日期}return ""}
defaultValue	默认值，当日期格式化不存在时展示默认值,仅对单选时有效，其余不做处理，太低级了	String	—	""