Procházet zdrojové kódy

Popover: fix visible

qingwei.li před 9 roky
rodič
revize
b808879ddb

+ 2 - 2
examples/docs/dialog.md

@@ -162,10 +162,10 @@ Dialog 组件的正文标题可以是任意的,甚至可以是表格或表单
 <el-dialog title="收货地址" v-model="dialogFormVisible">
   <el-form :models="form">
     <el-form-item label="活动名称" :label-width="formLabelWidth">
-      <el-input :model.sync="form.name" auto-complete="off"></el-input>
+      <el-input v-model="form.name" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="活动区域" :label-width="formLabelWidth">
-      <el-select :value.sync="form.region" placeholder="请选择活动区域">
+      <el-select v-model="form.region" placeholder="请选择活动区域">
         <el-option label="区域一" value="shanghai"></el-option>
         <el-option label="区域二" value="beijing"></el-option>
       </el-select>

+ 2 - 2
examples/docs/popover.md

@@ -185,7 +185,7 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
   ref="popover5"
   placement="top"
   width="160"
-  :visible="visible2">
+  v-model="visible2">
   <p>这是一段内容这是一段内容确定删除吗?</p>
   <div style="text-align: right; margin: 0">
     <el-button size="mini" type="text" @click.native="visible2 = false">取消</el-button>
@@ -205,7 +205,7 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
 |  content        |  显示的内容,也可以通过 `slot` 传入 DOM   | String            | — | — |
 |  width        |  宽度  | String, Number            | — | 最小宽度 150px |
 |  placement        |  出现位置  | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
-|  visible        |  初始状态是否可见  | Boolean           | — |  false |
+|  value(v-model)        |  状态是否可见  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | fade-in-linear |
 |  visible-arrow   |  是否显示 Tooltip 箭头,更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |

+ 1 - 1
examples/docs/tooltip.md

@@ -167,7 +167,7 @@ Tooltip 组件提供了两个不同的主题:`dark`和`light`。
 |  effect        |  默认提供的主题  | String            | `dark`, `light`  | dark  |
 |  content        |  显示的内容,也可以通过 `slot#content` 传入 DOM  | String            | — | — |
 |  placement        |  Tooltip 的出现位置  | String           |  `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` |  bottom |
-|  visible        |  初始状态是否可见  | Boolean           | — |  false |
+|  value(v-model)        |  状态是否可见  | Boolean           | — |  false |
 |  disabled       |  Tooltip 是否可用  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | `fade-in-linear` |

+ 4 - 2
src/utils/vue-popper.js

@@ -23,7 +23,7 @@ export default {
     offset: {
       default: 0
     },
-    visible: Boolean,
+    value: Boolean,
     visibleArrow: Boolean,
     transition: String,
     options: {
@@ -41,15 +41,17 @@ export default {
   },
 
   watch: {
-    visible: {
+    value: {
       immediate: true,
       handler(val) {
         this.showPopper = val;
+        this.$emit('input', val);
       }
     },
 
     showPopper(val) {
       val ? this.updatePopper() : this.destroyPopper();
+      this.$emit('input', val);
     }
   },