Docs: update popover and table (#10910)

56cbdef9 · 杨奕 · GitHub · 8b379a57 · 56cbdef9 · 56cbdef9
Commit 56cbdef9 authored Apr 27, 2018 by 杨奕 Committed by GitHub Apr 27, 2018
6 changed files
--- a/examples/docs/en-US/popover.md
+++ b/examples/docs/en-US/popover.md
@@ -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() {

--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -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>

--- a/examples/docs/es/popover.md
+++ b/examples/docs/es/popover.md
@@ -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() {

--- a/examples/docs/es/table.md
+++ b/examples/docs/es/table.md
@@ -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>

--- a/examples/docs/zh-CN/popover.md
+++ b/examples/docs/zh-CN/popover.md
@@ -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() {

--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -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>