Dropdown add transfer prop
But not support Nested Usage
This commit is contained in:
parent
fcf3cace8e
commit
3e4bab9655
3 changed files with 56 additions and 68 deletions
|
@ -6,20 +6,27 @@
|
|||
@mouseleave="handleMouseleave">
|
||||
<div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
|
||||
<transition :name="transition">
|
||||
<Drop v-show="currentVisible" :placement="placement" ref="drop"><slot name="list"></slot></Drop>
|
||||
<Drop
|
||||
v-show="currentVisible"
|
||||
:placement="placement"
|
||||
ref="drop"
|
||||
@mouseenter.native="handleMouseenter"
|
||||
@mouseleave.native="handleMouseleave"
|
||||
v-transfer-dom:forbidden="transfer"><slot name="list"></slot></Drop>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import TransferDom from '../../directives/transfer-dom';
|
||||
import { oneOf, findComponentUpward } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-dropdown';
|
||||
|
||||
export default {
|
||||
name: 'Dropdown',
|
||||
directives: { clickoutside },
|
||||
directives: { clickoutside, TransferDom },
|
||||
components: { Drop },
|
||||
props: {
|
||||
trigger: {
|
||||
|
@ -37,6 +44,10 @@
|
|||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transfer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -76,7 +87,7 @@
|
|||
if (this.trigger !== 'hover') {
|
||||
return false;
|
||||
}
|
||||
clearTimeout(this.timeout);
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.currentVisible = true;
|
||||
}, 250);
|
||||
|
@ -86,10 +97,12 @@
|
|||
if (this.trigger !== 'hover') {
|
||||
return false;
|
||||
}
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.currentVisible = false;
|
||||
}, 150);
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.currentVisible = false;
|
||||
}, 150);
|
||||
}
|
||||
},
|
||||
handleClose () {
|
||||
if (this.trigger === 'custom') return false;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue