feat: update search, refine docs

2021-08-23 19:37:43 +08:00
parent c3d26e6e80
commit 6fef8697a8
40 changed files with 5331 additions and 2199 deletions
--- a/one/docs/advanced/overlay.md
+++ b/one/docs/advanced/overlay.md
@@ -29,7 +29,7 @@

 <img class="preview hero" src="/images/development/advanced/overlay-tree.png">

-树中每一个蓝色节点都对应关联到具体的[浮层组件](../componets/overlay)实例。针对上图，树的构造顺序可以是：
+树中每一个蓝色节点都对应关联到具体的[浮层组件](../components/overlay)实例。针对上图，树的构造顺序可以是：

 1. 弹出“对话框 1”，创建一个“对话框 1”节点，根据节点权重信息创建一个分组，然后将分组挂在 root 节点之下。
 2. 弹出“对话框 2”，创建一个“对话框 2”节点，发现已经存在相同权重的分组，就直接将“对话框 2”节点放置在该分组的末尾位置。
@@ -105,7 +105,7 @@ VEUI 中，浮层支持两种定位方式：

 以坐标方式定位时，需要自己写 CSS 进行控制（浮层模块内部只会生成浮层根元素的 `z-index` 值）。

-相对元素定位时，可以通过[浮层组件](../components/overlay)的 `options` 属性描述偏移和变换规则。由于目前内部采用 [Tether](http://tether.io/) 实现，因此完整的配置项可以参考 [Tether 官网](http://tether.io/#options)。同时，也支持一些常见场景的简化配置：<code>{ position: &#0096;${side}-${align}&#0096; }</code>，`side` 表示浮层根元素位于目标元素哪一边（`top`/`right`/`bottom`/`left`），`align` 表示对齐方式（`start`/`end`）。其中 `side` 是必须的，`align` 不传表示居中。推荐尽量使用简化的配置。
+相对元素定位时，可以通过[浮层组件](../components/overlay)的 `options` 属性描述偏移和变换规则。由于目前内部采用 [Popper.js](https://popper.js.org/docs/v1/) 实现，因此完整的配置项可以参考 [Popper.js 官网](https://popper.js.org/docs/v1/#popperdefaults--codeobjectcode)。

 ## 样式

--- a/one/docs/components/alert-box.md
+++ b/one/docs/components/alert-box.md
@@ -23,7 +23,12 @@
 | `open` | `boolean` | `false` | [^open] |
 | `type` | `string=` | `'success'` | [^type] |
 | `title` | `string=` | - | 标题。 |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 `overlay-class` 属性。 |
+| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
+| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
+| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^open
 :::badges
--- a/one/docs/components/cascader.md
+++ b/one/docs/components/cascader.md
@@ -51,7 +51,8 @@
 | `value-display` | `'complete' | 'simple'` | `simple` | [^value-display] |
 | `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
 | `readonly` | `boolean=` | `false` | 是否为只读状态。 |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^ui
 预设样式。
--- a/one/docs/components/confirm-box.md
+++ b/one/docs/components/confirm-box.md
@@ -14,7 +14,13 @@
 | --- | --- | --- | --- |
 | `open` | `boolean` | `false` | [^open] |
 | `title` | `string=` | - | 标题。 |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 `overlay-class` 属性。 |
+| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
+| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
+| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
+| `cancel-label` | `string=` | - | “取消”按钮的文字内容。 |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^open
 :::badges
--- a/one/docs/components/dialog.md
+++ b/one/docs/components/dialog.md
@@ -49,7 +49,9 @@
 | `inline` | `boolean=` | `false` | 是否内联在内容中显示并占用内容空间。 |
 | `footless` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
 | `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
-| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于加载状态时确定按钮也将进入禁用状态，无法点击。 |
+| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
+| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
+| `cancel-label` | `string=` | - | “取消”按钮的文字内容。 |
 | `priority` | `number=` | - | 对话框浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
 | `before-close` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
 | `overlay-class` | `string|Object=` | - | 对话框浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
--- a/one/docs/components/drawer.md
+++ b/one/docs/components/drawer.md
@@ -34,7 +34,11 @@
 | `draggable` | `boolean` | `false` | 是否可拖拽。 |
 | `escapable` | `boolean` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭抽屉。仅在 `closable` 为 `true` 时生效。 |
 | `footless` | `boolean` | `false` | 是否不显示默认的底部操作栏。 |
-| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发抽屉关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
+| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
+| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
+| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
+| `cancel-label` | `string=` | - | “取消”按钮的文字内容。 |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
 | `overlay-class` | `string|Object` | - | 抽屉浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |

 ^^^ui
--- a/one/docs/components/dropdown.md
+++ b/one/docs/components/dropdown.md
@@ -55,7 +55,8 @@
 | `split` | `boolean=` | `false` | 是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。 |
 | `expanded` | `boolean=` | `false` | [^expanded] |
 | `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^ui
 预设样式。
--- a/one/docs/components/input.md
+++ b/one/docs/components/input.md
@@ -36,6 +36,7 @@
 | `composition` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
 | `select-on-focus` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
 | `get-length` | `function(string): number=` | 自定义的字符长度计算函数。 |
+| `trim` | `boolean|string=` | `false` | [^trim] |

 ^^^ui
 预设样式。
@@ -70,6 +71,18 @@
 +++
 ^^^

+^^^trim
+是否移除前后空格。当为 `true` 时，会移除前后空格，当为 `false` 时，不移除前后空格。设置为字符串时，按指定方式进行移除。
+
+++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `both` | 移除两端空格。等同于 `true` 时的行为。 |
+| `start` | 移除开始空格。 |
+| `end` | 移除末尾空格。 |
+++
+^^^
+
 ### 插槽

 | 名称 | 描述 |
--- a/one/docs/components/option-group.md
+++ b/one/docs/components/option-group.md
@@ -17,7 +17,8 @@
 | `label` | `string` | - | 选项组的标题。 |
 | `options` | `Array<Object>` | `[]` | [^options] |
 | `position` | `string` | `inline` | [^position] |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 `overlay-class` 属性。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^options
 选项列表，项目的类型为 `{label, value, disabled, ...}`。
--- a/one/docs/components/overlay.md
+++ b/one/docs/components/overlay.md
@@ -43,6 +43,7 @@
 | `inline` | `boolean` | `false` | 是否将浮层渲染为内联内容。 |
 | `local` | `boolean` | `false` | 是否将浮层保留在原来的 DOM 位置，而非移动到全局位置并参与[全局浮层管理](../advanced/overlay)。 |
 | `overlay-class` | `string|Array|Object=` | - | [^overlay-class] |
+| `overlay-style` | `string|Array|Object=` | - | [^overlay-style] |
 | `options` | `Object` | 透传给底层 Popper.js 实现的 `modifiers` 配置项，具体内容参见[这里](https://popper.js.org/docs/v1/#modifiers)。 |

 ^^^open
@@ -81,6 +82,9 @@
 :::
 ^^^

+^^^overlay-style
+浮层根元素的样式，数据格式为所有 [Vue 支持的 `style` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F)。
+^^^
 ### 插槽

 | 名称 | 描述 |
--- a/one/docs/components/popover.md
+++ b/one/docs/components/popover.md
@@ -32,7 +32,8 @@
 | `position` | `string` | `'top'` | [^position] |
 | `trigger` | `string` | `'hover'` | [^trigger] |
 | `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入气泡进行交互前已经自动关闭。 |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^ui
 预设样式。
--- a/one/docs/components/prompt-box.md
+++ b/one/docs/components/prompt-box.md
@@ -16,7 +16,13 @@
 | `title` | `string` | - | 标题。 |
 | `content` | `string` | `'请输入'` | 输入框上方的说明内容。 |
 | `value` | `string` | `''` | [^value] |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 `overlay-class` 属性。 |
+| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
+| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
+| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
+| `cancel-label` | `string=` | - | “取消”按钮的文字内容。 |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^open
 :::badges
--- a/one/docs/components/select.md
+++ b/one/docs/components/select.md
@@ -48,7 +48,8 @@
 | `expanded` | `boolean=` | `false` | [^expanded] |
 | `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
 | `readonly` | `boolean=` | `false` | 是否为只读状态。 |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^ui
 预设样式。
--- a/one/docs/components/tabs.md
+++ b/one/docs/components/tabs.md
@@ -42,6 +42,7 @@
 | `addable` | `boolean` | `false` | 是否可以增加标签。 |
 | `max` | `number` | - | 可增加标签的上限值。 |
 | `tip` | `string` | - | 提示文本。 |
+| `add-label` | `string=` | - | “添加”按钮的文字内容。 |
 | `eager` | `boolean` | `false` | 是否立即渲染所有非当前激活项的标签面板内容（并隐藏）。 |

 ^^^ui
--- a/one/docs/components/tooltip.md
+++ b/one/docs/components/tooltip.md
@@ -33,7 +33,8 @@
 | `trigger` | `string` | `'hover'` | [^trigger] |
 | `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
 | `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |

 ^^^ui
 预设样式。
--- a/one/docs/components/transfer.md
+++ b/one/docs/components/transfer.md
@@ -28,14 +28,16 @@
 | -- | -- | -- | -- |
 | `ui` | `string=` | - | [^ui] |
 | `datasource` | `Array<Object>` | `[]` | [^datasource] |
-| `searchable` | `boolean` | `true` | 是否允许搜索。 |
-| `filter` | `function` | 见描述 | [^filter] |
-| `selected` | `Array` | `[]` | [^selected] |
-| `candidate-placeholder` | `string` | - | 待选区内搜索框的占位文本。 |
-| `selected-placeholder` | `string` | - | 已选区内搜索框的占位文本。 |
-| `selected-show-mode` | `string` | `'tree'` | [^selected-show-mode] |
+| `searchable` | `boolean=` | `true` | 是否允许搜索。 |
+| `filter` | `function=` | 见描述 | [^filter] |
+| `selected` | `Array=` | `[]` | [^selected] |
+| `candidate-placeholder` | `string=` | - | 待选区内搜索框的占位文本。 |
+| `selected-placeholder` | `string=` | - | 已选区内搜索框的占位文本。 |
+| `candidate-label` | `string=` | - | “待选项”标题的文字内容。 |
+| `selected-label` | `string=` | - | “已选项”标题的文字内容。 |
+| `selected-show-mode` | `string=` | `'tree'` | [^selected-show-mode] |
 | `keys` | `string|function` | `'value'` | [^keys] |
-| `merge-checked` | `string` | `keep-all` | [^merge-checked] |
+| `merge-checked` | `string=` | `keep-all` | [^merge-checked] |

 ^^^ui
 预设样式。
@@ -67,7 +69,7 @@
 +++参数详情
 | 名称 | 类型 | 描述 |
 | -- | -- | -- |
-| `from` | `string` | 搜索来源，可选枚举值：`'candidate'`、`'selected'`。`'candidate'` 表示是备选列表触发的搜索，`'selected'` 表示是已选列表触发的搜索。 |
+| `from` | `string` | 搜索来源，可选枚举值：`'candidate'`、`'selected'`。`'candidate'` 表示是待选列表触发的搜索，`'selected'` 表示是已选列表触发的搜索。 |
 | `keyword` | `string` | 搜索关键词。 |
 | `item` | `Object` | 当前遍历到的数据项。 |
 | `index` | `number` | 当前数据项在兄弟项目中的索引。 |
@@ -127,10 +129,11 @@ function (keyword, { label }) {

 | 名称 | 描述 |
 | -- | -- |
-| `candidate-head` | 待选区内顶部标题区域。 |
-| `selected-head` | 已选区内顶部标题区域。 |
-| `candidate-title` | 待选区内顶部标题文本区域。 |
-| `selected-title` | 已选区内顶部标题文本区域。 |
+| `candidate` | 整个待选区。 |
+| `candidate-head` | [^candidate-head] |
+| `selected-head` | [^selected-head] |
+| `candidate-title` | 待选区内顶部标题文本区域。作用域参数与 `candidate-head` 一致。 |
+| `selected-title` | 已选区内顶部标题文本区域。作用域参数与 `selected-head` 一致。 |
 | `candidate-no-data` | 数据源没数据时显示的内容。 |
 | `selected-no-data` | 没有已选项时显示的内容。 |
 | `candidate-item` | [^candidate-item] |
@@ -138,6 +141,26 @@ function (keyword, { label }) {
 | `candidate-item-label` | 待选区内每一项的文本区域。作用域参数与 `candidate-item` 一致。 |
 | `selected-item-label` | 已选区内每一项的文本区域。当 `selected-show-mode` 为 `'tree'` 时作用域参数与 `selected-item` 一致。否则该插槽对应每个已选叶子项目的整条路径上的每个节点内容，此时作用域参数与 `candidate-item` 一致。 |

+^^^candidate-head
+待选区内顶部标题区域。
+
+++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `count` | `number` | 待选项的数量。 |
+++
+^^^
+
+^^^selected-head
+已选区内顶部标题区域。
+
+++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `count` | `number` | 已选项的数量。 |
+++
+^^^
+
 ^^^candidate-item
 待选区内的每一项内容。

--- a/one/docs/components/uploader.md
+++ b/one/docs/components/uploader.md
@@ -52,7 +52,6 @@
 | `data-type`| `string` | `'json'` | [^data-type] |
 | `convert-response` | `uploader.convertResponse` | - | [^convert-response] |
 | `accept` | `string` | - | 与原生 `<input>` 元素 的 `accept` 相同，在浏览器的文件类型筛选后再加一层校验。对于类似 `application/msword` 这样的 MIME type 与扩展名对不上的情形跳过校验。 |
-| `extensions` | `Array<string>` | `['jpg', 'jpeg', 'gif', 'png', 'bmp', 'tif', 'tiff', 'webp', 'apng', 'svg']` | 如果 `accept` 的值是类似 `'image/*'` 这样的形式，可以指定能通过校验的所有的扩展名。 |
 | `max-count` | `number` | - | 最大文件数量。 |
 | `max-size` | `number|string` | - | 单个文件的最大大小，如果是 `number`，单位是 `byte`；如果是 `string`，支持在数字后面添加单位，单位可以是 `b`/`kb`/`mb`/`gb`/`tb`。 |
 | `validator` | `function(Object): Object|Promise<Object>` | - | [^validator] |
--- a/one/docs/directives/v-drag.md
+++ b/one/docs/directives/v-drag.md
@@ -42,10 +42,9 @@

 | 参数 | 类型 | 默认值 | 描述 |
 | -- | -- | -- | -- |
-| `targets` | `Array<string|Vue|HTMLElement>` | `[]` | [^targets] |
+| `targets` | `Array<string | Vue | HTMLElement>` | `[]` | [^targets] |
 | `type` | `string` | - | 该参数指定变化的类型，目前内置了 `translate` 类型（变换目标元素位置），可以进行[扩展](#扩展)。 |
-| `draggable` | `boolean` | `true` | 是否响应鼠标拖拽操作。 |
-| `containment` | `string|Vue|HTMLElement|Object` | - | [^containment] |
+| `containment` | `string | Vue | HTMLElement | Object` | - | [^containment] |
 | `axis` | `string` | - | 限制所有目标元素只能在水平或者垂直方向上做变换。取值为：`x`、`y`。 |
 | `dragstart` | `function(): Object` | `function() {}` | [^dragstart] |
 | `drag` | `function(): Object` | `function() {}` | [^drag] |
@@ -93,10 +92,10 @@
 +++类型详情
 | 类型 | 描述 |
 | -- | -- |
-| `string` | 如果以 `@` 开头（可以通过[全局配置](../advanced/global-config) `drag.prefix` 修改），就被认为是特殊逻辑，会透传给具体的 Handler 处理；否则，在指令所在组件上下文中，根据 `ref` 查找指定的 DOM 元素。 |
+| `string` | 如果以 `@` 开头，就被认为是特殊逻辑，会透传给具体的 Handler 处理；否则，在指令所在组件上下文中，根据 `ref` 查找指定的 DOM 元素。 |
 | `Vue` | 根据组件实例找到 DOM 元素。 |
 | `HTMLElement` | 直接接收 DOM 元素。 |
-| `Object` | 接受任意包含 `{top, left, width, height}` 字段的普通对象，表示相对于视口的矩形区域的坐标和尺寸，四个字段均为 `number` 类型。 |
+| `Object` | 接受任意包含 `{ top, left, width, height }` 字段的普通对象，表示相对于视口的矩形区域的坐标和尺寸，四个字段均为 `number` 类型。 |
 +++
 ^^^

@@ -120,7 +119,7 @@

 ## 拖拽排序（v-drag.sort）

-可以通过 `v-drag.sort` 或 `v-drag="{type: 'sort', ...}"` 来实现拖拽排序。
+可以通过 `v-drag.sort` 或 `v-drag="{ type: 'sort', ... }"` 来实现拖拽排序。

 ### 绑定值

@@ -130,16 +129,13 @@
 | -- | -- | -- | -- |
 | `name` | `string` | - | 用来标记一组项目，在这组项目中进行排序。 |
 | `type` | `string` | - | 该参数指定变化的类型，拖拽排序是 `sort` 。 |
-| `containment` | `string|Vue|HTMLElement|Object` | - | 参见上面的基础描述 |
+| `containment` | `string | Vue | HTMLElement` | - | 参见指令基础描述，对于拖拽排序功能不支持 `Object` 类型的值。 |
 | `axis` | `string` | - | 限制所有目标元素只能在水平或者垂直方向上做排序。取值为：`x`、`y`。 |
-| `callback` | `function(toIndex: number, fromIndex: number): void` | - | [^sort_callback] |
-| `debug` | `boolean` | `false` | 在开发模式（process.env.NODE_ENV === 'development'）下在 DOM 上显示热区标记以方便调试。 |
+| `sort` | `function(fromIndex: number, toIndex: number): void` | - | [^sort_callback] |
+| `handle` | `string | Vue | HTMLElement` | - | 指定拖拽排序的拖拽操作的“把手”元素，只有拖动对应元素才会触发排序。类型同 `containment` 参数。 |

 ^^^sort_callback
-排序指令仅仅通过该回调告诉用户排序的情况，即：从原来位置（`fromIndex`）移动到新位置（`toIndex`）,用户自己应该在该回调中对数据源进行调整位置。
-
-** 回调触发时机：当 *fromIndex* 元素的中心点拖动到热区（*toIndex* 元素尾部和 *toIndex+1* 元素首部之间的区域）中触发。**
-
+排序指令仅仅通过该回调告诉用户排序的情况，即：从原来位置（`fromIndex`）移动到新位置（`toIndex`），需要自行据此对数据源进行更新。
 ^^^

 ## 扩展
--- a/one/docs/en-US/components/alert-box.md
+++ b/one/docs/en-US/components/alert-box.md
@@ -23,7 +23,12 @@ You can customize the title of alert box with the `title` prop.
 | `open` | `boolean` | `false` | [^open] |
 | `type` | `string=` | `'success'` | [^type] |
 | `title` | `string=` | - | The title of the alert box. |
-| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
+| `loading` | `boolean=` | `false` | Wehter the confirm box is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
+| `disabled` | `boolean=` | `false` | Wehter the confirm box is disabled. When disabled, the OK button will be disabled as well and become unclickable. |
+| `ok-label` | `string=` | - | The text content of the “OK” button. |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | Executed when user interaction is about to trigger closing the alert box. See the [`before-close`](./dialog#props) prop of the [`Dialog`](./dialog) component. |
+| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
+| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |

 ^^^open
 :::badges
--- a/one/docs/en-US/components/breadcrumb-item.md
+++ b/one/docs/en-US/components/breadcrumb-item.md
@@ -6,7 +6,7 @@

 ## Demos

-See [the demos of `Breadcrumb`](./grid-breadcrumb#demos).
+See [the demos of `Breadcrumb`](./breadcrumb#demos).

 ## API

--- a/one/docs/en-US/components/confirm-box.md
+++ b/one/docs/en-US/components/confirm-box.md
@@ -14,7 +14,13 @@ The title and content are both customizable.
 | --- | --- | --- | --- |
 | `open` | `boolean` | `false` | [^open] |
 | `title` | `string=` | - | The title of the confirm box. |
-| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
+| `loading` | `boolean=` | `false` | Wehter the confirm box is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
+| `disabled` | `boolean=` | `false` | Wehter the confirm box is disabled. When disabled, the OK button will be disabled as well and become unclickable. |
+| `ok-label` | `string=` | - | The text content of the “OK” button. |
+| `cancel-label` | `string=` | - | The text content of the “Cancel” button. |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | Executed when user interaction is about to trigger closing the confirm box. See the [`before-close`](./dialog#props) prop of the [`Dialog`](./dialog) component. |
+| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
+| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |

 ^^^open
 :::badges
--- a/one/docs/en-US/components/dialog.md
+++ b/one/docs/en-US/components/dialog.md
@@ -45,6 +45,9 @@ Available size/dimension variants for the `ui` prop: `s`/`m`/`narrow`/`medium`/`
 | `inline` | `boolean=` | `false` | Whether the dialog is displayed inline thus takes up space. |
 | `footless` | `boolean=` | `false` | Whether to hide the default footer. |
 | `loading` | `boolean=` | `false` | Wehter the dialog is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
+| `disabled` | `boolean=` | `false` | Wehter the dialog is disabled. When disabled, the OK button will be disabled as well and become unclickable. |
+| `ok-label` | `string=` | - | The text content of the “OK” button. |
+| `cancel-label` | `string=` | - | The text content of the “Cancel” button. |
 | `priority` | `number=` | - | The stacking priority of the dialog overlay. See the [`priority`](./overlay#props) prop of [`Overlay`](./overlay) component. |
 | `before-close` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
 | `overlay-class` | `string|Object=` | - | The class expression applied to the root element of the dialog overlay. See the [`overlay-class`](./overlay#props) prop of [`Overlay`](./overlay) component. |
--- a/one/docs/en-US/components/dropdown.md
+++ b/one/docs/en-US/components/dropdown.md
@@ -55,7 +55,8 @@ Use the `trigger` prop to specify when to open the dropdown menu. Use the `split
 | `split` | `boolean=` | `false` | Whether to split the dropdown button into a command button and a toggle button for the dropdown layer. |
 | `expanded` | `boolean=` | `false` | [^expanded] |
 | `disabled` | `boolean=` | `false` | Whether the dropdown is disabled. |
-| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
+| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
+| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |

 ^^^ui
 Style variants.
--- a/one/docs/en-US/components/input.md
+++ b/one/docs/en-US/components/input.md
@@ -36,6 +36,7 @@ Use the `disabled` prop to set an input to disabled state.
 | `composition` | `boolean=` | `false` | Whether the input process should be aware of composition. |
 | `select-on-focus` | `boolean=` | `false` | Whether to select text content when focused. |
 | `get-length` | `function(string): number=` | Used to customize length calculation of the input. |
+| `trim` | `boolean|string=` | `false` | [^trim] |

 ^^^ui
 Style variants.
@@ -70,6 +71,17 @@ The type of the input. See the [`type`](https://developer.mozilla.org/en-US/docs
 +++
 ^^^

+^^^trim
+Wether to trim the input value. If set to `true`, the input value will be trimmed from both ends. If set to `false`, the input value will not be trimmed. If set to a string, the input value will be trimmed from the specified side.
+
+++Enum
+| Value | Description |
+| -- | -- |
+| `both` | Trim from both ends. Equivalent to `true`. |
+| `start` | Trim from the start. |
+| `end` | Trim from the end. |
+++
+
 ### Slots

 | Name | Description |
--- a/one/docs/en-US/components/option-group.md
+++ b/one/docs/en-US/components/option-group.md
@@ -17,7 +17,8 @@ See [the demos of `Select`](./select#demos) or [the demos of `Dropdown`](./dropd
 | `label` | `string` | The descriptive label of the option group. |
 | `options` | `Array<Object>` | `[]` | [^options] |
 | `position` | `string` | `inline` | [^position] |
-| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
+| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
+| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |

 ^^^options
 The list of options with the option type being `{label, value, disabled, ...}`.
--- a/one/docs/en-US/components/overlay.md
+++ b/one/docs/en-US/components/overlay.md
@@ -43,6 +43,7 @@ The stacking order of child overlays a affected by their parent overlays.
 | `inline` | `boolean` | `false` | Whether to render the overlay as inline content. |
 | `local` | `boolean` | `false` | Whether to keep the overlay in it's original DOM location, instead of moving it to the global scope and participates in the [global overlay management](../advanced/overlay). |
 | `overlay-class` | `string|Array|Object=` | - | [^overlay-class] |
+| `overlay-style` | `string|Array|Object=` | - | [^overlay-style] |
 | `options` | `Object` | Configuration object passed to the `modifiers` option of the underlying Popper.js implementation. See [here](https://popper.js.org/docs/v1/#modifiers) for more details. |

 ^^^open
@@ -81,6 +82,9 @@ As the root element of all overlays are placed as direct children of the `<body>
 :::
 ^^^

+^^^overlay-style
+The style expression applied to the root element of the overlay. Supports all values defined by [Vue's `style` expressions](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles).
+
 ### Slots

 | Name | Description |
--- a/one/docs/en-US/components/popover.md
+++ b/one/docs/en-US/components/popover.md
@@ -32,7 +32,8 @@ Use the `trigger` prop to specify when to show/hide the popover.
 | `position` | `string` | `'top'` | [^position] |
 | `trigger` | `string` | `'hover'` | [^trigger] |
 | `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the popover after the close trigger is triggered. Can be used to prevent the popover being immediately closed after pointer leaves the `target` element and before it enters the popover itself. |
-| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class` prop](./overlay#props) of the [`Overlay`](./overlay) component. |
+| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
+| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |

 ^^^ui
 Style variants.
--- a/one/docs/en-US/components/prompt-box.md
+++ b/one/docs/en-US/components/prompt-box.md
@@ -14,7 +14,13 @@
 | `title` | `string` | - | The title of the prompt box. |
 | `content` | `string` | - | The description text above the text input. |
 | `value` | `string` | `''` | [^value] |
-| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
+| `loading` | `boolean=` | `false` | Wehter the prompt box is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
+| `disabled` | `boolean=` | `false` | Wehter the prompt box is disabled. When disabled, the OK button will be disabled as well and become unclickable. |
+| `ok-label` | `string=` | - | The text content of the “OK” button. |
+| `cancel-label` | `string=` | - | The text content of the “Cancel” button. |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | Executed when user interaction is about to trigger closing the prompt box. See the [`before-close`](./dialog#props) prop of the [`Dialog`](./dialog) component. |
+| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
+| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |

 ^^^open
 :::badges
--- a/one/docs/en-US/components/select.md
+++ b/one/docs/en-US/components/select.md
@@ -48,7 +48,8 @@ Use the `multiple` prop to enable multiple selections.
 | `expanded` | `boolean=` | `false` | [^expanded] |
 | `disabled` | `boolean=` | `false` | Whether the select is disabled. |
 | `readonly` | `boolean=` | `false` | Whether the select is read-only. |
-| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
+| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
+| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |

 ^^^ui
 Style variants.
--- a/one/docs/en-US/components/tooltip.md
+++ b/one/docs/en-US/components/tooltip.md
@@ -33,7 +33,8 @@ Use the `trigger` prop to specify when to show/hide the tooltip.
 | `trigger` | `string` | `'hover'` | [^trigger] |
 | `interactive` | `boolean` | `true` | Whether the tooltip content is interactive. When set to `false`, the tooltip will be automatically hidden after the event specified by `trigger` is triggered outside the `target`. |
 | `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the `target` element and before it enters the tooltip itself. |
-| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class` prop](./overlay#props) of the [`Overlay`](./overlay) component. |
+| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
+| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |

 ^^^ui
 Style variants.
--- a/one/docs/en-US/components/transfer.md
+++ b/one/docs/en-US/components/transfer.md
@@ -28,13 +28,16 @@ Available size variants for the `ui` prop: `s`/`m`.
 | -- | -- | -- | -- |
 | `ui` | `string=` | - | [^ui] |
 | `datasource` | `Array<Object>` | `[]` | [^datasource] |
-| `searchable` | `boolean` | `true` | Whether to allow search. |
-| `filter` | `function` | See description | [^filter] |
-| `selected` | `Array` | `[]` | [^selected] |
-| `candidate-placeholder` | `string` | - | The placeholder text in the search input of the candidate panel. |
-| `selected-placeholder` | `string` | - | The placeholder text in the search input of the selected panel. |
-| `selected-show-mode` | `string` | `'tree'` | [^selected-show-mode] |
-| `keys` | `string|function` | `'value'` | The customized unique key for `datasource` items. String values can be used to specify which field value is used. Also a function can bu used to specify a customized key value. |
+| `searchable` | `boolean=` | `true` | Whether to allow search. |
+| `filter` | `function=` | See description | [^filter] |
+| `selected` | `Array=` | `[]` | [^selected] |
+| `candidate-placeholder` | `string=` | - | The placeholder text in the search input of the candidate panel. |
+| `selected-placeholder` | `string=` | - | The placeholder text in the search input of the selected panel. |
+| `candidate-label` | `string=` | - | The title of the candidates panel. |
+| `selected-label` | `string=` | - | The title of the selected panel. |
+| `selected-show-mode` | `string=` | `'tree'` | [^selected-show-mode] |
+| `keys` | `string|function=` | `'value'` | The customized unique key for `datasource` items. String values can be used to specify which field value is used. Also a function can bu used to specify a customized key value. |
+| `merge-checked` | `string=` | `keep-all` | [^merge-checked] |

 ^^^ui
 Style variants.
@@ -102,14 +105,28 @@ To specify how should items inside selected panel be displayed.
 +++
 ^^^

+^^^merge-checked
+
+Merge strategy for selected values. When all child nodes under a node are selected, you can choose to keep only the parent node, only the child nodes, or both.
+
+++Enumerated values
+| Value | Description |
+| --- | --- |
+| `keep-all` | The parent and child nodes will both be in the selected value. |
+| `upwards` | Merge selected values as far as possible in the ancestor direction. |
+| `downwards` | Merge selected values in the direction of descendants if possible. |
+++
+^^^
+
 ### Slots

 | Name | Description |
 | -- | -- |
-| `candidate-head` | The head area of the candidate panel. |
-| `selected-head` | The head area of the selected panel. |
-| `candidate-title` | The title text of the candidate panel. |
-| `selected-title` | The title text of the selected panel. |
+| `candidate` | The candidate panel. |
+| `candidate-head` | [^candidate-head] |
+| `selected-head` | [^selected-head] |
+| `candidate-title` | The title text of the candidate panel. Shares the same scope properties with slot `candidate-head`. |
+| `selected-title` | The title text of the selected panel. Shares the same scope properties with slot `selected-head`. |
 | `candidate-no-data` | The content displayed when there's no data inside the candidate panel. |
 | `selected-no-data` | The content displayed when there's no data inside the selected panel. |
 | `candidate-item` | [^candidate-item] |
@@ -117,6 +134,24 @@ To specify how should items inside selected panel be displayed.
 | `candidate-item-label` | Label text of each item inside the candidate panel. Shares the same scope properties with slot `candidate-item`. |
 | `selected-item-label` | Label text of each item inside the selected panel. Shares the same scope properties with slot `selected-item` when `selected-show-mode` is `'tree'`. Otherwise this slot specifies custom content for any item along the path for all selected leaf item and shares the same scope properties with slot `candidate-item`. |

+^^^candidate-head
+The head area of the candidate panel.
+
+++Scope properties
+| Name | Type | Description |
+| -- | -- | -- |
+| `count` | `number` | The number of candidate items. |
+^^^
+
+^^^selected-head
+The head area of the selected panel.
+
+++Scope properties
+| Name | Type | Description |
+| -- | -- | -- |
+| `count` | `number` | The number of selected items. |
+^^^
+
 ^^^candidate-item
 The content of each item inside the candidate panel.

--- a/one/docs/en-US/components/tree.md
+++ b/one/docs/en-US/components/tree.md
@@ -29,6 +29,7 @@ Available size variants for the `ui` prop: `s`/`m`.
 | `checked` | `Array` | `[]` | [^checked] |
 | `selectable` | `boolean` | `false` | Whether the nodes are selectable. |
 | `selected` | `string` | - | [^selected] |
+| `merge-checked` | `string` | `keep-all` | [^merge-checked] |

 ^^^ui
 Style variants.
@@ -77,6 +78,19 @@ An array consists of the `value` from datasource items that denotes the checked
 An array consists of the `value` from datasource items that denotes the selected nodes.
 ^^^

+^^^merge-checked
+
+Merge strategy for selected values. When all child nodes under a node are selected, you can choose to keep only the parent node, only the child nodes, or both.
+
+++Enumerated values
+| Value | Description |
+| --- | --- |
+| `keep-all` | The parent and child nodes will both be in the selected value. |
+| `upwards` | Merge selected values as far as possible in the ancestor direction. |
+| `downwards` | Merge selected values in the direction of descendants if possible. |
+++
+^^^
+
 ### Slots

 | Name | Description |
--- a/one/docs/en-US/components/uploader.md
+++ b/one/docs/en-US/components/uploader.md
@@ -34,7 +34,6 @@ Set the `type` prop to `image` to use the image upload mode.
 | `data-type`| `string` | `'json'` | [^data-type] |
 | `convert-response` | `uploader.convertResponse` | - | [^convert-response] |
 | `accept` | `string` | - | The same as the `accept` attribute of native `<input>` elements. Works as an extra layer of validation on top of browsers' file filter. Will skip validation when MIME type doesn't match file extension, eg. `application/msword`. |
-| `extensions` | `Array<string>` | `['jpg', 'jpeg', 'gif', 'png', 'bmp', 'tif', 'tiff', 'webp', 'apng', 'svg']` | To specify all valid file extensions when `accept` is set to values like `'image/*'`. |
 | `max-count` | `number` | - | The maximum file count. |
 | `max-size` | `number|string` | - | The maximun size of a single file. When being a `number`, the unit will be `byte`. When being a `string`, units can be added after numbers, including `b`/`kb`/`mb`/`gb`/`tb`. |
 | `payload` | `Object` | - | The extra data payload to be sent together with the file. |
--- a/one/docs/en-US/getting-started/focus-visible.md
+++ b/one/docs/en-US/getting-started/focus-visible.md
@@ -1,33 +0,0 @@
-# `:focus-visible`
-
-Usually we provide `:focus` styles for interactive elements to enhance (keyboard) accessibility. But when we click around with mouses, most browsers will activate `:focus` state of elements like `<button>`. This will easily cause misunderstanding that the button is “selected” especially when different types of buttons are placed together. [The draft of CSS Selector Level 4 provided a `:focus-visible` pseudo class selector](https://drafts.csswg.org/selectors-4/#the-focusvisible-pseudo) to help us targeting focused elements more accurately.
-
-Actually Chrome is handling native `<button>`s in a similar way by default.
-
-> [Details on `:focus-visible`](https://github.com/WICG/focus-visible/blob/master/explainer.md)
-
-## Usage
-
-VEUI's default style package `veui-theme-dls` uses a polyfill library for `:focus-visible` to provide optimized interactive experience. You need to import it yourself in your application code:
-
-```js
-import 'focus-visible'
-```
-
-Technically focus-visible isn't really a “polyfill” because we have to use the `.focus-visible` selector instead of directly using `:focus-visible`. This should also be noted when customizing styles.
-
-### Browser compatibility
-
-As the polyfill provided by WICG won't automatically import other polyfills, you need to import polyfill for `classList` when you need to support IE9 (requires to be installed by yourself as well).
-
-```shell
-$ npm i --save classlist-polyfill
-```
-
-```js
-import 'classlist-polyfill'
-```
-
-## Demo
-
-[[ demo src="/demo/focus-visible.vue" ]]
--- a/one/docs/getting-started/focus-visible.md
+++ b/one/docs/getting-started/focus-visible.md
@@ -1,33 +0,0 @@
-# `:focus-visible`
-
-通常我们会为交互元素定义 `:focus` 状态下的样式，以增强键盘可访问性。但在使用鼠标进行点击时，多数浏览器会使 `<button>` 等元素处于 `:focus` 状态。在多个按钮并列时，这容易使人产生「按钮被选中」的错觉。[CSS Selectors Level 4 草案中的 `:focus-visible` 伪类选择器](https://drafts.csswg.org/selectors-4/#the-focusvisible-pseudo)为我们提供了选择更精确的聚焦状态的能力。
-
-Chrome 浏览器在默认状态下对 `<button>` 元素就有类似的处理。
-
-> [`:focus-visible` 详细说明](https://github.com/WICG/focus-visible/blob/master/explainer.md)
-
-## 使用
-
-VEUI 的默认主题包 `veui-theme-dls` 依赖 `:focus-visible` 的 polyfill 才能提供最好的交互效果。使用时，需要自行在项目中进行引入：
-
-```js
-import 'focus-visible'
-```
-
-严格来说 focus-visible 不能算一个真正的“polyfill”，因为在样式中我们无法直接使用 `:focus-visible` 这个伪类，而需要针对 `.focus-visible` 这个类编写样式。编写自定义样式时也需要注意这一点。
-
-### 兼容性
-
-当需要支持 IE9 时，由于 WICG 的 polyfill 不会自行引入其它 polyfill，故还需要引入 `classList` 的兼容脚本（需自行安装）：
-
-```shell
-$ npm i --save classlist-polyfill
-```
-
-```js
-import 'classlist-polyfill'
-```
-
-## 示例
-
-[[ demo src="/demo/focus-visible.vue" ]]