mirror of https://github.com/ElemeFE/element
Tooltip(doc): add router-link description (#3669)
cinwell.li
baiyaaaaa
parent
8f9b473911
commit
0409c63916
|
|
@ -90,7 +90,8 @@ cooking.add('vueMarkdown', {
|
|||
}
|
||||
return '</div></demo-block>\n';
|
||||
}
|
||||
}]
|
||||
}],
|
||||
[require('markdown-it-container'), 'tip']
|
||||
],
|
||||
preprocess: function(MarkdownIt, source) {
|
||||
MarkdownIt.renderer.rules.table_open = function() {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,13 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f9fafc;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #eaeefb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
|
@ -88,9 +95,23 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 8px 16px;
|
||||
background-color: #ECF8FF;
|
||||
border-radius: 4px;
|
||||
border-left: #50bfff 5px solid;
|
||||
|
||||
code {
|
||||
background-color: rgba(#fff, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo {
|
||||
|
|
|
|||
|
|
@ -190,6 +190,10 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
|
|||
:::
|
||||
|
||||
|
||||
:::tip
|
||||
The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
|
||||
:::
|
||||
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
@ -203,6 +207,6 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
|
|||
| transition | animation name | string | — | `fade-in-linear` |
|
||||
| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| openDelay | delay of appearance, in millisecond | number | — | 0 |
|
||||
| open-delay | delay of appearance, in millisecond | number | — | 0 |
|
||||
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
||||
|
|
|
|||
|
|
@ -177,13 +177,11 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
|
|||
|
||||
除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
|
||||
|
||||
`transition`属性可以定制显隐的动画效果，默认为`fade-in-linear`。
|
||||
|
||||
如果需要关闭`tooltip`功能，`disabled`属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。
|
||||
`transition` 属性可以定制显隐的动画效果，默认为`fade-in-linear`。
|
||||
如果需要关闭 `tooltip` 功能，`disabled` 属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。
|
||||
|
||||
事实上，这是基于 [Vue-popper](https://github.com/element-component/vue-popper) 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。
|
||||
|
||||
当然，Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
|
||||
当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
|
@ -195,6 +193,10 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
|
|||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
tooltip 内不支持 `router-link` 组件，请使用 `vm.$router.push` 代替。
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
|
|
@ -206,7 +208,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
|
|||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||
| transition | 定义渐变动画 | String | — | `fade-in-linear` |
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body', gpuAcceleration: false } |
|
||||
| open-delay | 延迟出现，单位毫秒 | Number | — | 0 |
|
||||
| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
|
||||
| popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
box-sizing: border-box;
|
||||
.content {
|
||||
margin-left: -1px;
|
||||
|
||||
|
||||
> {
|
||||
h3 {
|
||||
margin: 45px 0 15px;
|
||||
|
|
@ -16,7 +16,8 @@
|
|||
color: #5e6d82;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
line-height: 1.5em;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue