From 79d911c5cb3c1fe431175945477a2f9a6865ee45 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Tue, 30 Nov 2021 20:56:10 +0800 Subject: [PATCH] =?UTF-8?q?docs(readTip):=20=E6=96=B0=E5=A2=9E=E8=8B=B1?= =?UTF-8?q?=E6=96=87=E6=96=87=E6=A1=A3=E5=92=8C=E6=9B=B4=E6=94=B9=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=8A=B6=E6=80=81=E5=88=B0100%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/index.ts | 2 +- .../docs/components/read-tip/index.md | 11 +- .../docs/en-US/components/read-tip/index.md | 357 ++++++++++++++++++ 3 files changed, 363 insertions(+), 7 deletions(-) create mode 100644 packages/devui-vue/docs/en-US/components/read-tip/index.md diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts index 4ccae88c..ec9f3828 100644 --- a/packages/devui-vue/devui/read-tip/index.ts +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -10,7 +10,7 @@ export { ReadTip, } export default { title: 'ReadTip 阅读提示', category: '反馈', - status: '已完成', + status: '100%', install(app: App): void { app.use(ReadTip as any) } diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 7742abd8..9d8571c9 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -262,7 +262,6 @@ const readTipOptions = { ### 异步获取数据 -通过设置selector选择需要显示readtip的元素，传入title和content设置显示的内容。 :::demo ```vue @@ -315,11 +314,11 @@ function getDataFromDB ({ element, rule }) { d-read-tip 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | -| -------------------- | ------------------ | ---- | ------------------------------- | ---------------------- | ---------- | -| readTipOptions | ReadTipOptions | -- | 必选，配置提示选项 | [基本用法](#基本用法) | -- | -| readTipOptions.rules | ReadTipRules | -- | 必选，配置 readtip 内容 | [基本用法](#基本用法) | -- | -| contentTemplate | `TemplateRef` | -- | 可选，传入模板显示 readtip 内容 | [传入模板显示内容](#传入模板显示内容) | -- | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| -------------------- | ------------------ | ---- | ------------------------------- | ----------------------------------------------- | ---------- | +| readTipOptions | ReadTipOptions | -- | 必选，配置提示选项 | [基本用法](#基本用法) | -- | +| readTipOptions.rules | ReadTipRules | -- | 必选，配置 readtip 内容 | [包括多个提示的readtip](#包括多个提示的readtip) | -- | +| contentTemplate | `TemplateRef` | -- | 可选，传入模板显示 readtip 内容 | [传入模板显示内容](#传入模板显示内容) | -- | diff --git a/packages/devui-vue/docs/en-US/components/read-tip/index.md b/packages/devui-vue/docs/en-US/components/read-tip/index.md new file mode 100644 index 00000000..47d8b0af --- /dev/null +++ b/packages/devui-vue/docs/en-US/components/read-tip/index.md @@ -0,0 +1,357 @@ +# ReadTip reading tips + +Reading notification component. + +### When To Use + +When you need to prompt for specific content in the html document. + + +### Basic Usage +Set selector to select the element to be displayed in the readtip, and transfer title and content to set the content to be displayed. +:::demo + +```vue + + + + + +``` + +::: + +### Include Multiple Readtip +Set the readtip display mode for different elements when multiple rules are transferred. +:::demo + +```vue + + + + + +``` + +::: + + + + +### Display Content with Template +You can specify the content to be displayed by importing template. When importing template, you do not need to specify title and content. +:::demo + +```vue + + + + + +``` + +::: + +### Get Data Asynchronous + +:::demo + +```vue + + + + + +``` + +::: + +### d-read-tip + +d-read-tip parameters + +| Parameter | Parameter | Parameter | Parameter | Jump to Demo | Global Config | +| -------------------- | ------------------ | ---- | ------------------------------- | ---------------------- | ---------- | +| readTipOptions | ReadTipOptions | -- | Required. Set readtip options. | [Basic Usage](#Basic Usage) | -- | +| readTipOptions.rules | ReadTipRules | -- | Option. Set the content of readtip | [Include Multiple Readtip](#Include Multiple Readtip) | -- | +| contentTemplate | `TemplateRef` | -- | Options. Using template to customize content | [Display Content with Template](#Display Content with Template) | -- | + + + +``` +export interface ReadTipOptions { + trigger?: 'hover' | 'click'; // default is hover + showAnimate?: boolean; // default is false + mouseenterTime?: number; // default is 100 + mouseleaveTime?: number; // default is 100 + position?: PositionType | PositionType[]; // default is 'top' + overlayClassName?: string; // default is '' + appendToBody?: boolean; // defualt is true + rules: ReadTipRules; +} +export type ReadTipRules = ReadTipRule | ReadTipRule[]; + +export interface ReadTipRule { + key?: string; + selector: string; + trigger?: 'hover' | 'click'; // can inherit from ReadTipOptions + title?: string; + content?: string; + showAnimate?: boolean; // can inherit from ReadTipOptions + mouseenterTime?: number; // can inherit from ReadTipOptions + mouseleaveTime?: number; // can inherit from ReadTipOptions + position?: PositionType | PositionType[]; // can inherit from ReadTipOptions + overlayClassName?: string; // can inherit from ReadTipOptions + appendToBody?: boolean; // can inherit from ReadTipOptions + //customData should be used with template. The context of template is customData so that you can customize your template + dataFn?: ({ + element, + rule: ReadTipRule, + }) => Observable<{ title?: string; content?: string; template?: TemplateRef; customData?: any }>; +} +``` + -- Gitee