mirror of https://github.com/ElemeFE/element
Docs: update popover and table (#10910)
杨奕
GitHub
parent
8b379a57df
commit
56cbdef95b
|
|
@ -100,37 +100,37 @@
|
|||
|
||||
Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
|
||||
|
||||
:::demo Add `ref` in your popover, then in your button, use `v-popover` directive to link the button and the popover. The attribute `trigger` is used to define how popover is triggered: `hover`, `click` or `focus`. Alternatively, you can specify reference using a named `slot`.
|
||||
:::demo The `trigger` attribute is used to define how popover is triggered: `hover`, `click`, `focus` or `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` named slot, or use the `v-popover` directive and set it to Popover's `ref`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover1"
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Hover to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover2"
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Click to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>Hover to activate</el-button>
|
||||
<el-button v-popover:popover2>Click to activate</el-button>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Focus to activate</el-button>
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>Focus to activate</el-button>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -142,7 +142,6 @@ Other components can be nested in popover. Following is an example of nested tab
|
|||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover4"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
|
|
@ -151,10 +150,9 @@ Other components can be nested in popover. Following is an example of nested tab
|
|||
<el-table-column width="100" property="name" label="name"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="address"></el-table-column>
|
||||
</el-table>
|
||||
<el-button slot="reference">Click to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>Click to activate</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -190,7 +188,6 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
|||
:::demo
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
|
|
@ -199,10 +196,9 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
|||
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>Delete</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1369,7 +1369,7 @@ Filter the table to find desired data.
|
|||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.tag === 'Home' ? 'primary' : 'success'"
|
||||
close-transition>{{scope.row.tag}}</el-tag>
|
||||
disable-transitions>{{scope.row.tag}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
|
|||
|
|
@ -100,37 +100,36 @@
|
|||
|
||||
Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
|
||||
|
||||
:::demo Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternativa puede especificar la referencia utilizando un [slot con nombre](https://vuejs.org/v2/guide/components.html#Named-Slots).
|
||||
:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` [named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), or use the `v-popover` directive and set it to Popover's `ref`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover1"
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Hover to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover2"
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Click to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>Hover to activate</el-button>
|
||||
<el-button v-popover:popover2>Click to activate</el-button>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Focus to activate</el-button>
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>Focus to activate</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -141,7 +140,6 @@ Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo
|
|||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover4"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
|
|
@ -150,10 +148,9 @@ Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo
|
|||
<el-table-column width="100" property="name" label="name"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="address"></el-table-column>
|
||||
</el-table>
|
||||
<el-button slot="reference">Click to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>Click to activate</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -189,7 +186,6 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
|
|||
:::demo
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
|
|
@ -198,10 +194,9 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
|
|||
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>Delete</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1367,7 +1367,7 @@ Filtra la tabla para encontrar la información que necesita.
|
|||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.tag === 'Home' ? 'primary' : 'success'"
|
||||
close-transition>{{scope.row.tag}}</el-tag>
|
||||
disable-transitions>{{scope.row.tag}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
|
|||
|
|
@ -99,36 +99,36 @@
|
|||
### 基础用法
|
||||
Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
|
||||
|
||||
:::demo 设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`。第二种用法通过 `slot` 指定 reference。
|
||||
:::demo `trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法：使用 `slot="reference"` 的具名插槽，或使用自定义指令`v-popover`指向 Popover 的索引`ref`。
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover1"
|
||||
placement="top-start"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">hover 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover2"
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>hover 激活</el-button>
|
||||
<el-button v-popover:popover2>click 激活</el-button>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">focus 激活</el-button>
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>focus 激活</el-button>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -139,7 +139,6 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
:::demo 利用分发取代`content`属性
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover4"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
|
|
@ -148,10 +147,9 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
<el-table-column width="100" property="name" label="姓名"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>click 激活</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -187,7 +185,6 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
:::demo
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
|
|
@ -196,10 +193,9 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>删除</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1408,7 +1408,7 @@
|
|||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.tag === '家' ? 'primary' : 'success'"
|
||||
close-transition>{{scope.row.tag}}</el-tag>
|
||||
disable-transitions>{{scope.row.tag}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
|
|||
Loading…
Reference in New Issue