mirror of https://github.com/ElemeFE/element
Popover: fix visible
parent
3a6e663857
commit
b808879ddb
|
@ -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>
|
||||
|
|
|
@ -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 |
|
||||
|
|
|
@ -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` |
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue