• 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 {
                240px;
           }
            .example {
                 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 {
                 30%;
                margin: 0 auto;
                position: relative;
                text-align: center;
                padding: 20px;
                border-style: dotted;
                border-color: white;
                border- medium;
            }
            .my-popper {
                background: #FFC107;
                color: black;
                 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 {
                240px;
           }
            .example {
                 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 {
                 30%;
                margin: 0 auto;
                position: absolute;
                left: 319px;
                text-align: center;
                padding: 20px;
                border-style: dotted;
                border-color: white;
                border- medium;
            }
            .my-popper {
                background: #FFC107;
                color: black;
                 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 {
                240px;
           }
            .example {
                 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 {
                 30%;
                margin: 0 auto;
                position: absolute;
                left: 319px;
                text-align: center;
                padding: 20px;
                border-style: dotted;
                border-color: white;
                border- medium;
            }
            .my-popper {
                background: #FFC107;
                color: black;
                 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

  • 相关阅读:
    可重入锁 RLOCK(转)
    python 全局变量的简单理解
    urlopen设置代理方法
    python is id == 的差别,cmp方法
    FutureTask
    Java基础复习
    计算机编程底层基础
    Microsoft.NET框架程序设计20 CLR寄宿、应用程序域、反射
    Microsoft.NET框架程序设计19 自动内存管理(垃圾收集)
    Microsoft.NET框架程序设计17 委托
  • 原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7739267.html
Copyright © 2020-2023  润新知