常用js功能方法（自用）

数组中元素为对象 去重

// vue2 methods中定义方法
uniqueObjects(array, key) {
	// 使用一个 Set 对象来存储唯一的对象
	const seen = new Set();
	
	// 使用 filter 方法来过滤重复的对象
	return array.filter(item => {
	    // 根据提供的键值从对象中获取唯一的标识
	    const identifier = key ? item[key] : JSON.stringify(item);
	
	    // 如果 Set 中不存在该标识，则将其添加到 Set 中并返回 true，否则返回 false
	    if (!seen.has(identifier)) {
	        seen.add(identifier);
	        return true;
	    }
	    return false;
	});
} 

// 使用方法
const array = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 4, name: 'John' }, // 重复元素
    { id: 3, name: 'Alice' }
];
// 第一个参数是数组，第二个参数是判断是否重复的key
const uniqueArray = this.uniqueObjects(array, 'name');
console.log('11', uniqueArray);

最后打印出的结果为

el-table 懒加载

<el-table :data="innerData" ref="elTable">
</el-table>

// 在data中定义
data() {
	return {
		innerList:[],  //新数组，用于存放全部数据
	    innerData:[],  //el-table表格数组
	    dom: null,
	    tableList: [],
	}
}
// 在watch处添加监听
watch: {
    'tableList'() {
        this.innerData = [];
        this.innerList = [];
        //将接口中获取到的数据全部存放到数组
        this.innerList = this.tablelist || [];
        //先循环出100条数据用于显示
        for (let i = 0; i < this.innerList.length; i++) {
            if (i < 100) {
                this.innerData.push(this.innerList[i]);
            }
        }
    }
},
// 获取接口数据
init() {
    service.get('/xxxx/getXxxxx').then((res) => {
        this.tableList = res.data.result;
    }).catch((err) => {
        console.log('err', err);
    }).finally(() =>{
    })
},   
// 在mounted阶段添加监听
mounted() {
	this.init();
 	// 设置滚动条监听时间加载数据
	this.dom = this.$refs.elTable.bodyWrapper;
	this.dom.addEventListener('scroll', () => {
	    let scrollTop = this.dom.scrollTop;   //滚动距离
	    let scrollHeight = this.dom.scrollHeight;   //滚动条的总高度
	    let clientHeight = this.dom.clientHeight;   //可视区的高度
	    if (scrollTop + clientHeight === scrollHeight) {
	        if (this.innerList.length <= this.innerData.length) return 
	        // 如果不够50条就全部渲染上去
	        if (this.innerData.length + 50 > this.innerList.length) {
	            this.dom.scrollTop = this.dom.scrollTop - 50; 
	            this.innerData = [];
	            this.innerData.push(...this.innerList);
	            this.$message({
	                message: '数据已全部加载完成',
	                center: true,
	                duration: 2000,
	                type: 'success'
	            });
	        } else {
	            this.dom.scrollTop = this.dom.scrollTop - 50;
	            let id = this.innerData.length;
	            //每次渲染50条数据
	            for (let index = id; index < id + 50; index++) {
	                this.innerData.push(this.innerList[index])
	            }
	        }
	    }
	})
}

vue3中 实现拖拽div方法

html

<div class="popFormCard" :style="{ left: `${x}px`, top: `${y}px` }" @mousedown="startDrag">
</div>

css

.popFormCard {
    height: 650px;
    width: 800px;
    top: -250px;
    z-index: 1;
    position: fixed;
    cursor: grab;
}

js

// 定义变量
const isDragging = ref(false);
const x = ref(550);
const y = ref(150);

// 拖拽方法
const startDrag = (event) => {
    // 记录初始鼠标位置
    const initialMouseX = event.clientX;
    const initialMouseY = event.clientY;

    // 记录初始元素位置
    const initialX = x.value;
    const initialY = y.value;

    // 开始拖动，设置为true
    isDragging.value = true;

    // 当鼠标移动时执行的函数
  const dragging = (moveEvent) => {
    // 只有在拖动时才执行
    if (isDragging.value) {
      // 计算鼠标移动的距离
      const deltaX = moveEvent.clientX - initialMouseX;
      const deltaY = moveEvent.clientY - initialMouseY;

      // 更新元素的位置
      x.value = initialX + deltaX;
      y.value = initialY + deltaY;
    }
  };

  // 鼠标释放时停止拖动的函数
  const stopDrag = () => {
    // 结束拖动，设置为false
    isDragging.value = false;

    // 移除事件监听器
    document.removeEventListener('mousemove', dragging);
    document.removeEventListener('mouseup', stopDrag);
  };

  // 添加鼠标移动和释放时的事件监听器
  document.addEventListener('mousemove', dragging);
  document.addEventListener('mouseup', stopDrag);
};