Docs: improve docs (#12208)

examples/docs/en-US/popover.md

@@ -1,21 +1,8 @@
-<style>
-  .demo-box.demo-popover {
-    .el-popover + .el-popover {
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 360px;
-    }
-    .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 <script>
   export default {
     data() {
       return {
+        visible: false,
         visible2: false,
         gridData: [{
           date: '2016-05-02',
@@ -94,6 +81,20 @@
   };
 </script>
 
+<style>
+  .demo-box.demo-popover {
+    .el-popover + .el-popover {
+      margin-left: 10px;
+    }
+    .el-input {
+      width: 360px;
+    }
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
 ## Popover
 
 ### Basic usage
@@ -103,34 +104,55 @@ Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplica
 :::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
-  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>
+<template>
+  <el-popover
+    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
-  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-popover
+    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-popover
-  ref="popover"
-  placement="right"
-  title="Title"
-  width="200"
-  trigger="focus"
-  content="this is content, this is content, this is content">
-</el-popover>
-<el-button v-popover:popover>Focus 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-popover>
+  <el-button v-popover:popover>Focus to activate</el-button>
+
+  <el-popover
+    placement="bottom"
+    title="Title"
+    width="200"
+    trigger="manual"
+    content="this is content, this is content, this is content"
+    v-model="visible">
+    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>
+  </el-popover>
+</template>
 
+<script>
+  export default {
+    data() {
+      return {
+        visible: false
+      };
+    }
+  };
+</script>
 ```
 :::
 

examples/docs/es/popover.md

@@ -1,21 +1,8 @@
-<style>
-  .demo-box.demo-popover {
-    .el-popover + .el-popover {
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 360px;
-    }
-    .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 <script>
   export default {
     data() {
       return {
+        visible: false,
         visible2: false,
         gridData: [{
           date: '2016-05-02',
@@ -94,6 +81,20 @@
   };
 </script>
 
+<style>
+  .demo-box.demo-popover {
+    .el-popover + .el-popover {
+      margin-left: 10px;
+    }
+    .el-input {
+      width: 360px;
+    }
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
 ## Popover
 
 ### Uso básico
@@ -103,33 +104,55 @@ Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para a
 :::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
-  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>
+<template>
+  <el-popover
+    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
-  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-popover
+    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-popover
-  ref="popover"
-  placement="right"
-  title="Title"
-  width="200"
-  trigger="focus"
-  content="this is content, this is content, this is content">
-</el-popover>
-<el-button v-popover:popover>Focus 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-popover>
+  <el-button v-popover:popover>Focus to activate</el-button>
+
+  <el-popover
+    placement="bottom"
+    title="Title"
+    width="200"
+    trigger="manual"
+    content="this is content, this is content, this is content"
+    v-model="visible">
+    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>
+  </el-popover>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: false
+      };
+    }
+  };
+</script>
 ```
 :::
 

examples/docs/zh-CN/popover.md

@@ -2,6 +2,7 @@
   export default {
     data() {
       return {
+        visible: false,
         visible2: false,
         gridData: [{
           date: '2016-05-02',
@@ -101,34 +102,55 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 
 :::demo `trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法：使用 `slot="reference"` 的具名插槽，或使用自定义指令`v-popover`指向 Popover 的索引`ref`。
 ```html
-<el-popover
-  placement="top-start"
-  title="标题"
-  width="200"
-  trigger="hover"
-  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
-  <el-button slot="reference">hover 激活</el-button>
-</el-popover>
+<template>
+  <el-popover
+    placement="top-start"
+    title="标题"
+    width="200"
+    trigger="hover"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+    <el-button slot="reference">hover 激活</el-button>
+  </el-popover>
 
-<el-popover
-  placement="bottom"
-  title="标题"
-  width="200"
-  trigger="click"
-  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
-  <el-button slot="reference">click 激活</el-button>
-</el-popover>
+  <el-popover
+    placement="bottom"
+    title="标题"
+    width="200"
+    trigger="click"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+    <el-button slot="reference">click 激活</el-button>
+  </el-popover>
 
-<el-popover
-  ref="popover"
-  placement="right"
-  title="标题"
-  width="200"
-  trigger="focus"
-  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
-</el-popover>
-<el-button v-popover:popover>focus 激活</el-button>
+  <el-popover
+    ref="popover"
+    placement="right"
+    title="标题"
+    width="200"
+    trigger="focus"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+  </el-popover>
+  <el-button v-popover:popover>focus 激活</el-button>
+
+  <el-popover
+    placement="bottom"
+    title="标题"
+    width="200"
+    trigger="manual"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
+    v-model="visible">
+    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
+  </el-popover>
+</template>
 
+<script>
+  export default {
+    data() {
+      return {
+        visible: false
+      };
+    }
+  };
+</script>
 ```
 :::