feat: add v-tooltip, fix dead links and update veui
This commit is contained in:
parent
6fef8697a8
commit
cd5896799b
58
one/docs/directives/v-tooltip.md
Normal file
58
one/docs/directives/v-tooltip.md
Normal file
@ -0,0 +1,58 @@
|
||||
# v-tooltip
|
||||
|
||||
## 简介
|
||||
|
||||
`v-tooltip` 指令用于通过使用 [`Tooltip` 组件](../components/tooltip)为目标元素添加提示信息。
|
||||
|
||||
:::tip
|
||||
VEUI 对通过 `v-tooltip` 定义的全局浮层提示进行了统一的体验优化。在光标初次移入某个全局提示时,会启动“预热期”的全局计时器。在预热期内,如果光标移出目标区域,则浮层提示不会展现;如果光标在某个目标区域内直到“预热期”结束,浮层提示将在光标悬停到任何一个全局提示区域时**立刻**展现。当光标移出全局提示区域时将会启动“冷却期”计时器。在“冷却期”内,如果再次移入目标区域,则浮层提示将会立刻展现且;只有在目标区域外超过“冷却期”的时间,才会回到初始状态,再次触发浮层提示需要重新预热。
|
||||
:::
|
||||
|
||||
## 示例
|
||||
|
||||
## API
|
||||
|
||||
:::tip
|
||||
指令的具体用法请参考[官方文档](https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4)。更多详细参数请参考[自定义指令](https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0)。
|
||||
:::
|
||||
|
||||
### 绑定值
|
||||
|
||||
类型:`string|Object`。
|
||||
|
||||
使用 `string` 类型表示提示的文本信息:
|
||||
|
||||
```html
|
||||
<button v-tooltip="添加">+</button>
|
||||
```
|
||||
|
||||
使用 `Object` 类型时绑定值可完整配置所有参数。例如:
|
||||
|
||||
```html
|
||||
<button v-tooltip="{
|
||||
content: '添加',
|
||||
position: 'top',
|
||||
disabled: false
|
||||
}">+</button>
|
||||
```
|
||||
|
||||
| 参数 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| `content` | `string|VNode|Array<VNode>` | - | 提示信息字符串或通过渲染函数返回的虚拟节点(数组)。 |
|
||||
| `position` | `string` | - | 浮层提示的展示位置。参考 [`Tooltip`](../components/tooltip) 组件的 [`position`](../components/tooltip#props) 属性。 |
|
||||
| `disabled` | `boolean` | `false` | 是否禁用浮层提示。 |
|
||||
|
||||
### 修饰符
|
||||
|
||||
对应 `Object` 类型绑定值中的 `position`。例如:
|
||||
|
||||
```html
|
||||
<button v-tooltip.bottom-end="添加">+</button>
|
||||
```
|
||||
|
||||
### 全局配置
|
||||
|
||||
| 配置项 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| `tooltip.warmup` | `number` | `800` | 完成“预热”所需的毫秒数。 |
|
||||
| `tooltip.cooldown` | `number` | `800` | 完成“冷却”所需要的毫秒数。 |
|
@ -91,8 +91,6 @@ We intend to transpile and build VEUI and its dependencies along with the applic
|
||||
|
||||
When using `veui-theme-dls`, you need to import the base stylesheet, which includes style normalization.
|
||||
|
||||
You also need to import `:focus-visible` polyfill for better focus style to work properly ([Why?](./getting-started/focus-visible)).
|
||||
|
||||
Import from JavaScript:
|
||||
|
||||
```js
|
||||
|
@ -93,8 +93,6 @@ VEUI 采取了样式主题与组件代码分离的开发、发布方式。组件
|
||||
|
||||
在使用 `veui-theme-dls` 时,需要先全局引入基础样式以及,包括样式的 normalize 及一些基本元素的样式。
|
||||
|
||||
除此之外还需自行引入 `:focus-visible` polyfill 以更好地处理焦点交互样式([为什么?](./getting-started/focus-visible))。
|
||||
|
||||
从 JavaScript 引入:
|
||||
|
||||
```js
|
||||
|
@ -17,10 +17,6 @@
|
||||
"title": "veui-loader",
|
||||
"slug": "veui-loader"
|
||||
},
|
||||
{
|
||||
"title": ":focus-visible",
|
||||
"slug": "focus-visible"
|
||||
},
|
||||
{
|
||||
"title": "预设样式",
|
||||
"slug": "style-variants"
|
||||
@ -337,6 +333,10 @@
|
||||
{
|
||||
"title": "v-longpress",
|
||||
"slug": "v-longpress"
|
||||
},
|
||||
{
|
||||
"title": "v-tooltip",
|
||||
"slug": "v-tooltip"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -405,10 +405,6 @@
|
||||
"title": "veui-loader",
|
||||
"slug": "veui-loader"
|
||||
},
|
||||
{
|
||||
"title": ":focus-visible",
|
||||
"slug": "focus-visible"
|
||||
},
|
||||
{
|
||||
"title": "Style variants",
|
||||
"slug": "style-variants"
|
||||
@ -661,49 +657,59 @@
|
||||
"sub": true
|
||||
},
|
||||
{
|
||||
"title": "Loading - 加载",
|
||||
"title": "Loading",
|
||||
"slug": "loading",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "TimePicker - 时间选择",
|
||||
"title": "TimePicker",
|
||||
"slug": "time-picker",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Autocomplete - 自动完成",
|
||||
"title": "Autocomplete",
|
||||
"slug": "autocomplete",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Anchor - 锚点",
|
||||
"title": "Anchor",
|
||||
"slug": "anchor",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Drawer - 抽屉",
|
||||
"title": "Drawer",
|
||||
"slug": "drawer",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Embedded - 嵌入式面板",
|
||||
"title": "Embedded",
|
||||
"slug": "embedded",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Menu - 导航菜单",
|
||||
"title": "Menu",
|
||||
"slug": "menu",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Collapse - 折叠式面板",
|
||||
"title": "Collapse",
|
||||
"slug": "collapse",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Accordion - 手风琴面板",
|
||||
"title": "Accordion",
|
||||
"slug": "accordion",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Lightbox",
|
||||
"slug": "lightbox",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Cascader",
|
||||
"slug": "cascader",
|
||||
"disabled": true
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -736,6 +742,11 @@
|
||||
"title": "v-longpress",
|
||||
"slug": "v-longpress",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "v-tooltip",
|
||||
"slug": "v-tooltip",
|
||||
"disabled": true
|
||||
}
|
||||
]
|
||||
},
|
||||
|
32
package-lock.json
generated
32
package-lock.json
generated
@ -6168,9 +6168,9 @@
|
||||
}
|
||||
},
|
||||
"babel-plugin-veui": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.0.3.tgz",
|
||||
"integrity": "sha512-AWzr1aHcR3+qN5Nbqn8eZrKJH+mcAoO2wPiqjRsYnsPOzTyzGD5sJH8Ng6qkzoqMlXecmu4P4ZAjZa1AsAOdUQ==",
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.0.4.tgz",
|
||||
"integrity": "sha512-yXD+K4DfAUsaKpvqQlPXAhVyqZv6o5hfzoAEOpWuJHPowVMnqBI9cqIIPpdE6QXG2ro6NVpjUE02v1QGW4giYg==",
|
||||
"dev": true
|
||||
},
|
||||
"babel-runtime": {
|
||||
@ -18808,9 +18808,9 @@
|
||||
}
|
||||
},
|
||||
"veui": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/veui/-/veui-2.0.3.tgz",
|
||||
"integrity": "sha512-f1TwoZNwrlYewFYxtRb12MIBl/t0xv3k9YPDkipj/t4fSUB7r1VO+ypMtTwo6E6RuNfYcvXf/qU7jBUoYQH+EA==",
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/veui/-/veui-2.0.4.tgz",
|
||||
"integrity": "sha512-F9MnmS5mfD/bkhvgD7dRaHYFwgobZUEIl+WN8byj5UWxylmIcsWkZLw1gS0KgloCAMIHeKBkKrpXgylysSyfeg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bytes": "^3.0.0",
|
||||
@ -18833,9 +18833,9 @@
|
||||
}
|
||||
},
|
||||
"veui-loader": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.0.3.tgz",
|
||||
"integrity": "sha512-wz6pQzHSbEuwTD4DXRNO0DaaO5xqdXelfUucyh/VvAJCMeGvAlCcn4UtSmUBudBXGJtHiV0lni+SbWacfwj0vQ==",
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.0.4.tgz",
|
||||
"integrity": "sha512-JhChTKhNBmCGnhiNAXZTRstAW8ajBlBOV/kQuymQdwcOj9VNFIZDJn1/0SflZ4VbP7/AgGZS5Fr8XiXHRlPxig==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -18925,9 +18925,9 @@
|
||||
}
|
||||
},
|
||||
"veui-theme-dls": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.0.3.tgz",
|
||||
"integrity": "sha512-7CUc7ajd/yOBM7znf370K6rZOkmLfKfdlmT9UJly37UeTIIOSagKqMTTj9BEz4rH3WlzBVQUn1AIvvHp8dU4mw==",
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.0.4.tgz",
|
||||
"integrity": "sha512-RdaBvhaLIOktVsvy3osL6Z8td46LPZfzi0FAM2S6aF9D/hCJ8DM9f5FoaaU0Oa/mnH5pAT9rlpb+XLYRyfhpAQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"classlist-polyfill": "^1.2.0",
|
||||
@ -18935,7 +18935,7 @@
|
||||
"focus-visible": "^4.1.0",
|
||||
"less-plugin-dls": "^1.0.0-alpha.36",
|
||||
"less-plugin-est": "^3.0.0",
|
||||
"veui-theme-dls-icons": "^2.0.3"
|
||||
"veui-theme-dls-icons": "^2.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"dls-icons-vue": {
|
||||
@ -18947,9 +18947,9 @@
|
||||
}
|
||||
},
|
||||
"veui-theme-dls-icons": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.0.3.tgz",
|
||||
"integrity": "sha512-RPMIESHOfoDdenovREC3Y8+08UmNnTbWy5MxxG+O7jToAZkN9FzEGcpu/8ehIXq2PEoxC1SxHdeF9hO79Obamg==",
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.0.4.tgz",
|
||||
"integrity": "sha512-FIBmBfLzPDwsR4gILyjE6yoqP3OWTa0ar7noGIhOYkW7DmIEWIXWQ8LGt6tY+H0i+wbkHRYd3P4XVRVGQhqeHw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"dls-icons-vue": "^1.5.0"
|
||||
|
10
package.json
10
package.json
@ -23,7 +23,7 @@
|
||||
"@docsearch/js": "^3.0.0-alpha.39",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"babel-plugin-veui": "^2.0.3",
|
||||
"babel-plugin-veui": "^2.0.4",
|
||||
"dls-icons-vue": "^0.14.0",
|
||||
"eslint": "^5.15.1",
|
||||
"eslint-config-prettier": "^4.1.0",
|
||||
@ -71,10 +71,10 @@
|
||||
"stylus-loader": "^3.0.2",
|
||||
"unist-util-remove": "^1.0.1",
|
||||
"unist-util-visit": "^1.4.0",
|
||||
"veui": "^2.0.3",
|
||||
"veui-loader": "^2.0.3",
|
||||
"veui-theme-dls": "^2.0.3",
|
||||
"veui-theme-dls-icons": "^2.0.3",
|
||||
"veui": "^2.0.4",
|
||||
"veui-loader": "^2.0.4",
|
||||
"veui-theme-dls": "^2.0.4",
|
||||
"veui-theme-dls-icons": "^2.0.4",
|
||||
"vue-awesome": "^4.1.0",
|
||||
"vue-i18n": "^8.16.0",
|
||||
"vue-windows": "^0.2.4"
|
||||
|
Loading…
Reference in New Issue
Block a user