update popper animation
This commit is contained in:
huanghong
parent
eed5708494
commit
dab9c3f601
4 changed files with 359 additions and 18 deletions
|
|
@ -1,17 +1,353 @@
|
||||||
<template>
|
<template>
|
||||||
<Dropdown trigger="click" style="margin-left: 20px">
|
<div>
|
||||||
<a href="javascript:void(0)">
|
<div>
|
||||||
click 触发
|
<Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
|
||||||
<Icon type="arrow-down-b"></Icon>
|
<a href="javascript:void(0)">
|
||||||
</a>
|
right-start
|
||||||
<DropdownMenu slot="list">
|
<Icon type="arrow-down-b"></Icon>
|
||||||
<DropdownItem>驴打滚</DropdownItem>
|
</a>
|
||||||
<DropdownItem>炸酱面</DropdownItem>
|
<DropdownMenu slot="list">
|
||||||
<DropdownItem>豆汁儿</DropdownItem>
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
<DropdownItem>北京烤鸭</DropdownItem>
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
</DropdownMenu>
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
</Dropdown>
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
right-end
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
bottom-start
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
bottom-end
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
top-start
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
top-end
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
left-start
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
left-end
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="top" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
top
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
bottom
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="left" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
left
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="right" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
right
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
<br><br><br><br>
|
||||||
|
<div style='width:600px;height:100px;overflow: auto;border:1px solid'>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
right-start
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
right-end
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
bottom-start
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
bottom-end
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
top-start
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
top-end
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
left-start
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
left-end
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="top" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
top
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
bottom
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="left" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
left
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown trigger="click" style="margin-left: 20px" placement="right" >
|
||||||
|
<a href="javascript:void(0)">
|
||||||
|
right
|
||||||
|
<Icon type="arrow-down-b"></Icon>
|
||||||
|
</a>
|
||||||
|
<DropdownMenu slot="list">
|
||||||
|
<DropdownItem>驴打滚</DropdownItem>
|
||||||
|
<DropdownItem>炸酱面</DropdownItem>
|
||||||
|
<DropdownItem>豆汁儿</DropdownItem>
|
||||||
|
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||||
|
<DropdownItem>北京烤鸭</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div style="margin: 200px">
|
<div style="margin: 200px">
|
||||||
<Tabs value="name1">
|
<Tabs value="name1">
|
||||||
<TabPane label="标签一" name="name1">
|
<TabPane label="标签一" name="name1">
|
||||||
<div style="width: 200px;height:300px">
|
<div style="width: 200px;height:300px;overflow: auto;">
|
||||||
<Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
|
<Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
|
||||||
<Button id="aaa">左边</Button>
|
<Button id="aaa">左边</Button>
|
||||||
</Poptip>
|
</Poptip>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ export default {
|
||||||
gpuAcceleration: false,
|
gpuAcceleration: false,
|
||||||
},
|
},
|
||||||
preventOverflow :{
|
preventOverflow :{
|
||||||
boundariesElement: 'body'
|
boundariesElement: 'viewport'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
gpuAcceleration: false
|
gpuAcceleration: false
|
||||||
},
|
},
|
||||||
preventOverflow :{
|
preventOverflow :{
|
||||||
boundariesElement: 'body'
|
boundariesElement: 'viewport'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onCreate:()=>{
|
onCreate:()=>{
|
||||||
|
|
@ -79,8 +79,13 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
resetTransformOrigin() {
|
resetTransformOrigin() {
|
||||||
let placement = this.popper.popper.getAttribute('x-placement').split('-')[0];
|
let x_placement = this.popper.popper.getAttribute('x-placement');
|
||||||
this.popper.popper.style.transformOrigin = placement==='bottom'?'center top':'center bottom';
|
let placementStart = x_placement.split('-')[0];
|
||||||
|
let placementEnd = x_placement.split('-')[1];
|
||||||
|
const leftOrRight = x_placement === 'left' || x_placement === 'right';
|
||||||
|
if(!leftOrRight){
|
||||||
|
this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue