mengdanai
2 years ago
6 changed files with 703 additions and 9 deletions
-
211src/components/mdp-ui/mdp-date-range/README.md
-
130src/components/mdp-ui/mdp-date/README.md
-
18src/components/mdp-ui/mdp-dialog/README.md
-
102src/components/mdp-ui/mdp-field/README.md
-
137src/components/mdp-ui/mdp-input/README.md
-
114src/components/mdp-ui/mdp-number/README.md
@ -1,10 +1,126 @@ |
|||
### mdp-date |
|||
## mdp-date |
|||
该组件除了提供origin\tag\x三种样式，其它同element-ui中的el-date一致 |
|||
|
|||
### 用法 |
|||
```js |
|||
var formData={startDate:'',endDate:''} |
|||
##### 一、showStyle |
|||
|
|||
1. `showStyle="origin"` |
|||
|
|||
```vue |
|||
<mdp-date show-style="origin"/> |
|||
``` |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/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> |
|||
``` |
|||
```html |
|||
<mdp-date v-model="formData.startDate"/> |
|||
``` |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240110175355789.png" alt="3" style="zoom:50%;" /> |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/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="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240110175435534.png" alt="50" style="zoom:50%;" /> |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240110175446637.png" alt="image-20240110175446637" style="zoom:50%;" /> |
|||
|
|||
#### `pickerOptions` |
|||
|
|||
格式：[{ text: '今天', onClick(picker) { picker.$emit('pick', new Date() ); } }] |
|||
|
|||
new Date() 是 选择'今天' 时得到的数据 |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/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 获取焦点 | — | |
|||
|
|||
@ -0,0 +1,102 @@ |
|||
### mdp-Field |
|||
|
|||
#### 基本用法 |
|||
|
|||
```vue |
|||
<mdp-field show-style="x" :disabled="false" :value="obj" label="" placeholder="占位符" color="#6BC8A2" |
|||
icon="el-icon-goods" size="small" @change="change"> |
|||
</mdp-field> |
|||
``` |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
obj: '' |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
change(currentVal, oldVal) { |
|||
this.obj = currentVal |
|||
}, |
|||
}, |
|||
``` |
|||
|
|||
|
|||
|
|||
#### 自定义 |
|||
|
|||
下列是 mdp-field 的插槽层次结构 |
|||
|
|||
```js |
|||
<slot> |
|||
├── <slot v-if="showStyle=='x'" name="avater"></slot> |
|||
├── <span> |
|||
│ ├── <slot name="info"> |
|||
│ │ ├── <span v-if="showStyle=='x'"> |
|||
│ │ │ ├── <div> |
|||
│ │ │ │ └── <slot name="value"></slot> |
|||
│ │ │ ├── <div> |
|||
│ │ │ │ └── <slot name="label"></slot> |
|||
│ │ │ └── </div> |
|||
│ │ ├── </span> |
|||
│ │ └── <span v-else> |
|||
│ │ └── <div> |
|||
│ │ └── <slot name="value"></slot> |
|||
│ │ </div> |
|||
│ │ </span> |
|||
│ └── </slot> |
|||
│── </span> |
|||
├── <span> |
|||
│ └── <slot name="oper"></slot> |
|||
└── </span> |
|||
</slot> |
|||
``` |
|||
|
|||
例子 |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
obj: '' |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```vue |
|||
<mdp-field show-style="x"> |
|||
<template v-slot:avater> |
|||
<i class="el-icon-s-custom"></i> |
|||
</template> |
|||
<template v-slot:info> |
|||
<el-input placeholder="username" :disabled="true"></el-input> |
|||
</template> |
|||
<template v-slot:oper> |
|||
<el-input v-model="obj"></el-input> |
|||
</template> |
|||
</mdp-field> |
|||
``` |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240111190935618.png" alt="image-20240111190935618" style="zoom:50%;" /> <img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240111191052830.png" alt="image-20240111191052830" style="zoom:50%;" /> |
|||
|
|||
|
|||
|
|||
### Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| ----------- | -------------------------- | -------------- | ------------------------------- | ------ | |
|||
| disabled | css: pointer-events: none; | Boolean | - | false | |
|||
| value | 文本框的内容 | String, Number | - | '' | |
|||
| label | 标签字段 | String | - | '' | |
|||
| placeholder | 占位符 | String | - | '' | |
|||
| color | 背景色 | String | - | '' | |
|||
| icon | 图标 | String | - | '' | |
|||
| showStyle | 控制组件的布局 | String | x / 不是x的任意值 | x | |
|||
| size | 设置头像的大小 | number/string | number / large / medium / small | small | |
|||
|
|||
### Events |
|||
|
|||
| 事件名 | 说明 | 回调参数 | |
|||
| ------ | -------------------------------------- | --------------------------------------------------------- | |
|||
| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | |
|||
|
|||
@ -0,0 +1,137 @@ |
|||
### mdp-input |
|||
|
|||
|
|||
|
|||
#### 基本使用 |
|||
|
|||
```vue |
|||
<form class="c1"> |
|||
<mdp-input show-style="origin" :disabled="false" label="" placeholder="" type="text"></mdp-input> |
|||
</form> |
|||
``` |
|||
|
|||
```css |
|||
.c1 { |
|||
display: flex; |
|||
height: 100vh; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.c1 > * { |
|||
max-width: 200px; |
|||
} |
|||
``` |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240112102727553.png" alt="image-20240112102727553" style="zoom:50%;" /> |
|||
|
|||
#### 自定义 |
|||
|
|||
mdp-input 结构如下 |
|||
|
|||
```html |
|||
<slot> |
|||
├── <slot v-if="showStyle=='x'" name="avater"></slot> |
|||
├── <span> |
|||
│ ├── <slot name="info"> |
|||
│ │ ├── <span v-if="showStyle=='x'"> |
|||
│ │ │ ├── <div> |
|||
│ │ │ │ └── <slot name="value"></slot> |
|||
│ │ │ ├── <div> |
|||
│ │ │ │ └── <slot name="label"></slot> |
|||
│ │ │ └── </div> |
|||
│ │ ├── </span> |
|||
│ │ └── <span v-else> |
|||
│ │ └── <div> |
|||
│ │ └── <slot name="value"></slot> |
|||
│ │ </div> |
|||
│ │ </span> |
|||
│ └── </slot> |
|||
│── </span> |
|||
└── <span> |
|||
└── <slot name="oper"></slot> |
|||
</span> |
|||
</slot> |
|||
``` |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
status: "", |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```vue |
|||
<mdp-input show-style="x"> |
|||
<template v-slot:default> |
|||
<el-input placeholder="请输入内容" v-model="status"> |
|||
<i class="el-icon-edit el-input__icon" slot="suffix"></i> |
|||
</el-input> |
|||
</template> |
|||
</mdp-input> |
|||
``` |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240112105047494.png" alt="image-20240112105047494" style="zoom:50%;" /> |
|||
|
|||
----- |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
obj: '' |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```vue |
|||
<mdp-input show-style="x"> |
|||
<template v-slot:avater> |
|||
<i class="el-icon-s-custom"></i> |
|||
</template> |
|||
<template v-slot:info> |
|||
<el-input placeholder="username" :disabled="true"></el-input> |
|||
</template> |
|||
<template v-slot:oper> |
|||
<el-input v-model="obj"></el-input> |
|||
</template> |
|||
</mdp-input> |
|||
``` |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240111190935618.png" alt="image-20240111190935618" style="zoom:50%;" /> <img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240111191052830.png" alt="image-20240111191052830" style="zoom:50%;" /> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
### Autocomplete Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| :---------: | :----------------------------------------: | :-----: | :-------------------: | :------: | |
|||
| disabled | 禁用 | boolean | — | false | |
|||
| label | 标签字段 | String | — | '' | |
|||
| placeholder | 占位符 | String | — | '' | |
|||
| color | showStyle=='x'时生效，设置avatar部分的样式 | String | — | — | |
|||
| icon | showStyle=='x'时生效，设置avatar部分的Icon | String | — | — | |
|||
| showStyle | 控制组件的布局 | String | origin/x/{other} | 'origin' | |
|||
| size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | medium / small / mini | small | |
|||
|
|||
|
|||
|
|||
### Input Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| :------: | :----------------------------------------------------------: | :--------------: | :----------------------------------------------------------: | :----: | |
|||
| type | 类型 | String | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form__types) | text | |
|||
| min | 原生属性，设置最小值 | Number | — | null | |
|||
| rows | 输入框行数，只对 `type="textarea"` 有效 | Number | — | 2 | |
|||
| max | 原生属性，设置最大值 | Number | — | null | |
|||
| step | 原生属性，设置输入字段的合法数字间隔 | Number | — | null | |
|||
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false | |
|||
| readonly | 原生属性，是否只读 | boolean | — | false | |
|||
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | null | |
|||
|
|||
### Events |
|||
|
|||
| 事件名 | 说明 | 回调参数 | |
|||
| :----: | :------------------------------------: | :-------------------------------------------------------: | |
|||
| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | |
|||
@ -0,0 +1,114 @@ |
|||
### Mdp-number |
|||
|
|||
`计数器` |
|||
|
|||
#### 基本使用 |
|||
|
|||
```vue |
|||
<mdp-number v-model="num" @change="handleChange" :min="1" :max="10"/> |
|||
``` |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
num: 4, |
|||
} |
|||
}, |
|||
methods: { |
|||
handleChange(value1, value2) { |
|||
console.log(value1, value2); |
|||
} |
|||
}, |
|||
``` |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240112114302491.png" alt="image-20240112114302491" style="zoom:50%;" /> |
|||
|
|||
#### 自定义 |
|||
|
|||
show-style !=='origin' 时的结构如下 |
|||
|
|||
```html |
|||
<slot> |
|||
├── <slot name="avater"></slot> |
|||
├── <span> |
|||
│ ├── <slot name="info"> |
|||
│ │ ├── <span v-if="showStyle=='x'"> |
|||
│ │ │ ├── <span> |
|||
│ │ │ │ └── <slot name="value"></slot> |
|||
│ │ │ ├── <span> |
|||
│ │ │ │ └── <slot name="label"></slot> |
|||
│ │ │ └── </span> |
|||
│ │ ├── </span> |
|||
│ │ └── <span v-else> |
|||
│ │ └── <slot name="value"></slot> |
|||
│ │ </span> |
|||
│ └── </slot> |
|||
└── </span> |
|||
└── <span> |
|||
└── <slot name="oper"></slot> |
|||
</span> |
|||
</slot> |
|||
``` |
|||
|
|||
例子1 |
|||
|
|||
```vue |
|||
<mdp-number show-style="x"> |
|||
<template v-slot:default> |
|||
<el-input-number v-model="num"></el-input-number> |
|||
</template> |
|||
</mdp-number> |
|||
``` |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
num: 1, |
|||
} |
|||
} |
|||
``` |
|||
|
|||
例子2 |
|||
|
|||
```vue |
|||
<mdp-number show-style="x"> |
|||
<template v-slot:avater> |
|||
<i class="el-icon-s-order" style="font-size: 30px;"></i> |
|||
</template> |
|||
<template v-slot:info> |
|||
<el-input-number :disabled="true"></el-input-number> |
|||
</template> |
|||
<template v-slot:oper> |
|||
<el-input-number v-model="num"></el-input-number> |
|||
</template> |
|||
</mdp-number> |
|||
``` |
|||
|
|||
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240112115454303.png" alt="image-20240112115454303" style="zoom:50%;" /><img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240112115522071.png" alt="image-20240112115522071" style="zoom:50%;" /> |
|||
|
|||
|
|||
|
|||
### Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| :---------------: | :--------------------------------: | :-----: | :----------: | :-------------: | |
|||
| min | 设置计数器允许的最小值 | number | — | -Infinity | |
|||
| max | 设置计数器允许的最大值 | number | — | Infinity | |
|||
| step | 计数器步长 | number | — | 1 | |
|||
| step-strictly | 是否只能输入 step 的倍数 | boolean | — | false | |
|||
| precision | 数值精度 | number | — | 2 | |
|||
| controls | 是否使用控制按钮 | boolean | — | true | |
|||
| controls-position | 控制按钮位置 | string | — | right | |
|||
| disabled | 是否禁用计数器 | boolean | — | false | |
|||
| style-obj | 设置showStyle=='x'时，avatar的样式 | Object | — | marginTop:'5px' | |
|||
| label | 标签字段 | String | — | '' | |
|||
| placeholder | 输入框默认 placeholder | string | — | — | |
|||
| color | 设置showStyle=='x'时，直接指定颜色 | string | — | — | |
|||
| icon | 设置showStyle=='x'时，指定图标 | string | — | — | |
|||
| showStyle | 控制组件的布局 | String | origin/x/tag | 'origin' | |
|||
|
|||
### Events |
|||
|
|||
| 事件名 | 说明 | 回调参数 | |
|||
| :----: | :------------------------------------: | :-------------------------------------------------------: | |
|||
| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue