Color-demo 的总结

color-demo 做的过程总结

• 问题描述： 类似于一个颜色卡，颜色对应其 hex 及 rgb 的值，这个在之前的项目中是使用 jQuery 取得其背景颜色，然后再使用函数转换，现在将其迁入 vue 中，并且不采用 jQuery

想要取 DOM 节点的背景颜色

• 尝试1： 在 vue 中使用ref属性

  var domElement = this.$refs.box1;
  // 这里要注意，如果没有定义内联的 style，domElement.style 取到的属性值都是空的。
  var bgColor = window.getComputedStyle(domElement).backgroundColor;
  

  • 遇到的问题
    • 如果这个div里面带有v-for循环的话，取出来的是一个数组。（这里要注意取出来的是不是Array类型，可能是 array-like 或者 iterator Array.from)
    • ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们，它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
    • 当v-for用于元素和组件的时候，引用信息将是包含DOM节点或者组件实例的数组。

• 尝试2： 使用伪元素的content元素直接从Sass文件中引入颜色值

  @each $colorlist in ($colors, $greys) {
    @each $key, $value in $colorlist {
      &.#{$key} {
        background-color: $value;
        @at-root &+.info-block .hex-info .name:after {
          content: "#{$value}";
          padding-left: 10px;
        }
        @at-root &+.info-block .rgb-info .name:after {
          content: getColor($value);
          padding-left: 10px;
        }
      }
    }
  }
  

  • 遇到的问题

    • 在 content 属性中，文字无法被复制，原因是：because content of the pseudo-element is not in the DOM (can not even be selected), therefore it only exists visually for the users of visual browsers, and that excludes screen readers and web crawlers which is not a good practice.
    • 文字无法换行，\A在Sass中不起效，这个还没有解决。
    • 其中有看到 user-select 属性，在伪元素中并不起作用 Select text in ::before or ::after pseudo-element
    • Sass中的颜色定义是 hex 值，现在需要其 hex 及 rgb 值，所以需要颜色转换的函数，好在 Sass 中已经为我们提供了两个函数。

    rgba($color, $alpha); // 将一个 hex 值转换为 rgba 颜色，这里有个问题，如果 `$alpha =                 1`，它不会转换，会返回一个 hex 值。
    rgb(200, 40, 89); //根据一个 rgb 的值计算出一个十六进制的颜色值。
    // 如果要想要 hex 值转换为 rgb 值，不要其透明度，可以采用黑科技
    rgb(red($color), green($color), blue($color));
    

其中还遇到的别的问题

• css 中的空白符和换行
  • 这是 css3 新增的换行属性word-wrap 和 word-break。还有 white-space。
  • (深入理解css中的空白符和换行)[https://www.xiaohuochai.site/CSS/render/text/wrap.html]