From 86328b8782945a94ad64e0257f972f62b260d3ea Mon Sep 17 00:00:00 2001 From: mengdanai Date: Fri, 12 Jan 2024 14:51:26 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0readme=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mdp-ui/mdp-date-range/README.md | 211 ++++++++++++++++++ src/components/mdp-ui/mdp-date/README.md | 130 ++++++++++- src/components/mdp-ui/mdp-dialog/README.md | 18 +- src/components/mdp-ui/mdp-field/README.md | 102 +++++++++ src/components/mdp-ui/mdp-input/README.md | 137 ++++++++++++ src/components/mdp-ui/mdp-number/README.md | 114 ++++++++++ 6 files changed, 703 insertions(+), 9 deletions(-) create mode 100644 src/components/mdp-ui/mdp-field/README.md create mode 100644 src/components/mdp-ui/mdp-input/README.md create mode 100644 src/components/mdp-ui/mdp-number/README.md diff --git a/src/components/mdp-ui/mdp-date-range/README.md b/src/components/mdp-ui/mdp-date-range/README.md index 494b244..80e7fa7 100644 --- a/src/components/mdp-ui/mdp-date-range/README.md +++ b/src/components/mdp-ui/mdp-date-range/README.md @@ -1,8 +1,154 @@ ### mdp-date-range 该组件相对于el-date-range，进行了以下两项优化： + +#### 一、showStyle + - 提供origin\tag\x三种样式 - 可以直接传入一个对象，指定start-key,end-key，自动更新对象对应的属性。免去一堆的转换过程 + +1. `origin` + +```vue + +... + data() { + return { + formData: + [ '2024-01-09 00:00:00','2024-03-09 00:00:00'] + } + }, +``` + +image-20240111103632183 + +2. `x` + +```vue + + + + +``` + +image-20240111110136191 + +image-20240111110148521 + +3. tag + +```vue + + + + +``` + +image-202401111059022269 + +image-202401111105909638 + +#### 二、value + @change事件 + + + +```vue + +``` + +```js +data() { + return { + status: "login", + formData: + ['2024-01-09 00:00:00', '2024-03-09 00:00:00'] // 初始化值 + } +}, + +methods: { + change(dates) { + this.formData = dates + } +}, +``` + +#### 三、startKey 和 endKey + +当传入的value是一个对象时，可以设置starKey和endKey来指定key + +```vue + +``` + +```js +data() { + return { + formData: { + account:'xxxxx', + .... + startDate: '2024-01-09 00:00:00', + endDate: '2024-03-09 00:00:00' + } + } +}, + +methods: { + change(dates) { + this.formData = dates + } +}, +``` + +#### 四、styleObj + +组件的样式 + +```vue + +``` + +image-20240111144543586 + +#### 五、autoDefault 和 defaultRange + +autoDefault 是否根据 defaultRange 生成一个时间跨度 + +defaultRange = [-1, 1] = [ 当前时间 -1, 当前时间 +1 ] + +```vue + +``` + +image-20240111150728697 + +#### 六 icon + +与Attributes表的 prefix-icon 想同，自定义头部图标，只有 x 和 tag 样式下 + +```vue + + + +``` + + + + + +showavater Disabled label type + + + +#### 自定义属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| --------- | ---------------------- | ------- | ------ | ------ | +| showStyle | 设置组件的样式 | String | — | origin | +| disabled | 是否禁止鼠标事件的触发 | Boolean | — | false | + + + ### 用法 #### 对象的方式 ```js @@ -18,3 +164,68 @@ var dates=[] ```html ``` + + + +#### element ui + +### 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 | — | [{...略...}}] | +| 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 获取焦点 | — | + diff --git a/src/components/mdp-ui/mdp-date/README.md b/src/components/mdp-ui/mdp-date/README.md index 1d5b1c9..9430544 100644 --- a/src/components/mdp-ui/mdp-date/README.md +++ b/src/components/mdp-ui/mdp-date/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 + +``` + +image-20240110173240185 + +2. `showStyle="x"` + +```vue + + + + ``` -```html - -``` \ No newline at end of file + +3 + +image-20240110174700696 + + + + +3. `showStyle="tag"` + +```vue + + + +``` + +50 + +image-20240110175446637 + +#### `pickerOptions` + +格式：[{ text: '今天', onClick(picker) { picker.$emit('pick', new Date() ); } }] + +new Date() 是 选择'今天' 时得到的数据 + +image-20240110183450741 + + + + + + +#### 自定义属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| --------- | ---- | ------ | ------ | ------ | +| 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 获取焦点 | — | + diff --git a/src/components/mdp-ui/mdp-dialog/README.md b/src/components/mdp-ui/mdp-dialog/README.md index bf07adc..78e78bd 100644 --- a/src/components/mdp-ui/mdp-dialog/README.md +++ b/src/components/mdp-ui/mdp-dialog/README.md @@ -13,7 +13,7 @@ -``` +``` ```js // 打开弹框 this.$refs['xxFormDialog'].open({subOpType:'add',formData:this.formData}) @@ -31,8 +31,22 @@ this.$refs['xxFormDialog'].close() -``` +``` ```js //打开弹框 this.$refs['xxFormDialog'].open({subOpType:'add',formData:this.formData}) ``` + + + +#### `Attributes` + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------------------- | ----------------------------------------------- | ------- | ------ | ------ | +| title | Dialog 的标题，也可通过具名 slot （见下表）传入 | string | — | '' | +| width | Dialog 的宽度 | string | — | 70% | +| fullscreen | 是否为全屏 Dialog | boolean | — | false | +| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | False | + + + diff --git a/src/components/mdp-ui/mdp-field/README.md b/src/components/mdp-ui/mdp-field/README.md new file mode 100644 index 0000000..266eaa8 --- /dev/null +++ b/src/components/mdp-ui/mdp-field/README.md @@ -0,0 +1,102 @@ +### mdp-Field + +#### 基本用法 + +```vue + + +``` + +```js +data() { + return { + obj: '' + } +}, + +methods: { + change(currentVal, oldVal) { + this.obj = currentVal + }, +}, +``` + + + +#### 自定义 + +下列是 mdp-field 的插槽层次结构 + +```js + + ├── + ├── + │ ├── + │ │ ├── + │ │ │ ├──
+ │ │ │ │ └── + │ │ │ ├──
+ │ │ │ │ └── + │ │ │ └──
+ │ │ ├── + │ │ └── + │ │ └──
+ │ │ └── + │ │
+ │ │ + │ └── + │── + ├── + │ └── + └── + +``` + +例子 + +```js +data() { + return { + obj: '' + } +} +``` + +```vue + + + + + +``` + +image-20240111190935618 image-20240111191052830 + + + +### 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 ) | + diff --git a/src/components/mdp-ui/mdp-input/README.md b/src/components/mdp-ui/mdp-input/README.md new file mode 100644 index 0000000..f007dc5 --- /dev/null +++ b/src/components/mdp-ui/mdp-input/README.md @@ -0,0 +1,137 @@ +### mdp-input + + + +#### 基本使用 + +```vue +
+ +
+``` + +```css +.c1 { + display: flex; + height: 100vh; + justify-content: center; + align-items: center; +} +.c1 > * { + max-width: 200px; +} +``` + +image-20240112102727553 + +#### 自定义 + +mdp-input 结构如下 + +```html + + ├── + ├── + │ ├── + │ │ ├── + │ │ │ ├──
+ │ │ │ │ └── + │ │ │ ├──
+ │ │ │ │ └── + │ │ │ └──
+ │ │ ├── + │ │ └── + │ │ └──
+ │ │ └── + │ │
+ │ │ + │ └── + │── + └── + └── + + +``` + +```js +data() { + return { + status: "", + } +} +``` + +```vue + + + +``` + +image-20240112105047494 + +----- + +```js +data() { + return { + obj: '' + } +} +``` + +```vue + + + + + +``` + +image-20240111190935618 image-20240111191052830 + + + + + +### 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 ) | \ No newline at end of file diff --git a/src/components/mdp-ui/mdp-number/README.md b/src/components/mdp-ui/mdp-number/README.md new file mode 100644 index 0000000..04f1b15 --- /dev/null +++ b/src/components/mdp-ui/mdp-number/README.md @@ -0,0 +1,114 @@ +### Mdp-number + +`计数器` + +#### 基本使用 + +```vue + +``` + +```js +data() { + return { + num: 4, + } +}, +methods: { + handleChange(value1, value2) { + console.log(value1, value2); + } +}, +``` + +image-20240112114302491 + +#### 自定义 + +show-style !=='origin' 时的结构如下 + +```html + + ├── + ├── + │ ├── + │ │ ├── + │ │ │ ├── + │ │ │ │ └── + │ │ │ ├── + │ │ │ │ └── + │ │ │ └── + │ │ ├── + │ │ └── + │ │ └── + │ │ + │ └── + └── + └── + └── + + +``` + +例子1 + +```vue + + + +``` + +```js +data() { + return { + num: 1, + } +} +``` + +例子2 + +```vue + + + + + +``` + +image-20240112115454303image-20240112115522071 + + + +### 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 ) | \ No newline at end of file