popper.js 案例
popper 是什么？
popper 对制作 下拉框 文字提示 弹出框非常有用 且 elementUI 里的组件 很多都依赖了这个工具类
例子1 基本使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <meta charset="UTF-8">
<style type="text/css">
.my-button {
width: 240px;
}
.example {
width: 100%;
-webkit-order: 1;
-ms-order: 1;
order: 1;
position: relative;
min-height: 450px;
background: rgba(0,0,0,0.3);
display: flex;
align-content: center;
align-items: center;
}
.my-button {
width: 30%;
margin: 0 auto;
position: relative;
text-align: center;
padding: 20px;
border-style: dotted;
border-color: white;
border-width: medium;
}
.my-popper {
background: #FFC107;
color: black;
width: 150px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="example">
<div class="my-button">123</div>
<div class="my-popper">666</div>
</div>
<p></p>
<p></p>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.js"></script>
<script type="text/javascript">
function applyReactStyle(data) {
console.log(data)
};
var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
reference,
popper,
{
placement: 'up',
onCreate: (data) => {
console.log(1234)
},
onUpdate: (data) => {
console.log(444)
},
modifiers: {
},
}
);
</script>
</html>
栗子二 拖动时候 popper 自动不出边界
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <meta charset="UTF-8">
<style type="text/css">
.my-button {
width: 240px;
}
.example {
width: 100%;
-webkit-order: 1;
-ms-order: 1;
order: 1;
position: relative;
min-height: 450px;
background: rgba(0,0,0,0.3);
display: flex;
align-content: center;
align-items: center;
}
.my-button {
width: 30%;
margin: 0 auto;
position: absolute;
left: 319px;
text-align: center;
padding: 20px;
border-style: dotted;
border-color: white;
border-width: medium;
}
.my-popper {
background: #FFC107;
color: black;
width: 150px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="example">
<div class="my-button dialog-title" draggable="true" >123</div>
<div class="my-popper">666</div>
</div>
<p></p>
<p></p>
</body>
<script src="./popper.js"></script>
<script type="text/javascript">
function applyReactStyle(data) {
console.log(data)
};
var container = document.querySelector('.example');
var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
reference,
popper,
{
placement: 'left',
onCreate: (data) => {
console.log(1234)
},
onUpdate: (data) => {
console.log(444)
},
modifiers: {
flip: {
behavior: ['left', 'bottom', 'top']
},
preventOverflow: {
boundariesElement: container,
},
},
}
);
var isDialogTitle=false;
var diffX=0;
var diffY=0;
function down(event){
if(event.target.className.indexOf('dialog-title')!=-1){
isDialogTitle = true;
// console.log('event.clientX:',event.clientX)
// console.log('event.clientY:',event.clientY)
// console.log('reference.offsetTop:',reference.offsetTop)
// console.log('reference.offsetLeft:',reference.offsetLeft)
diffX=event.clientX-reference.offsetLeft;
diffY=event.clientY-reference.offsetTop;
console.log(diffX)
console.log(diffY)
}
}
function move(e){
var dialog = reference;
if(isDialogTitle){//只有点击Dialog Title的时候才能拖动
dialog.style.left=(e.clientX-diffX)+'px';
dialog.style.top=(e.clientY-diffY)+'px';
anotherPopper.update()
}
}
function up(e){
isDialogTitle=false;
diffX=0;
diffY=0;
}
document.addEventListener('mousedown',down);
document.addEventListener('mousemove',move);
document.addEventListener('mouseup',up);
</script>
</html>
栗子3 滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <meta charset="UTF-8">
<style type="text/css">
.my-button {
width: 240px;
}
.example {
width: 100%;
-webkit-order: 1;
-ms-order: 1;
order: 1;
position: relative;
min-height: 450px;
height: 200%;
background: rgba(0,0,0,0.3);
display: flex;
align-content: center;
align-items: center;
}
.my-button {
width: 30%;
margin: 0 auto;
position: absolute;
left: 319px;
text-align: center;
padding: 20px;
border-style: dotted;
border-color: white;
border-width: medium;
}
.my-popper {
background: #FFC107;
color: black;
width: 150px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
padding: 10px;
text-align: center;
}
.container {
position: absolute;
overflow: scroll;
overflow-x: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 450px;
}
</style>
</head>
<body>
<div class="container">
<div class="example">
<div class="my-button dialog-title" draggable="true" >123</div>
<div class="my-popper">666</div>
</div>
</div>
</body>
<script src="./popper.js"></script>
<script type="text/javascript">
function applyReactStyle(data) {
console.log(data)
};
var container = document.querySelector('.example');
var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
reference,
popper,
{
placement: 'left',
onCreate: (data) => {
console.log(1234)
},
onUpdate: (data) => {
console.log(444)
},
modifiers: {
},
}
);
var isDialogTitle=false;
var diffX=0;
var diffY=0;
function down(event){
if(event.target.className.indexOf('dialog-title')!=-1){
isDialogTitle = true;
// console.log('event.clientX:',event.clientX)
// console.log('event.clientY:',event.clientY)
// console.log('reference.offsetTop:',reference.offsetTop)
// console.log('reference.offsetLeft:',reference.offsetLeft)
diffX=event.clientX-reference.offsetLeft;
diffY=event.clientY-reference.offsetTop;
console.log(diffX)
console.log(diffY)
}
}
function move(e){
var dialog = reference;
if(isDialogTitle){//只有点击Dialog Title的时候才能拖动
dialog.style.left=(e.clientX-diffX)+'px';
dialog.style.top=(e.clientY-diffY)+'px';
anotherPopper.update()
}
}
function up(e){
isDialogTitle=false;
diffX=0;
diffY=0;
}
document.addEventListener('mousedown',down);
document.addEventListener('mousemove',move);
document.addEventListener('mouseup',up);
</script>
</html>
https://popper.js.org/
https://github.com/FezVrasta/popper.js/
http://www.jianshu.com/p/859a75a98270
