实现方式1：方法直接挂在mounted中<template><div><divclass="add_card"ref="dialog_card"><divclass="content_1"ref="dialog_header">可拖拽区域</div><div>不可拖拽区域</div></div></div></template><script>exportdefault{name:"custom-clone",mounted(){this.dialogMove();},methods:{dialogMove(){constiframeBox=this.$refs.dialog_card;constiframeHeader=this.$refs.dialog_header;console.log(iframeBox,"dialog_card============");console.log(iframeHeader,"iframeHeader============");iframeHeader.onmousedown=function(ev){//用元素距离视窗的X、Y坐标，减去el元素最近的相对定位父元素的left、top值varsX=ev.clientX-iframeBox.offsetLeft;varsY=ev.clientY-iframeBox.offsetTop;//不断地更新元素的left、top值document.onmousemove=function(ev){iframeBox.style.left=ev.clientX-sX+"px";iframeBox.style.top=ev.clientY-sY+"px";};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;};};},},};</script><stylelang="less"scoped>.add_card{width:400px;height:500px;border:1pxsolid#eff7ff;background-color:#eff7ff;position:absolute;right:0;top:0;cursor:move;z-index:3000;.content_1{height:100px;line-height:100px;background-color:#0780ed;}}</style>实现方式2：自定义指令v-dragdrag-min-top设置拖拽上边界，防止拖出可视区域<template><div><divclass="add_card"ref="dialog_card"><divclass="content_1"v-dragdrag-min-top="50"ref="dialog_header">可拖拽区域drag</div><div>不可拖拽区域</div></div></div></template><script>exportdefault{name:"custom-clone",mounted(){//this.dialogMove();},directives:{drag:{inserted:function(el){constoDiv=el;//当前元素constminTop=oDiv.getAttribute("drag-min-top");constifMoveSizeArea=20;oDiv.onmousedown=(e)=>{lettarget=oDiv;while(window.getComputedStyle(target).position!=="absolute"&&target!==document.body){target=target.parentElement;}document.onselectstart=()=>{returnfalse;};if(!target.getAttribute("init_x")){target.setAttribute("init_x",target.offsetLeft);target.setAttribute("init_y",target.offsetTop);}constinitX=parseInt(target.getAttribute("init_x"));constinitY=parseInt(target.getAttribute("init_y"));//鼠标按下，计算当前元素距离可视区的距离constdisX=e.clientX-target.offsetLeft;constdisY=e.clientY-target.offsetTop;document.onmousemove=(e)=>{//通过事件委托，计算移动的距离//因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值constl=e.clientX-disX;constt=e.clientY-disY;//计算移动当前元素的位置，并且给该元素样式中的left和top值赋值target.style.left=l+"px";target.style.top=(t<minTop?minTop:t)+"px";if(Math.abs(l-initX)>ifMoveSizeArea||Math.abs(t-initY)>ifMoveSizeArea){target.setAttribute("dragged","");}else{target.removeAttribute("dragged");}};document.onmouseup=(e)=>{document.onmousemove=null;document.onmouseup=null;document.onselectstart=null;};//returnfalse不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效returnfalse;};},},},};</script><stylelang="less"scoped>.add_card{width:400px;height:500px;border:1pxsolid#eff7ff;background-color:#eff7ff;position:absolute;right:0;top:0;cursor:move;z-index:3000;.content_1{height:100px;line-height:100px;background-color:#0780ed;}}</style>全局注册方法1.新建drag.jsimportVuefrom"vue"constdrag=Vue.directive('drag',(el)=>{constoDiv=el//当前元素constminTop=oDiv.getAttribute('drag-min-top')constifMoveSizeArea=20oDiv.onmousedown=e=>{lettarget=oDivwhile(window.getComputedStyle(target).position!=='absolute'&&target!==document.body){target=target.parentElement}document.onselectstart=()=>{returnfalse}if(!target.getAttribute('init_x')){target.setAttribute('init_x',target.offsetLeft)target.setAttribute('init_y',target.offsetTop)}constinitX=parseInt(target.getAttribute('init_x'))constinitY=parseInt(target.getAttribute('init_y'))//鼠标按下，计算当前元素距离可视区的距离constdisX=e.clientX-target.offsetLeftconstdisY=e.clientY-target.offsetTopdocument.onmousemove=e=>{//通过事件委托，计算移动的距离//因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值constl=e.clientX-disXconstt=e.clientY-disY//计算移动当前元素的位置，并且给该元素样式中的left和top值赋值target.style.left=l+'px'target.style.top=(t<minTop?minTop:t)+'px'if(Math.abs(l-initX)>ifMoveSizeArea||Math.abs(t-initY)>ifMoveSizeArea){target.setAttribute('dragged','')}else{target.removeAttribute('dragged')}}document.onmouseup=e=>{document.onmousemove=nulldocument.onmouseup=nulldocument.onselectstart=null}//returnfalse不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效returnfalse}})export{drag}2.在入口index.js引入注册import{drag}from"@/components/module/OPSScheduleManagement/src/components/common/drag"Vue.prototype.$drag=drag3.使用<template><div><divclass="add_card"ref="dialog_card"><divclass="content_1"v-dragdrag-min-top="50"ref="dialog_header">可拖拽区域drag</div><div>不可拖拽区域</div></div></div></template>仓库代码地址：容器拖拽
A.分页组件1---pagination.vue<template><el-paginationclass="pagination":current-page="pageNum":page-sizes="[10,20,30]":page-size="pageSize"layout="total,sizes,prev,pager,next,jumper":total="total":pager-count="5"prev-text="上一页"next-text="下一页"backgroundv-bind="$attrs"v-on="$listeners"></el-pagination></template><script>exportdefault{name:'Pagination',props:{pageNum:{type:Number,default:1,},pageSize:{type:Number,default:10,},total:{type:Number,default:0,},},}</script><stylelang="less"scoped>.pagination{position:relative;padding:12px0;display:flex;justify-content:flex-end;align-items:center;&::before{order:3;flex-grow:1;}}::v-deep{.el-pagination__total{order:1;}.el-pagination__sizes{order:1;}.el-pager{order:5;}.el-pager.number{border-radius:14px!important;//width:28px!important;min-width:28px!important;height:28px!important;}.el-pagerli.btn-quicknext,.el-pagerli.btn-quickprev{border-radius:14px!important;}.el-pagination__jump{order:5;}.btn-prev{order:5;border-radius:14px!important;padding:012px08px!important;display:flex;align-items:center;&::before{content:'\e6de';font-family:element-icons!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;margin-right:10px;}}.btn-next{order:5;display:flex;align-items:center;border-radius:14px!important;padding:08px012px!important;&::after{font-family:element-icons!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;content:'\e6e0';margin-left:10px;}}}</style>A.分页组件1---pagination组件使用importpaginationfrom'.....'<paginationv-if="pageState":pageNum="pageNum":pageSize="pageSize":total="totalNum"@current-change="onPageChange"@size-change="onSizeChange"></pagination>onPageChange(num){this.pageNum=numthis.刷新列表请求函数()},onSizeChange(size){this.pageSize=sizethis.pageNum=1this.刷新列表请求函数()},刷新列表请求函数(){}.then((res)=>{this.pageNum=res.pageNumthis.pageSize=res.pageSizethis.totalNum=res.total})B.小型分页组件2--pagination.vue<template><el-paginationclass="pagination"small:pager-count="5"@current-change="handleCurrentChange":current-page="pageNum":page-size="pageSize"layout="prev,pager,next":total="total"></el-pagination></template><script>exportdefault{name:'Pagination',props:{pageNum:{type:Number,default:1,},pageSize:{type:Number,default:10,},total:{type:Number,default:0,},},methods:{handleCurrentChange(val){this.$emit('current-page',val)},},}</script><stylelang="less"scoped>.pagination{::v-deep{button{width:0px!important;}.btn-prev{padding-right:0px;}.btn-next{padding-left:0px;}}}</style>B.分页组件2--pagination组件使用<pagination:pageNum="pageNum":pageSize="pageSize":total="total"@current-page="onPageChange"></pagination>onPageChange(num){this.pageNum=num;this.刷新列表请求函数()},刷新列表请求函数(){}.then((res)=>{this.pageNum=res.pageNumthis.pageSize=res.pageSizethis.totalNum=res.total})
1.远程搜索功能:remote-method远程搜索，remoteMethod函数<!--el-select地点位置搜索框--><el-selectv-model="searchValue"class="search-ipt"size="mini"filterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteMethod":loading="loading"><el-optionv-for="iteminoptions":key="item.id":label="item.name":value="item.id"></el-option></el-select>1.1地图初始化initMap()在mounted中触发//地图初始化initMap(){letthat=this;//loadMap()函数需要从单独的异步加载js文件引入loadMap().then((AMap)=>{that.theMap=newAMap.Map(this.$refs.amap,{center:newAMap.LngLat(116.297,39.948),//设置中心点zoom:10,//地图放大倍数resizeEnable:true,});that.geoCoder=newAMap.Geocoder();that.handlerMapClick();});},loadMap.js/***动态加载高德地图**@export*@param{*}key高德地图key*@param{*}plugins高德地图插件*@param{string}[v='1.4.14']高德地图版本*@returns*/exportdefaultfunctionloadMap(){constscript=document.createElement('script')script.type='text/javascript'script.appendChild(document.createTextNode(`window._AMapSecurityConfig={securityJsCode:'这里需要放高德地图密钥',}`))document.body.appendChild(script)returnnewPromise(function(resolve,reject){//如果有map引入，需要删除，因为这里需要引入另外的key来做地图主题定制，需要删除if(typeofwindow.AMap!=='undefined'){constarr=document.getElementsByTagName('script')for(leti=0;i<arr.length;i++){if(arr[i].src.indexOf('https://webapi.amap.com/maps')!==-1){arr[i].remove()}}//eslint-disable-next-lineno-undef//resolve(window.AMap)//returntrue}window.onCallback=function(){//eslint-disable-next-lineno-undefresolve(window.AMap)}constkey='ee523081c32f694f28e901ea5078b5cb'constplugins=['AMap.OverView','AMap.MouseTool','AMap.PolyEditor','AMap.RectangleEditor','AMap.PlaceSearch','AMap.DistrictLayer','AMap.CustomLayer','AMap.DistrictSearch','AMap.Geocoder','AMap.AutoComplete']constv='2.0'constscript=document.createElement('script')script.type='text/javascript'script.src=`https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins.join(',')}&callback=onCallback`script.onerror=rejectdocument.head.appendChild(script)})}1.2remoteMethod高德地图远程检索数据//data(){//return{//theMap:null,//options:[],//searchValue:"",//chooseList:[],//loading:false,//markers:[],//marker:[],//markersPosition:[],//geoCoder:null,//clickInfo:[],//};//},//下拉选项获取----搜索成功返回对应的地点数据remoteMethod(query){const_this=this;console.log("query",query);if(query!==""){_this.loading=true;//高德地图获取检索数据window.AMap.plugin("AMap.AutoComplete",function(){constautoComplete=newwindow.AMap.Autocomplete({city:"全国",});//console.log(query,'this.searchValue')autoComplete.search(query,function(status,result){//搜索成功时，result即是对应的匹配数据if(status==="complete"&&result.tips){console.log(result);_this.options=result.tips;}else{_this.options=[];}_this.loading=false;});});}else{_this.loading=false;this.options=[];}},1.3点击下拉列表某个数据，添加到列表数组chooseListwatch:{searchValue(val){if(val){this.chooseList=[...this.chooseList,...this.options.filter((i)=>i.id===val),];this.options=[];this.drawMakers();this.searchValue="";console.log("打印chooseList数组",this.chooseList);}},},1.4渲染定位点drawMakers函数//定位logo渲染点drawMakers(){const_this=this;_this.theMap.clearMap();//清除地图覆盖物constmarkers=this.chooseList.map((item,idx)=>{console.log(item,idx,"item.....");if(item.location){console.log(item.location,"item.location");return{icon:`//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-${idx+1}.png`,position:[item.location.lng,item.location.lat],};}});//添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照for(letindex=0;index<markers.length;index++){if(markers[index]){newwindow.AMap.Marker({map:_this.theMap,icon:markers[index].icon,position:[markers[index].position[0],markers[index].position[1]],offset:newwindow.AMap.Pixel(-13,-30),});_this.theMap.setFitView();}}},1.5点击地图添加位置信息//点击地图--放在地图初始化initMap()函数中handlerMapClick(){this.theMap.on("click",(e)=>{//点击坐标this.markersPosition=[e.lnglat.lng,e.lnglat.lat]//设置新的标记this.setMapMarker();//this.drawMakers();//根据坐标获取位置信息this.geoCoder.getAddress(this.markersPosition,(status,result)=>{console.log("点击位置信息status：",status);if(status==="complete"&&result.regeocode){console.log(result,"定位定位");constname=result.regeocode.formattedAddress;constaddresss=`${result.regeocode.addressComponent.street}${result.regeocode.addressComponent.streetNumber}`;constmapObj={};constlocation={};location.lng=e.lnglat.lng;location.lat=e.lnglat.lat;mapObj.name=name;mapObj.address=addresss;mapObj.location=location;this.chooseList.push(mapObj);console.log(this.chooseList);letadcode=result.regeocode.addressComponent.adcode;}});});},//设置点击位置的标记setMapMarker(){letmarker=newAMap.Marker({map:this.theMap,position:this.markersPosition,});//将markers添加到地图this.markers.push(marker);},
1.tab切换2.el-table文本超出显示省略号和hover显示tooltipsHTML<el-table-column:label="items.name":width="items.width"v-for="(items,indexs)intableTitle":key="indexs"><templateslot-scope="scope"><el-tooltiptrigger="hover":open-delay="200"placement="top"effect="light":disabled="showTip"><templateslot="content"><pstyle="max-width:260px">{{scope.row[items.id]}}</p></template><divclass="text-show"@mouseover="onShowNameTips">{{scope.row[items.id]}}</div></el-tooltip></template></el-table-column>javascriptonShowNameTips(e){consttarget=e.targetconstcontainerLength=target.clientWidthconsttextLength=target.scrollWidthif(textLength>containerLength){//溢出了this.showTip=false}else{this.showTip=true}},CSS.text-show{max-width:200px;overflow:hidden;//超出的文本隐藏text-overflow:ellipsis;//溢出用省略号显示white-space:nowrap;//溢出不换行}3.el-tree使用HTML注:在需要反选回显的时候需要主要node-key属性需要保持一致<el-checkboxclass="select-all-box"v-model="allChecked">全选</el-checkbox><el-treeclass="rule_tree":data="organizationData":props="defaultProps":check-strictly="isAssociate"node-key="organizationId"show-checkboxdefault-expand-all:expand-on-click-node="false"@check="getCurrentNode"ref="tree"@node-click="handleNodeClick":key="keys"></el-tree>JavaScriptexportdefault{data(){return{allChecked:false,//是否全选开关organizationData:[],//树结构数据checkNodeList:[],//勾选后数组defaultProps:{children:'secondLevelDoList',//这里为二级树数组名称label:'organizationName',},};},watch:{allChecked(){if(this.allChecked){this.isAssociate=falsethis.$nextTick(()=>{this.$refs.tree.setCheckedNodes(this.organizationData)this.getCurrentNode()this.isAssociate=true})}else{this.$nextTick(()=>{this.$refs.tree.setCheckedNodes([])})this.checkNodeList=[]}},},methods:{getCurrentNode(){this.checkNodeList=this.$refs.tree.getCheckedNodes()},handleNodeClick(data,node){console.log(this.$refs.tree.getNode(node).isLeaf,'叶子节点')},打开编辑窗口(){请求树数据接口(){(res)=>{if(this.titleInfo==='编辑规则'){this.当前id编辑数据.forEach((item)=>{this.$nextTick(()=>{this.$refs.tree.setChecked(item.organizationId,true,true)})})}}}},};
因哀悼日一些原因可能需要网站置灰，全局置灰相对简单一些，有些网站是部分置灰或者首屏置灰；在知乎上看到了简单记录一下全局置灰-方法1html{filter:grayscale(100%);}兼容写法html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray;filter:progid:dximagetransform.microsoft.basicimage(grayscale=1);}全局置灰-方法2这里利用backdrop-filter做一个遮罩来置灰，其中pointer-events:none;目的是不阻挡用户交互html::before{content:"";position:fixed;backdrop-filter:grayscale(100%);pointer-events:none;inset:0;z-index:100;}首屏置灰只首屏置灰的话把定位改成absolutehtml::before{content:"";position:absolute;backdrop-filter:grayscale(100%);pointer-events:none;inset:0;z-index:100;}
HTML<template><div><divclass="frame"><!--//focus:获取焦点事件blur:失焦事件clear:清空事件input:input值改变时触发事件--><el-input@focus="download"@blur="unfocused"v-model="input"@clear="empty"@input="inputText"clearable></el-input><!--//通过changeIndex的值判断生效那一套样式--><!--//:class="[{'类名':条件},{'类名':条件}]"--><span:class="[{'focusBlur':changeIndex==1},{'focusBlurTwo':changeIndex==2}]">{{tip}}</span></div></div></template>Jsexportdefault{data(){return{input:'',//input绑定的modelchangeIndex:0,//定义一个变量;0默认样式，1第二套样式，2第三套样式tip:'请输入手机号'};},methods:{//获得焦点事件download(){this.tip='请输入手机号'this.changeIndex=1;//获取焦点等于1，展示第二套样式，文字提示平移到input框上面},inputText(){this.changeIndex=1;//当input值改变时，展示第二套样式，文字提示平移到input框上面},//清空事件empty(){this.changeIndex=0;//点击清空展示默认的样式},//失去焦点事件unfocused(){if(this.input!==''){this.tip=''}if(this.input!=""){this.changeIndex=0;//如果框中有值,展示第三套样式}elseif(this.input==""){this.changeIndex=0;//失焦等于0,展示默认样式}},}};CSS<stylescoped>.frame{/*宽高大家可根据自己需求进行调整，调整完后下面的样式也要进行微调*/margin-top:20px;margin-left:20px;width:20%;height:40px;/*父元素设置相对定位，这样子元素设置绝对定位后就会在父元素的左上角*/position:relative;}.framespan{/*默认情况下的样式*/position:absolute;top:0;left:3%;padding:0px7px;display:inline-block;margin-top:-0.55%;color:#9e9e9e;font-size:14px;pointer-events:none;height:40px;display:flex;align-items:center;transition:all0.3s;/*平移上方时，添加一个过渡效果让其没有那么的不自然，我这边设置了0.3秒执行完这个上移的操作*/}/*获取焦点后的第一种样式*/.frame.focusBlur{position:absolute;font-size:12px;top:-16%;height:16px;color:rgb(64,158,255);background-color:white;}/*如果框中有值顶部文字颜色展示为黑色，第二种样式*/.frame.focusBlurTwo{position:absolute;font-size:12px;top:-16%;height:16px;background-color:white;}</style>
HTML<template><divclass="dynamicParamter"><labelfor="dynamicParam">动态参数</label><input@[eventName]="event"id="dynamicParam"name="dynamicParam"type="text"><button@click="eventName='focus'">获取焦点</button><button@click="eventName='keydown'">按键</button><button@click="eventName='keyup'">键盘抬起</button><br/></div></template>JS<script>exportdefault{data(){return{eventName:'',}},methods:{event(){console.log("点击不同的按钮，会检测不同的事件，从而做接下来的操作",this.eventName);if(this.eventName==='focus'){console.log('这是获取焦点事件，我们可以在此时做一些操作');}if(this.eventName==='keydown'){console.log('这是按下按键事件，我们可以在此时做一些操作');}if(this.eventName==='keyup'){console.log('这是键盘抬起事件，我们可以在此时做一些操作');}},}}</script>
.checkCss{width:150px;height:150px;margin:100pxauto;border-radius:50%;border:5pxsolid#6dd400;background-color:#6dd400;display:flex;justify-content:center;align-items:center;}.checkCss::before{content:"";display:block;width:88px;height:50px;border:10pxsolid#fff;border-right:none;border-top:none;transform:rotate(-45deg)translate(7px,-10px);}