diff --git a/build/cooking.demo.js b/build/cooking.demo.js index 15d0e7b59..96f61c282 100644 --- a/build/cooking.demo.js +++ b/build/cooking.demo.js @@ -90,7 +90,8 @@ cooking.add('vueMarkdown', { } return '\n'; } - }] + }], + [require('markdown-it-container'), 'tip'] ], preprocess: function(MarkdownIt, source) { MarkdownIt.renderer.rules.table_open = function() { diff --git a/examples/app.vue b/examples/app.vue index 04b3dbd34..20ab09dd5 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -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 { diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md index 0404eb48a..0ecf90761 100644 --- a/examples/docs/en-US/tooltip.md +++ b/examples/docs/en-US/tooltip.md @@ -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 | — | — | diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md index b47c266cc..85b67800b 100644 --- a/examples/docs/zh-CN/tooltip.md +++ b/examples/docs/zh-CN/tooltip.md @@ -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 | — | — | diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl index 2339c78fc..f3276f0dd 100644 --- a/examples/pages/template/component.tpl +++ b/examples/pages/template/component.tpl @@ -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; }