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-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>
|
||||||
|
|
|
@ -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 |
|
||||||
|
|
|
@ -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` |
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue