npm:vue-component-dateselect

README

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在浏览器打开，切换到移动的端模拟器，可以预览在手机端的展示结果

vue-component-dateselect

Usage no npm install needed!