diff --git a/docs/components/badge/index.md b/docs/components/badge/index.md index f903556b5c3cdbd6adbc34af7522f748b683709a..3084859c548f20c59ae4ee1651f8942f7b676a3f 100644 --- a/docs/components/badge/index.md +++ b/docs/components/badge/index.md @@ -8,138 +8,106 @@ ### 基本徽章 -基本徽章类型，当有包裹元素时在右上角显示徽章和数目。 - -未读消息 -未读消息 -未读消息 -未读消息 - -```html -未读消息 -未读消息 -未读消息 -未读消息 +::: demo 基本徽章类型，当有包裹元素时在右上角显示徽章和数目。 +```vue + + ``` +::: ### 点状徽章 -点状徽章类型，当有包裹元素且 showDot 参数为 true 时为点状徽章，默认在右上角展示小点不显示数目。 - -未读消息 -未读消息 - - - - - - - -```html -未读消息 -未读消息 - +:::demo 点状徽章类型，当有包裹元素且 showDot 参数为 true 时为点状徽章，默认在右上角展示小点不显示数目。 +```vue + + ``` +::: ### 计数徽章 -当徽章独立使用且不包裹任何元素时，只展示徽章状态色和数目。 - - - -```html - +:::demo 当徽章独立使用且不包裹任何元素时，只展示徽章状态色和数目。 +```vue + + ``` +::: ### 状态徽章 -当徽章独立使用、不包裹任何元素且 showDot 参数为 true 时为状态徽章，不同状态展示不同色点。 - -  danger
-  warning
-  waiting
-  info
-  success
+:::demo 当徽章独立使用、不包裹任何元素且 showDot 参数为 true 时为状态徽章，不同状态展示不同色点。 +```vue + -```html -  danger
-  warning
-  waiting
-  info
-  success
``` +::: ### 徽章位置 -通过 badgePos 参数设置徽章位置。 - -未读消息 -未读消息 - - - - - - -```html -未读消息 -未读消息 - - - - +:::demo 通过 badgePos 参数设置徽章位置。 +```vue + + ``` +::: ### 自定义 -通过 bgColor 参数设置徽章展示状态色(此时 status 参数设置的徽章状态色失效)，通过 offsetXY 参数可设置相对于 badgePos 的徽章偏移量。通过 textColor、bgColor 自定义文字、背景颜色。 - - - - - - - -未读消息 -未读消息 - - -```html - +:::demo 通过 bgColor 参数设置徽章展示状态色(此时 status 参数设置的徽章状态色失效)，通过 offsetXY 参数可设置相对于 badgePos 的徽章偏移量。通过 textColor、bgColor 自定义文字、背景颜色。 +```vue + + ``` +::: ### API diff --git a/docs/components/image-preview/index.md b/docs/components/image-preview/index.md index 20867c52e01ec4dcb4da29770b171c862ad99727..25ebc6a27049af2a5185fe823a83e3f6cb675e4f 100644 --- a/docs/components/image-preview/index.md +++ b/docs/components/image-preview/index.md @@ -8,95 +8,58 @@ ### 基本用法 -使用 v-d-image-preview 指令，对容器内图片进行预览。 - -
- -
- -```html -
- -
- - -``` - -### 自定义开启预览窗口 - -传入 custom 参数,指令会自动注入 open 方法，通过 custom.open 开启预览窗口 - -
- -
-自定义 - -```html -
- -
-自定义 - - -``` - -### 设置 zIndex - -通过设置 zIndex 控制弹出效果的层级，设置 backDropZIndex 控制弹出层背景的层级。 -可以看到当设置 zIndex 小于 backDropZIndex 时，imagePreview 会显示在背景下方。 -可以通过 Esc 关闭 imagePreview。 - -``` -// 待嵌入 modal 组件即可 + ``` +::: -### API - -| 参数 | 类型 | 默认 | 说明 | -| :------------: | :-------: | :---: | :------------------------------------------------------------ | -| custom | `Object` | -- | 可选，指令会自动注入 open 方法，通过 custom.open 开启预览窗口 | -| disableDefault | `Boolean` | false | 可选，关闭默认点击触发图片预览方式 | -| zIndex | `Number` | 1050 | 可选，可选，设置预览时图片的 z-index 值 | -| backDropZIndex | `Number` | 1040 | 可选，设置预览时图片背景的 z-index 值 | +### 自定义开启预览窗口 - - +``` +::: + +### 设置 zIndex + +通过设置 zIndex 控制弹出效果的层级，设置 backDropZIndex 控制弹出层背景的层级。 +可以看到当设置 zIndex 小于 backDropZIndex 时，imagePreview 会显示在背景下方。 +可以通过 Esc 关闭 imagePreview。 + +``` +// 待嵌入 modal 组件即可 +``` + + +### API + +| 参数 | 类型 | 默认 | 说明 | +| :------------: | :-------: | :---: | :------------------------------------------------------------ | +| custom | `Object` | -- | 可选，指令会自动注入 open 方法，通过 custom.open 开启预览窗口 | +| disableDefault | `Boolean` | false | 可选，关闭默认点击触发图片预览方式 | +| zIndex | `Number` | 1050 | 可选，可选，设置预览时图片的 z-index 值 | +| backDropZIndex | `Number` | 1040 | 可选，设置预览时图片背景的 z-index 值 | + + diff --git a/docs/components/progress/index.md b/docs/components/progress/index.md index d42495dfa2922f5f9c5864aa4bff673d7d40b1a2..b111939ecbbbc58368855cfe43b3344a0b2c4da7 100644 --- a/docs/components/progress/index.md +++ b/docs/components/progress/index.md @@ -8,8 +8,11 @@ 3. 当需要显示一个操作完成的百分比或已完成的步骤/总步骤时。 ### 基本用法 -基本的进度和文字配置。 + +::: demo 基本的进度和文字配置。 +```vue + + ``` +::: ### 圆环用法 -基本的进度和文字配置。 - -
-
- -
-
- - -
-
- - - -
-
- - -```html -
- -
-
- -
-
- - - -
-``` - -```css +::: demo +```vue + + ``` +::: ### API #### d-progress 参数 @@ -108,35 +98,3 @@ | isCircle | `boolean` | false | 可选， 显示进度条是否为圈形 | [圆环用法](#圆环用法) | | strokeWidth | `number` | 6 | 可选，设置圈形进度条宽度，单位是进度条与画布宽度的百分比 | [圆环用法](#圆环用法) | | showContent | `boolean` | true | 可选，设置圈形进度条内是否展示内容 | [圆环用法](#圆环用法) | - - - diff --git a/docs/components/switch/index.md b/docs/components/switch/index.md index fed087bd7fd61c09c353254cc8bad4727f8d664c..e3b97ac7e71d48a7d12eb3462130bcdfef3db8f9 100644 --- a/docs/components/switch/index.md +++ b/docs/components/switch/index.md @@ -6,63 +6,70 @@ 当两种状态需要来回切换控制时，比如启用/禁用。 -### 基本用法 +### size -
- -#### Small - -
- - - -
-
- -#### Middle - -
- - - -
- - - -
-
- -#### Large - -
+:::demo size可选：`small | middle | large`，默认为middle +```vue + + +``` +::: ### disabled -
- - - +:::demo 可选，是否禁用开关，默认为false +```vue + + +``` +::: ### 自定义样式 -
- - -
- +:::demo 可选，可设置文字说明/图标 +```vue + - - -``` html - - - - - - - - - - - - - - -``` + +``` +::: ### d-switch 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo -| :--------------: | :--------------------------: | :---: | :-----------------------: | :--------------------- | -| size | `small \| middle \| large` | `middle` | 可选，开关尺寸大小 | [基本用法](#基本用法) -| color | `string` | -- | 可选，开关打开时的自定义颜色 | [自定义样式](#自定义样式) -| checked | `boolean` | false | 可选，开关是否打开，默认关闭 | [基本用法](#基本用法) -| disabled | `boolean` | false | 可选，是否禁用开关 | [基本用法](#基本用法) -| checkedContent | `string \| HTMLElement` | '' | 可选，开关打开时说明 | [自定义样式](#自定义样式) -| uncheckedContent | `string \| HTMLElement` | '' | 可选，开关关闭时说明 | [自定义样式](#自定义样式) +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :--------------: | :------------------------: | :------: | :--------------------------: | :------------------------ | +| size | `small \| middle \| large` | `middle` | 可选，开关尺寸大小 | [size](#size) | +| color | `string` | -- | 可选，开关打开时的自定义颜色 | [自定义样式](#自定义样式) | +| checked | `boolean` | false | 可选，开关是否打开，默认关闭 | [基本用法](#size) | +| disabled | `boolean` | false | 可选，是否禁用开关 | [基本用法](#size) | +| checkedContent | `string \| HTMLElement` | '' | 可选，开关打开时说明 | [自定义样式](#自定义样式) | +| uncheckedContent | `string \| HTMLElement` | '' | 可选，开关关闭时说明 | [自定义样式](#自定义样式) | ### d-switch 事件 | 事件 | 类型 | 说明 | | :----: | :---------------------: | :------------------------------------ | -| change | `EventEmitter` | 可选,开关打开返回 true,关闭返回 false | +| change | `EventEmitter` | 可选,开关打开返回 true,关闭返回 false | \ No newline at end of file