Poptip、Tooltip add on-popper-hide event

Poptip、Tooltip add on-popper-hide event
This commit is contained in:
梁灏 2016-11-29 08:58:10 +08:00
parent 99f80db0be
commit 7f1edb6a15
3 changed files with 18 additions and 5 deletions

View file

@ -43,7 +43,12 @@ export default {
} }
}, },
visible(val) { visible(val) {
val ? this.updatePopper() : this.destroyPopper(); if (val) {
this.updatePopper();
} else {
this.destroyPopper();
this.$emit('on-popper-hide');
}
this.$emit('input', val); this.$emit('input', val);
} }
}, },

View file

@ -132,7 +132,7 @@
<!--<Poptip title="标题" content="内容" trigger="hover">--> <!--<Poptip title="标题" content="内容" trigger="hover">-->
<!--<Button>hover 触发</Button>--> <!--<Button>hover 触发</Button>-->
<!--</Poptip>--> <!--</Poptip>-->
<Poptip title="确定删除这条信息吗?" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel"> <Poptip title="确定删除这条信息吗?" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel" @on-popper-hide="hide">
<a><strong>Delete</strong></a> <a><strong>Delete</strong></a>
</Poptip> </Poptip>
<!--<Poptip title="标题" content="内容" trigger="focus">--> <!--<Poptip title="标题" content="内容" trigger="focus">-->
@ -174,6 +174,9 @@
}, },
cancel () { cancel () {
Message.info('cancel'); Message.info('cancel');
},
hide () {
Message.info('hide')
} }
} }
} }

View file

@ -16,7 +16,7 @@
</style> </style>
<template> <template>
<div class="top"> <div class="top">
<Tooltip content="Top Left 文字提示" placement="top-start"> <Tooltip content="Top Left 文字提示" placement="top-start" @on-popper-hide="hide">
<i-button>上左</i-button> <i-button>上左</i-button>
</Tooltip> </Tooltip>
<Tooltip content="Top Center 文字提示" placement="top"> <Tooltip content="Top Center 文字提示" placement="top">
@ -63,8 +63,13 @@
</div> </div>
</template> </template>
<script> <script>
import { Tooltip, iButton } from 'iview'; import { Tooltip, iButton, Message } from 'iview';
export default { export default {
components: { Tooltip, iButton } components: { Tooltip, iButton },
methods: {
hide () {
Message.info('hide')
}
}
} }
</script> </script>