朝阳二维vue笔记

1.vue项目中关闭eslint的方法：

在项目根目录下增加vue.config.js文件。

module.exports = { lintOnSave: false }

配置文件修改有时不会自动更新，需要重启服务。

2.重复点击同一路由报错：

在router/index.js中添加如下代码

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {

  return originalPush.call(this, location).catch(err => err)

}

3.data中一变量message调用另一data中变量b是undefined（message:b）,需要在mounted中将b赋给message。

4.箭头函数的this，指向它上一层。组件中直接使用this，不一定指向vue实例，可能指向当前组件；

5.computed中不能使用箭头函数；计算属性，可以直接拿来当做属性使用，不需要进行显示调用即可返回参与计算后的属性值

在一个计算属性里可以完成各种复杂的运算，包括运算，函数调用等，只要最终返回一个结果就可以了，另外 计算属性还可以依赖多个vue实例的数据，只要其中任一个数据变化，计算属性就会重新执行，视图也会更新。 计算属性除了简单的文本插值外，还经常用于动态地设置元素的样式名称class和联样式style，当使用组件时，计算属性也经常用来 动态传递props。

6.筛选图层 (正则是替换字符首个空格及首个后面的空格，字符末尾空格及末尾空额前方的空格)

7修改滚轮样式

/*修改滚动条样式*/ div::-webkit-scrollbar{ width:10px; height:10px; /**/ } div::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px; } div::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px; } div::-webkit-scrollbar-thumb:hover{ background: #333; } div::-webkit-scrollbar-corner{ background: #179a16; }

8.el-tree布展开时也加载子节点:设置render-after-expand="false"

geoserver服务跨域

9.elementui form表单验证之后，axios.post(url,{要提交的数据})进行提交

10.a均等布局：父级display：flex,自己flex:1;b左右两层布局：父级display:flex;just-content:space-btween

11.使用clip-path绘制多边形:http://species-in-pieces.com/ http://bennettfeely.com/clippy/

圆形circle（半径at圆心坐标）;

椭圆形ellipse（长、短轴半径at圆心坐标）;

内置矩形inset（上右下左的边距round上右下左圆角;

12.div拖拽和拉伸

drag(e){//鼠标按下拖拽

            // let oDiv = document.getElementById("Detailpop");let eclientx=e.clientX; let eoffsetWidth=oDiv.offsetWidth;

            // let disX = e.clientX - oDiv.offsetLeft;

            // let disY = e.clientY - oDiv.offsetTop;

            // document.onmousemove = function(e){

            //     e.preventDefault();

            //     var l = e.clientX - disX;debugger

            //     var t = e.clientY - disY;

            //     oDiv.style.left = l + "px";

            //     oDiv.style.top = t + "px";debugger

            //     // if(disX +10 > eoffsetWidth){console.log(oDiv.offsetWidth,eoffsetWidth)

            //     //     oDiv.style.width = eoffsetWidth + e.clientX - eclientx+ "px";debugger

            //     // }              

            // } 

            // document.onmouseup = function(){

            //     document.onmousemove = null;

            //     document.onmouseup = null;

            // }

            // 

            let box = document.getElementById("Detailpop");

            let sbox = document.getElementById("sbox");

            e=e||window.event;

            var xDown = e.clientX,//获取鼠标的初始坐标

                yDown = e.clientY,//获取鼠标的初始坐标

                leftDown = box.offsetLeft,

                topDown = box.offsetTop;

            box.style.cursor = "pointer"

 

            document.οnmοusemοve=function (e) {

                e = e||window.event;

                var xMove = e.clientX,

                    yMove = e.clientY;

                box.style.left = leftDown + xMove - xDown + "px";

                box.style.top =topDown + yMove - yDown + "px";

 

            }

            document.οnmοuseup=function () {

                // box.style.cursor = "default";

                // document.body.style.cursor = "default";

                document.οnmοusemοve=null;

                document.onmouseup = null;

            }

            sbox.οnmοusedοwn=function (e) {

                e = e||window.event;

                e.cancelBubble=true;

                var xDown = e.clientX,

                    yDown = e.clientY,

                    boxW = box.clientWidth,

                    boxH = box.clientHeight;

                    // document.body.style.cursor = "se-resize";

                document.οnmοusemοve=function (e) {

                    e = e||window.event;

                    var xMove = e.clientX,

                        yMove = e.clientY,

                        x_ = xMove - xDown, //x变化量

                        y_ = yMove - yDown, // y变化量

                        width = Math.max(10,x_+boxW),

                        height = Math.max(10,y_+boxH);

                    box.style.width = width + "px";

                    // box.style.height = height + "px";

                }

                document.οnmοuseup=function () {

                // box.style.cursor = "default";

                // document.body.style.cursor = "default";

                    document.οnmοusemοve=null;

                    document.onmouseup = null;

                }

            }

        }