68 lines
1.6 KiB
Markdown
68 lines
1.6 KiB
Markdown
# pdd-date-picker
|
||
|
||
这是一个轻量的年月日选择器，简单易用，可自己定制化改造。支持的功能如下：
|
||
|
||
1. 年月日选择
|
||
2. 自定义标题
|
||
3. 自定义按钮文案
|
||
4. 自定义按钮文案颜色
|
||
5. 自定义开始年份
|
||
6. 自定义默认日期
|
||
7. 插件代码清晰，不满意可以自己DIY
|
||
|
||
# 参数
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| title | String | '请选择日期' | 标题 |
|
||
| limit | Number | 50 | 年份上限 |
|
||
| leftText | String | 取消 | 左侧文字 |
|
||
| leftTextColor | String | #4E5969 | 左侧文字颜色 |
|
||
| rightText | String | 确认 | 右侧文字 |
|
||
| rightTextColor | String | #1677FF | 右侧文字颜色 |
|
||
| startYear | Number | 1970 | 开始年份 |
|
||
| defaultDate | Array<Number> | 1970 | 默认日期，分别对应年月日的索引，比如：[0,0,0] 对应1970-01-01 |
|
||
|
||
# 示例
|
||
|
||
```html
|
||
<template>
|
||
<view class="content">
|
||
<button type="default" @click="open">打开选择器</button>
|
||
<text>当前选择时间是：{{ dateValue }}</text>
|
||
<!-- 日期选择器 -->
|
||
<pdd-date-picker ref="pDataSelect" @change="handleChangeDate" :title="title" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import pddDatePicker from '../../components/pdd-date-picker/index.vue'
|
||
|
||
export default {
|
||
components: {
|
||
pddDatePicker
|
||
},
|
||
data() {
|
||
return {
|
||
title: '自定义标题',
|
||
dateValue: ''
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description 打开选择框
|
||
*/
|
||
open() {
|
||
this.$refs.pDataSelect.open()
|
||
},
|
||
/**
|
||
* @description 日期改变回调
|
||
*/
|
||
handleChangeDate(date) {
|
||
console.log(date)
|
||
this.dateValue = date
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
``` |