随手记录常见问题(一)vue动态添加样式写法+各种宽度+鼠标禁用

Q1.hover为盒子添加border后引起布局变化

A: 在鼠标滑动到盒子之前，为其添加一个透明边框进行占位，例如:border:1px solid transparent;

Q2.鼠标禁用点击事件时 对应鼠标形状改变

A:父元素加cursor:not-allowed 改变鼠标形状 ； 带点击事件的元素使用 pointer-events: none 禁用事件;

如果盒子区域既要鼠标禁用又要禁用样式：

使用盒子套盒子的方式解决：
外部盒子使用cursor: not-allowed;（cursor：no-drop）
内部盒子使用pointer-events: none;

Q3.鼠标点击多层结构的div时，event.target在变，不一定拿到的是最外层div

A:使用event.path获取  冒泡或捕获  过程的所有元素

event.path属性在Chrome和Opera浏览器下没问题，但是在Firefox和Safari中发现event并没有path属性；所以在Firefox和Safari中我们需要通过composedPath属性获取

element.onClick(event){
  const ev = window.event || event;
  const path = event.path || (event.composedPath && event.composedPath());
}

Q4.Vue动态添加样式　

 A:vue官方文档三元表达式写法：

绑定HTML Class （数组语法）

<div v-bind:class="[isActive?activeClass:'', errorClass]"></div>

绑定内联样式（对象语法）

<div :style="{'color': arrentIndex === 0 ? 'red' : 'blue'}"></div>

　总结在项目开发中的使用方法

• class（双引号、数组）

:class="sth?'dot':'hidden'"  
:class="[sth?'classA':'classB']"

  :class="{ 'disable-cursor': loading }"

• styles（双引号）

：style="{'属性名'：三元表达式}"
：style="{'color':status===true?'red':'blue'}"

 

Q5.位置相关

A: 

offsetWidth       // 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
clientWidth        // 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

style.width         // 返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
scrollWidth       // 返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

1. style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；

2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性

3. style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效，offsetWidth则仍能取到。

Q6: 为什么vue组件的属性，有的需要加冒号“:”，有的不用?

 A:加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量

 Tips

1.debugger直接写在代码里可以有开f12打断点的效果