Popover: fix visible

pull/2/head
qingwei.li 2016-09-02 19:32:17 +08:00
parent 3a6e663857
commit b808879ddb
4 changed files with 9 additions and 7 deletions

View File

@ -162,10 +162,10 @@ Dialog 组件的正文标题可以是任意的,甚至可以是表格或表单
<el-dialog title="收货地址" v-model="dialogFormVisible"> <el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form"> <el-form :models="form">
<el-form-item label="活动名称" :label-width="formLabelWidth"> <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>
<el-form-item label="活动区域" :label-width="formLabelWidth"> <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="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>

View File

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

View File

@ -167,7 +167,7 @@ Tooltip 组件提供了两个不同的主题:`dark`和`light`。
| effect | 默认提供的主题 | String | `dark`, `light` | dark | | effect | 默认提供的主题 | String | `dark`, `light` | dark |
| content | 显示的内容,也可以通过 `slot#content` 传入 DOM | String | — | — | | 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 | | 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 | | disabled | Tooltip 是否可用 | Boolean | — | false |
| offset | 出现位置的偏移量 | Number | — | 0 | | offset | 出现位置的偏移量 | Number | — | 0 |
| transition | 定义渐变动画 | String | — | `fade-in-linear` | | transition | 定义渐变动画 | String | — | `fade-in-linear` |

View File

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