vue 日期滚轮组件

typescript+vue开发的日期滚轮组件，基于iosselect库进行封装，简单易用。组件在iosselect的基础上进行了扩展，让使用者对于日期的定义变得更加简单易用，无需使用者单独处理，使用者只需要定义开始日期、当前日期、结束日期即可。对于iosselect原来的option配置没有做任何的修改，使用者可以参考github上iosselect的配置，即可完成自己想要的配置设置

备注：该日期滚轮组件，目前只是支持3级的定义，最后感谢iOSselect库的开发者跟维护者们

iOSselect

html下拉菜单select在安卓和IOS下表现不一样，iosselect正是为统一下拉菜单样式而生，我们以IOS下select的交互和样式为蓝本，开发了这一组件。

主要维护人员

https://github.com/zhoushengmufc

https://github.com/pengweifu

官网

http://zhoushengfe.com/iosselect/website/index.html

特点

• 0依赖，只需引用一个js和css即可
• 样式可自己定制，也可使用默认样式
• 一个页面同时实例化多个组件
• jquery zepto angular vue react均适用
• 支持最多6级级联
• 支持设置高度和高度单位
• 适用于android和iOS设备(PC端支持IE9+，不过PC端上滑动体验不太实用)

代码示例

组件通过v-model数据双向绑定来控制显示跟隐藏

• 安装组件包

    npm install vue-component-dateselect --save-dev

• js代码

  import Vue from 'vue';
  import VueDselect from "vue-component-dateselect";
  
  new Vue({
    el: '#app',
    components: {
      VueDselect
    },
    data() {
      return {
          visible: true,
          options: {
            config: {
              level: 3,
              title: "请选择时间",
              sureText: "确定",
              closeText: "取消",
              showAnimate: true,
            },
            data: {
              currentDate: "2017-06-29",
              beginDate: "2000-01-01",
              endDate: "2018-08-29",
            }
          }
        }
    },
    methods: {
      confirmHandle: function (yearModel, monthModel, dayModel) {
          console.log(yearModel);
          console.log(monthModel);
          console.log(dayModel);
        }
    }
  });

• html模板

  <div id="app">
    <vue-dselect
      v-model="visible"
      @on-ok="confirmHandle"
      :option="options">
    </vue-dselect>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <script src="./dist/index.js"></script>

组件API

• 组件 props

| 属性 | 说明 | 类型 | 默认值 | | ------ | ---------------------------------------- | ------ | ---- | | option | option对象提供2个属性值：config：iosselect组件提供的配置项，详情请参考iosselect，data：使用者自定义的日期，该属性有3个属性值:beginDate(开始时间：yyyy-MM-dd格式)，endDate(结束时间：yyyy-MM-dd格式)，currentDate(当前时间：yyyy-MM-dd格式) | object | 空对象 |

• 组件 events

| 方法名称 | 说明 | 参数 | | ----- | ------------ | ---------------------------------------- | | on-ok | 点击组件【确定】按钮触发 | 事件参数有3个：yearModel：选中的年份数据对象，monthModel：选中的月份数据对象，dayModel：选中的天数据对象 |

组件开发说明

• 安装依赖

  npm/cnpm install

• 编译

  npm run build

• demo运行

  # cd test
  # npm/cnpm install
  # npm run build
  
  #把test目录的index.html在浏览器打开，切换到移动的端模拟器，可以预览在手机端的展示结果

最后，欢迎大家使用，并且issue