docs_vue2/one/docs/demo/directives/outside/hover-with-delay.vue

63 lines
883 B
Vue
Raw Normal View History

2020-08-13 11:47:56 +08:00
<template>
<article>
<div
v-outside:box2,box3.hover.1000="handleOutside"
class="box1"
>
目标元素 C
</div>
<div
ref="box2"
class="box2"
>
目标元素 D
</div>
<div
ref="box3"
class="box3"
>
目标元素 E
</div>
</article>
</template>
<script>
2021-09-16 19:23:58 +08:00
import { outside, toast } from 'veui'
2020-08-13 11:47:56 +08:00
export default {
directives: {
outside
},
data () {
return {
consoleVisible: false,
timer: null
}
},
methods: {
handleOutside () {
toast.info('在 1000ms 内未移回目标元素 C、D、E触发外部事件。')
}
}
}
</script>
2021-09-15 20:03:51 +08:00
<style lang="less" scoped>
2020-08-13 11:47:56 +08:00
.box1,
.box2,
.box3 {
2021-09-15 20:03:51 +08:00
width: 200px;
height: 100px;
background: #f7f7f7;
2020-08-13 11:47:56 +08:00
margin-right: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
article {
margin: -30px;
padding: 30px;
}
</style>