Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ljcheibao/vue-component-dateselect
typescript+vue开发的日期滚轮组件，基于iosselect库进行封装，简单易用
https://github.com/ljcheibao/vue-component-dateselect
calender component datepicker frontend javascript typescript vue
Last synced: 6 days ago
JSON representation
typescript+vue开发的日期滚轮组件，基于iosselect库进行封装，简单易用
- Host: GitHub
- URL: https://github.com/ljcheibao/vue-component-dateselect
- Owner: ljcheibao
- License: mit
- Created: 2018-08-29T04:28:37.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-29T06:08:21.000Z (about 6 years ago)
- Last Synced: 2024-10-06T08:09:21.719Z (about 1 month ago)
- Topics: calender, component, datepicker, frontend, javascript, typescript, vue
- Language: Vue
- Size: 97.7 KB
- Stars: 6
- Watchers: 5
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### vue 日期滚轮组件
typescript+vue开发的日期滚轮组件，基于iosselect库进行封装，简单易用。组件在iosselect的基础上进行了扩展，让使用者对于日期的定义变得更加简单易用，无需使用者单独处理，使用者只需要定义**开始日期**、**当前日期**、**结束日期**即可。对于iosselect原来的option配置没有做任何的修改，使用者可以参考github上[iosselect](https://github.com/zhoushengmufc/iosselect)的配置，即可完成自己想要的配置设置
**备注**：该日期滚轮组件，目前只是支持3级的定义，最后感谢**iOSselect**库的开发者跟维护者们
[](LICENSE)
[](https://www.npmjs.com/package/vue-component-dateselect)
[](https://www.npmjs.com/package/vue-component-dateselect)
### 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代码
```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模板
```html
```
### 组件API
- 组件 props
| 属性 | 说明 | 类型 | 默认值 |
| ------ | ---------------------------------------- | ------ | ---- |
| option | option对象提供2个属性值：
**config**：iosselect组件提供的配置项，详情请参考[iosselect](https://github.com/zhoushengmufc/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