vue做一个动态活动的弹框，可以在当前屏幕滑动到任何位置

打开时

 关闭时

<template>
    <div id="rec" @mousedown="drag($event)" @click="showList" ref="rec" class="addClass" style="position:fixed;right: 100px;top: 100px; width: 80px;height: 54px; border-radius:5px;padding:10px;background: rgba(100,100,100,0.2); z-index:999">
        <div id="ddlists" class="addlist delList">
             <el-select  v-model="channels" ref="changRle"  @change="changeRule" size="small"  placeholder="请选择数据规则">
            <!-- <el-option
            v-for="item in channelList"
            :key="item.ruleId"
            :label="item.ruleInfo"
            :value="item.ruleId">
            </el-option> -->
            <el-option
                v-for="item in channelLists"
                :key="item.ruleNo"
                :label="item.ruleInfo"
                :value="item.ruleNo">
                </el-option>
            </el-select> 
        </div>
        
        <!-- <i v-else class="el-icon-plus"></i> -->
        <div class="add" @click="showList">数据权限</div>
        <!-- <div v-else style="position:relative;font-size:10px;">
            <span style="position:absolute;left:20px;top:0px;">数</span>
            <span style="position:absolute;top:20px;rigth:0px;">据</span>
            <span style="position:absolute;left:20px;bottom:0px;">全</span>
            <span style="position:absolute;left:0;top:20px;">限</span>
        </div> -->
        
    </div>
    
    
</template>

<script>

//  //获取div元素
 let rec = document.getElementById("rec");
 let down = false;
 let dx = 0;
 let dy = 0;
 let sx = 0;
 let sy = 0;
 let c=0
 let d=0
//  import './dadaRule'
 document.onmousemove = function(e){
  
     if (down) {
         let ev = e || event;
         let rec = document.getElementById("rec");
         let m=window.innerHeight;
        let n=window.innerWidth;
        let s=parseFloat(rec.style.width);
        let t=parseFloat(rec.style.height);
        c=dx - ( ev.clientX - sx)
        d=ev.clientY - (dy - sy)
        if(c<=0){
            c=0;
        }else if(c>=n-s){
            c=n-s
        }
        if(d<=0){
            d=0
        }else if(d>=m-t){
            d=m-t
        }
         rec.style.top = d  + 'px';
        rec.style.right = c + 'px';
     }
 };
 document.onmouseup = function(){
     if (down) {
         down = false;
     }
 }
    export default {
        
        name: 'changeDataRule',
        props: [
           'channelList',
           'channel',
        ],
        watch:{
           'channel'(n,o){
               if(n){
                   this.channels=n
               }
           },
           routerPAth(n,o){

           },
        },
        data() {
             var vue = this;
            return {
               channelLists:this.channelList,
               channels:this.channel,
               routerPAth:'',
               id:'',
               dataShows:false,
            }
        },
        created(){
            // window.onload = function(){
                 document.onclick = function(event){
                    let rec = document.getElementById("rec");
                    let list=event.target.className.split(' ')
                if(event.target.className!='addClass'&&event.target.className!='addlist'&&rec.children[0].className=='addlist'&&!list.includes('add')){
                        rec.children[0].classList.add('delList')
                        rec.children[1].classList.remove('delList')
                        rec.style.width=80+'px'
                }
               
            }
            // }
           
        },
        mounted(){
           
            this.init();
           
        },
        methods: {
            drag(e){
                let event = e || event;
                dx = event.clientX;
                dy = event.clientY;
                sx = parseInt(this.$refs.rec.style.right);
                sy = parseInt(this.$refs.rec.style.top);
                if (!down) {
                    down  = true;
                }
            },
           
            showList(){
                this.dataShows=!this.dataShows
                let rec = document.getElementById("rec");
                rec.children[0].classList.remove('delList')
                 rec.children[1].classList.add('delList')
                 this.$refs.rec.style.width=300+'px'
            },
            init(){
           
               
            },
            //获取当前资源的数据权限
            getChannelLists(id){
               
            },
            changeRule(val){
                //把当前资源的选择的数据规则传递给父组件
               this.$emit('sendMsg',{channelList:this.channelLists,channel:val})
            },
            //获取资源id
            searchID(list){
              
            },
            //验证是否有传值，获取所有传值信息
            regData(str){
                let list =str.split('&')
                let lists=[]
                list.filter(item=>{
                    lists.push(item.split("=")[0])
                })
                return lists
            }
            
            
        },

    }
</script>
<style scoped lang="scss">
.addClass{
    // vertical-align: center;
    // display: inline-block;
    line-height: 34px;
    text-align: center;
}
.list{
    display: block;
}
.addlist{
    display: block;
}
.add{
    display: block;
    line-height: 34px;
    text-align: center;
}
.delList{
    display:none;
}
</style>

 1.在vue.js中不可直接操作display属性，必须放在class属性中，在一个class属性中写display:none,在另一个class中填写display:block

2.注意点击非当前元素的设置