You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
## mdp-date
该组件除了提供origin\tag\x三种样式，其它同element-ui中的el-date一致
##### 一、showStyle
1. `showStyle="origin"`
```vue<mdp-date show-style="origin"/>```
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110173240185.png" alt="image-20240110173240185" style="zoom:50%;" />
2. `showStyle="x"`
```vue<mdp-date show-style="x" style="border: 1px solid"> <template v-slot:avater><p>★</p></template> <template v-slot:info><p>悬浮变回原样</p></template></mdp-date>```
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110175355789.png" alt="3" style="zoom:50%;" />
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110174700696.png" alt="image-20240110174700696" style="zoom:50%;" />
3. `showStyle="tag"`
```vue<mdp-date show-style="tag" style="border: 1px solid"> <template v-slot:info><p>悬浮变回原样</p></template></mdp-date>```
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110175435534.png" alt="50" style="zoom:50%;" />
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110175446637.png" alt="image-20240110175446637" style="zoom:50%;" />
#### `pickerOptions`
格式：[{ text: '今天', onClick(picker) { picker.$emit('pick', new Date() ); } }]
new Date() 是 选择'今天' 时得到的数据
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110183450741.png" alt="image-20240110183450741" style="zoom:40%;" />
#### 自定义属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 || --------- | ---- | ------ | ------ | ------ || showStyle | | String | — | origin |
#### elementUI属性
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 || ----------------- | ---------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ || value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — || readonly | 完全只读 | boolean | — | false || disabled | 禁用 | boolean | — | false || editable | 文本框可输入 | boolean | — | true || clearable | 是否显示清除按钮 | boolean | — | true || size | 输入框尺寸 | string | large, small, mini | — || placeholder | 非范围选择时的占位内容 | string | — | — || start-placeholder | 范围选择时开始日期的占位内容 | string | — | — || end-placeholder | 范围选择时结束日期的占位内容 | string | — | — || type | 显示类型 | string | year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange | date || format | 显示在输入框中的格式 | string | 见[日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd || align | 对齐方式 | string | left, center, right | left || popper-class | DatePicker 下拉框的类名 | string | — | — || picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | [{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, '昨天', ......] || range-separator | 选择范围时的分隔符 | string | — | '-' || default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — || default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — || value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss || name | 原生属性 | string | — | — || unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false || prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date || clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close || validate-event | 输入时是否触发表单的校验 | boolean | - | true || append-to-body | DetePicker 自身是否插入至 body 元素上。 | boolean | — | true || | | | | || | | | | |
### Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 || :------------: | :----------------------------------------------------------: | :----------------------------: | :----: | :----: || shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — || disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — || cellClassName | 设置日期的 className | Function(Date) | — | — || firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 || onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 || ------- | ------------------------------------------------------------ | -------- | ------ | ------ || text | 标题文本 | string | — | — || onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
### Events
| 事件名称 | 说明 | 回调参数 || -------- | ----------------------- | ------------------------------------------------------ || change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 || blur | 当 input 失去焦点时触发 | 组件实例 || focus | 当 input 获得焦点时触发 | 组件实例 |
### Methods
| 方法名 | 说明 | 参数 || ------ | ----------------- | ---- || focus | 使 input 获取焦点 | — |
|
