随手记录常见问题（四）状态圆点+嵌套css+z-index失效+2行文本+小数比较

Q1. css 根据后端传值区分圆点颜色

字典形式转换数据 class中通过后缀区分颜色

<el-table-column prop="health" label="健康状态">
        <template slot-scope="{ row }">
          <span class="health-dot" :class="`health-dot--${row.health}`" />{{ HEALTH[row.health] }}
        </template>
</el-table-column>

<style lang="scss" scoped>
.health-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 100%;

  &--1 {
    background: $color-status-success;
  }

  &--2 {
    background: $color-status-warning;
  }

  &--3 {
    background: $color-status-danger;
  }

  &--4 {
    background: $color-status-info;
  }

  &--5 {
    background: $disabled-color;
  }
}

// 定义字典常量的单独js文件
export const HEALTH = {
  1: '健康',
  2: '警告',
  3: '危险',
  4: '进行中',
  5: '失联'
}

 Q2: css选择器怎么选择排除倒数第一个元素的其余元素

// 嵌套写法
.des-group:not(:nth-last-of-type(1)) {
    margin-bottom: 60px;
  }

 Q3: z-index失效

左侧的菜单固定为fixed时，二级菜单无法设置有效的z-index，导致菜单隐藏在页面元素之下，明明页面元素的z-index是1，但是无论把菜单的z-index设置为多大，都不管用。

查阅了资料，原来谷歌浏览器在设置position:fixed;后会触发元素创建一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构，当给b设置了position:fixed;属性后，会触发创建一个新的层叠上下文，它的父层叠上下文变成了a，所以b只能在a的内部进行层叠比较。这也就是大家熟听的“从父原则”。

所以本来所有元素都在root内比较，改为fixed之后只能在父级元素内比较，而父级元素没有设置z-index，所以无法比较。

所以解决方案是给父级元素设置z-index，一般设置为0就可以了。
摘抄两点：
1. z-index只有在设置了position为relative,absolute,fixed时才会有效。
2. z-index的“从父原则”。当你发现把z-index设的多大都没用时，看看其父元素是否设置了有效的z-index，当然别忘了先看看自身是否设置了position。
————————————————
摘抄自原文链接：https://blog.csdn.net/acingdreamer/article/details/78561408

Q4 文本最多2行的css代码

.text {
            width: 140px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 2; /** 显示的行数 **/
            overflow: hidden;
        }

 Q5 小数比较

Number 类型的坑

Number 类型真的有太多坑了，除了 NaN 和正负零的问题，还存在其他语言都存在的小数问题，小数问题是前端比较容易踩坑的地方，如果想对比两个小数是否相同，可能会违反直觉，比如 0.1+0.2 并不和 0.3 全等，代码示例如下：

const a = 0.1 + 0.2; // 0.30000000000000004
a === 0.3; // false

对于小数的比较，一般都是让两个数字做减法，如果其差值，小于 Number.EPSILON，就认为其相等，代码示例如下：

var a = 0.1 + 0.2; // 0.30000000000000004

a - 0.3 < Number.EPSILON; // true 可认为 a === 0.3

附： NaN 和正负零的问题

Number 类型有个特殊的值 NaN，用来表示计算错误的情概况，比较常见是非 Number 类型和 Number 类型计算时，会得到 NaN 值，代码示例如下所示，这是从表单和接口请求获取数据时很容易出现的问题。

const a = 0 / 0; // NaN
const b = 'a' / 1;
const c = undefined + 1; // NaN

在严格相等中，NaN 是不等于自己的，NaN 是(x !== x) 成立的唯一情况，在某些场景下其实是希望能够判断 NaN 的，可以使用 isNaN 进行判断，ECMAScript 2015 引入了新的 Number.isNaN，和 isNaN 的区别是不会对传入的参数做类型转换，建议使用语义更清晰的 Number.isNaN，但是要注意兼容性问题，判断 NaN 代码示例如下：

NaN === NaN; // false

isNaN(NaN); // true
Number.isNaN(NaN); // true

isNaN('aaa'); // true 自动转换类型 'aaa'转换为Number为NaN
Number.isNaN('aaa'); // false 不进行转换，类型不为Number，直接返回false

严格相等另一个例外情况是，无法区分+0 和-0，代码示例如下，在一些数学计算场景中是要区分语义的。

+0 === -0; // true

JavaScript 中很多系统函数都使用严格相等，比如数组的 indexOf，lastIndexOf 和 switch-case 等，需要注意，这些对于 NaN 无法返回正确结果，代码示例如下：

[NaN].indexOf(NaN); // -1 数组中其实存在NaN
[NaN].lastIndexOf(NaN); // -1

参考文章：

如何在JavaScript中判断两个值相等

标签：index,isNaN,常见问题,示例,元素,NaN,Number,css
来源： https://www.cnblogs.com/xinxinzh/p/15874010.html