问题记录（关于css、js、Vue、ES6）
时间：2023-03-30 13:21:10
CSS
1.CSS样式问题1.一行遗漏和多行遗漏问题一行遗漏样式：width:200px;//必须固定宽度overflow:hidden;//超过隐藏文本溢出：省略号；//隐藏部分被省略号white-space:nowrap;//文本内容不换行（默认固定宽度时换行）多行省略号样式：width:200px;//必须固定宽度overflow:hidden;//超出隐藏文本溢出：省略号；//隐藏部分用省略号代替display:-webkit-box;//将对象显示为灵活的盒子模型-webkit-box-orient:vertical;//通过上面两行，指定盒子的子元素是水平排列还是垂直排列，替换掉之前的box-orient属性-webkit-line-clamp:2;//限制一个块元素显示的文本行数2.两端对齐问题的样式如下：width:200px;//固定宽度text-align-last:justify;//此文本的最后一行是对齐的text-align:justify;//整个文本对齐text-justify:distribute-all-lines;//兼容ie浏览器text-align-last属性可写可不写（默认左对齐），共有三个属性值可以选择，效果如下：3.自己写表格样式，属性display:table在css中写display是无效的：-webkit-flex也是无效的，然后解决方法如下，在html中写如下样式，参考下面链接，这个我找不到解释目前，我只能在互联网上找到这个。:style="{显示:['-webkit-box','-ms-flexbox','flex']}"4.z-index不工作问题描述：z-index不工作。分析：分三种情况：1、父标签的position属性是相对的；2.问题标签没有position属性（不包括static）；3.问题标签包含一个float属性。解决方法：1、改变位置：relative；定位：绝对；2、为浮动元素添加位置属性（如relative、absolute等）；3.去除浮动。5.保证金：0自动；不起作用问题描述：margin:0auto;分析：原因如下：1、问题元素没有指定宽度；2.浮动、绝对定位、固定定位框无效；3.、行内元素无效；4.其实和3一样，类似display:table-cell；仅显示不阻塞，将无效。解决方案：问题元素固定宽度，没有定位，display:block。6.box-shadoweffect问题描述：有的设计图只要求一侧显示阴影效果，有的则要求所有的阴影效果。解决方案：语法：box-shadow:h-shadow(水平阴影位置)v-shadow(垂直阴影位置)blur(模糊距离)spread(阴影大小)color_inset;直观效果如下：1、top2、right3、bottom4、left5，四个边都显示出来（阴影的大小必须大于任意水平和垂直位置，否则四个边显示不出来）7.》流体布局”和“自适应布局”流体布局：利用元素的“流动”特性实现各种布局效果。因为：流本身具有自适应特性，所以“流体布局”往往是自适应的，但“流体布局”不等同于“自适应布局”。自适应布局：是任何一种具有自适应特性的布局的总称。具体可以参考这个链接：Layout2.js问题1.因为之前的页面数据太多，点击按钮的时候，浏览器的响应会很慢。当点击按钮时，清除多余的数据，使用length=0的方法。（这个应该涉及到浏览器的进程，没有过多涉及，原因不明。）2、由于浏览器兼容性问题，无法获取点击事件冒泡路径。说明：使用vue写h5动态加载元素，点击事件无法渲染（或者函数不能指向窗口），所以想使用冒泡路径获取元素的点击事件。问题：Android上没有问题，但是在ios的safari浏览器上，没有触发事件。排除了很多原因，发现在safari环境下，无法通过event.path获取冒泡路径，存在兼容性问题（Firefox也是如此），需要用到composedPath。让路径=event.path||(event.composedPath&&event.composedPath());3、2中指向window的问题描述：使用框架后，this指向vue实例，而native函数指向window，所以初始化的时候，把函数赋值给window即可，例如：//html部分，注意原生点击事件需要括号
//js部分created(){window.example=this.example;},methods:{example(){},}4.三位数用逗号隔开1.如果小数点后没有这么高的位数就用native方法需求可以用toLocaleString()方法，可以只保留小数点后三位（四舍五入）。让num=111111.111111;num.toLocaleString();//"111,111.111"需要注意的是，该方法将数字类型转换为字符串。Number.toLocaleString()方法返回表示特定语言环境中数字的字符串。2.使用正则函数thousands(num){varstr=num.toString();varreg=str.indexOf(".")>-1？/(\d)(?=(\d{3})+\.)/g:/(\d)(?=(?:\d{3})+$)/g;returnstr.replace(reg,"$1,");}3.字符分解函数thousands(num){varsplits=[],res=[];varsplits=num.toString().split(".");splits[0].split("").reverse().map(function(item,i){if(i%3==0&&i!=0){res.push(",");}res.push(项目);});returnres.reverse().join("")+(splits.length>1?"."+splits[1]:"");}把数分成两部分，整数和小数，然后把整数除部分成一个单字符数组。倒序后，每3位插入一个逗号（因为逗号是前后加的）。然后再反过来合成字符串，加上小数部分就大功告成了。5、获取URL参数使用js获取URL参数。函数getQueryVariable（变量）{varquery=window.location.search.substring(1);varvars=query.split("&");对于(vari=0;i
{}需要注意的是，和map一样，只能在库之后调用加载完毕（即导入的脚本必须在本页面的脚本之前加载），一定要等前面的脚本加载完成后再操作！三、vue项目1.重复导航问题描述从同一个页面跳转到同一个页面时，会报错。这就是重复导航的原因。报错如下：解决办法是引入vue-router页面，需要添加如下内容：constoriginalPush=Router.prototype.push;Router.prototype.push=functionpush(location){returnoriginalPush.call(this,location).catch(err=>err);};2.元素拖拽问题描述：只需要一个拖拽，点击事件元素。拖拽的时候，只需要执行拖拽操作，但是点击事件也会被执行。分析：鼠标点击事件的流程如下：onClick：点击事件onDblClick：双击事件onMouseDown：鼠标上的按钮按下onMouseUp：鼠标按下松开时触发的事件onMouseOver：鼠标移动时触发的事件aboveofanobjectrange触发事件onMouseMove:鼠标移动时触发的事件onMouseOut:鼠标离开物体范围时触发的事件顺序如下：解决方法：只监听onmousedown和onmousemove，移动计算为在onmousemove事件中，所以按照下面的方法进行。1、在onmousedown中为元素添加监听事件（防止最后移除）；2.去掉onmousemove中的监听事件（因为只要触发了事件就说明这是拖拽事件）。需要注意的是$emit只能在Vue自定义组件中使用，在常规DOM元素中使用.dispath事件发送DOM事件。（例如：vnode.elm.dispatchEvent(newCustomEvent(eventName,{key:value}));）3.代理跨域问题描述：本地代理，错误如下：分析：这是因为代理发送从http发起请求，请求的是https，这两个协议不一样，导致跨域。解决方法：可以参考链接代理跨域。如果是cli3项目，可以在vue.config.js中修改如下（在cli3下面的config.js中修改）：4.本地ip访问问题描述：项目运行时，只能用localhost访问，下LAN，无法通过其IP地址访问它。解决方法：参考链接项目运行5.使用router-view跳转问题描述：使用router-view判断进入二级页面。当页面刷新时，父页面的created和mounted语句循环也会被调用。解决方法：如果没有额外的操作（例如：刷新页面）进入父页面再进入子页面，其正常流程如下：parentcreated=>parentmounted=>parentwatch=>childcreated=>childlevelmounted但是当你刷新childlevel页面时，你会发现执行顺序是这样的：parentlevelcreated=>childlevelcreated=>childlevelmounted=>parentlevelmounted这是一个正常的过程，但是要避免第二种情况，最好在父页面深度监听路由。6、Navigationguard问题描述：有这样一个需求，只有登录页面跳转的请求数据，其他页面跳转的不请求数据。分析：首先我觉得这个跟路由有关系，所以先从路由说起。第一次尝试深入监控路由，会发现它的oldVal一直是undefined（这个也很好理解，从上一页跳转时，无法监控下一页，因为下一页的实例pagehasnotbeencreatedyet.),无法区分上一个页面是不是登录页面。找了半天发现navigationguardbeforeRouteUpdate就可以了。navigationguards的额外收获：改变参数或query不会触发进入/退出navigationguards，但是可以使用beforeRouteUpdate（例如以path:'xxx/:id'和params的形式传递参数，来自这个详情页到另一个详细信息页面）。7、computed和watch区别的本质：两者处理的数据关系场景不同。watch擅长处理的场景：一个数据影响多个数据Computed擅长处理场景：一个数据受多个数据影响Computed是一个计算属性，依赖其他属性计算值，计算值被缓存，只当计算值改变时返回内容。watch监听到值变化时，会执行回调，在回调中可以进行一些逻辑操作。所以一般来说，当你需要依赖其他属性动态获取值的时候可以使用computed，当你需要做一些复杂的业务逻辑来监控值的变化时可以使用watch。8、高德地图和阿里巴巴矢量库“冲突”问题：高德地图和阿里巴巴矢量库一起用了很多次，不过最近这个项目刚引入高德地图，本地不错，打包后上传到测试上测试服务器，测试服务器的图标不显示。调试了半天，一开始以为高德是用异步导入的方式覆盖了阿里巴巴矢量库的图标，结果发现不是，最后也不知道怎么办。？？？这个问题无法解决。..9、版本统一：要求两个项目使用的技术栈统一。分析：先删除技术栈，再引用指定版本的技术栈。npmuninstall**npminstall**@x.x.x另一个问题是如何准确配置dependencies和devDependencies下的技术栈。npminstall**@x.x.x-D//意思是放在devDependencies下npminstall**@x.x.x-S//意思是放在dependencies下如果想了解详细可以参考：dependenciesanddependencies的详解devDependencies配置4.ES61.async/await调用不成功问题描述：一个数组批量调用接口分析：首先想到的是async/await和Promise.all，习惯性使用async/await，然后报错错误。下面是仿写的demo。然后陷入了迷茫。..解决方案：项目中使用Promise.all代替async/await，Promise.all完全没有问题。现在回去找答案，原来是Each的原因！原代码：需要改成这样（注意async的位置！！！）上面两段代码看async的位置就知道答案了，因为es6提倡使用箭头函数而不是普通函数，结果往往被人遗忘forEach()也是一个函数，而await后面必须跟async，所以会报错。当然，使用for循环可以完美避免这个问题。MDN官方文档给出的例子如下：2.ScopedCSSdeptheffectselectorisinvalid问题描述：项目的所有样式都添加了scope，然后在修改第三方组件时，样式没有效果。更要命的是，它的父元素是body，没办法再增加额外的类名。分析：如果它的父元素不是body，可以添加类名，然后通过深度效果选择器添加样式。深度效果选择器可以参考ScopedCSS，但是当父元素是body时，深度效果选择器就没用了，我采用的方法比较粗糙，直接获取需要修改的元素，直接用js赋值.
