平时用的到的

CSS

禁止水平滚动时触发页面的回退操作

html,
body {
  // overscroll-behavior-x: none;
  /* 禁止水平滚动时触发页面的回退操作 */
  overscroll-behavior-x: contain;
}

文字禁止选中

 user-select: none;

解决el-input 出现两个关闭icon

.el-input .el-input__validateIcon {
  display: none;
}

间隔属性

 gap: 间隔距离;

给文字添加背景

 background-clip: text;
 font-size: 50px;
 font-weight: 900;
 color: transparent;
 -webkit-background-clip: text;

css使用html、js中的变量

vue2:

当background-image使用变量时，变量需要将 url()也存在变量中 vue3: 参考1 参考2

:first-child :first-of-type的区别

.className:first-child：找到.className的父元素下的第一个元素 .className:first-of-type：找到.className的父元素下的不同标签元素的第一个元素

JS

跳到/滚动到某个节点

const dom = dom节点
dom.scrollIntoView()

使用方法

用-1获取数组最后一个元素

arr.at(-1)

比较两个对象内容是否相等(使用lodash)

_.isEqual(object1, object2)

概率出现

/*  
    概率出现  
        arr为概率数组[10,20,30...]----尽量将每项转化为整数  
        最终返回值为，数组的下标  
*/  
getResult(arr){  
    var leng = 0;  
    for(var i = 0; i leng += arr[i]; i++){   //获取总数  
        leng += arr[i]
    }  
    for(var i = 0; i < arr.length; i++){  
        var random = parseInt(Math.random()*leng); //获取 0-总数 之间的一个随随机整数  
        if(random < arr[i]){  
            return i //如果在当前的概率范围内,得到的就是当前概率  
        }  
        else {  
            leng -= arr[i] //否则减去当前的概率范围,进入下一轮循环  
        }  
    }  
}

VUE

富文本编辑器

vue-quill-editor \ 使用文档

拖拽功能

vuedraggable \ 参考使用

跨页面通讯(同一浏览器不同标签)

参考使用

    // 声明 ---- channel:需要通讯的唯一值
    const channel = new BroadcastChannel('channel')
    // 监听(收到触发)
    channel.onmessage = (e) => {
      执行逻辑。。。
    }
    
    // 触发(发送)
    channel.postMessage('传递的参数')

根据一个json链接下载成json文件

参考使用

<template>
  <div>
    <h1 @click="axiosDownload">axios 异步下载 json 等资源文件</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'DownloadFile',
  methods: {
    axiosDownload () {
      // config 是配置对象，可按需设置，例如 responseType，headers 中设置 token 等
      const config = {}
      // 这一步可能很关键，特别是在能下载，但是下载下来打开异常的时候。
      config.responseType = 'blob'
      axios.get('http://localhost:8278/package.json', config).then(res => {
        const blob = new Blob([res.data]) // 将字节流(字符流)转换为 blob 对象
        this.blobDownload(blob)
      })
    },

    /**
     * 下载文件：下载 blob 对象形式的文件
     * @param blob
     * @param filename
     */
    blobDownload (blob, filename = '文件.json') {
      let url = window.URL.createObjectURL(blob)
      //  解决 ie 不支持下载 blob资源
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, filename)
        return
      }
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.download = filename
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) // 下载完成移除元素
      window.URL.revokeObjectURL(url) // 释放掉blob对象
    }
  }
}
</script>

React

1.react拖拽

SortableContext标签下的items属性必须带有id，否则拖拽会没有动画

2.react页面缓存

参考

// 使用这两个标签包裹最外层
import { KeepAlive, AliveScope } from 'react-activation'
<AliveScope>
  <KeepAlive
    when={!routerItem.noCache}
    id={pathname}
    name={pathname}
    saveScrollPosition="screen">
    {children}
  </KeepAlive>
</AliveScope>

Lodash

复杂数组去重

uniqBy([], key)