大屏可视化常见的毛玻璃效果记录

使用css 属性实现 backdrop-filter: blur(3px)

.box {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(3px);
  width: 300px;
  height: 200px;
}

兼容方法 使用filter + 伪类

.box {
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 继承容器的背景图片 */
  background-image: inherit; 
   /* 应用模糊效果 */
  filter: blur(3px);
   /* 控制透明度 */
  opacity: 0.7;
  /* 置于内容之下 */
  z-index: -1; 
  
}

树形查找

findNode(id, list) {
    for(let i = 0;i<list.length;i++) {
      let item = list[i]
      if(item.value == id) {
          return item
      }
      if(item.children && item.children.length) {
        const result = this.findNode(id,item.children)
        if(result) {
          return result
        }
      }
    }
    return null
 }

收藏代码高亮

const highlightText = () => { 
    if (!input.value) { 
        return txt.value; 
    } 
    const regex = new RegExp(`(${input.value})`, 'gi'); 
    const highlightedText = txt.value.replace(regex, '<span class="ed-highlight">$1</span>');       return highlightedText; 
}

级联选择器最后一级

<template>

<el-cascader

:options="options"

:props="{ multiple: true, checkStrictly: true }"

@change="handleChange"

></el-cascader>

</template>

<script>

export default {

data() {

return {

options: [

{

value: 'guid1',

label: 'Option 1',

children: [

{ value: 'guid-1-1', label: 'Option 1-1' },

{ value: 'guid-1-2', label: 'Option 1-2' }

]

},

// ... 其他选项

]

};

},

methods: {

handleChange(value) {

// 获取最后一级的数据

const lastLevelData = value.map(path => {

let node = this.findNodeByPath(this.options, path);

return { value: node.value, label: node.label };

});

console.log(lastLevelData);

},

findNodeByPath(nodes, path) {

if (path.length === 0) return null;

const node = nodes.find(n => n.value === path[path.length - 1]);

return node || this.findNodeByPath(node.children, path.slice(0, -1));

}

}

};

</script>