随笔分类 - JS
Vue 3组件中监听浏览器窗口的大小变化
摘要：const windowWidth = ref(window.innerWidth); onMounted(() => { // 在组件挂载后检查屏幕大小 // 添加事件监听，以便在屏幕大小变化时更新条件 window.addEventListener('resize', checkScreenSi
flex 一行放四div 每个div 放三个div
摘要：<!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-wrap: wrap; } .outer-div { display: flex; width: 25%; /* 每个外部div占据100%宽度的25% */
flex布局之一行显示4个，如果多于4个，自动换行（只能4个 ）
摘要：<div style="display: flex; justify-content: space-between; flex-wrap: wrap; "> <div class="item" style="background-color: aliceblue;"></div> <div clas
flex布局之一行显示4个，如果多于4个，自动换行
摘要：<div class="container"> <div class="item" style="background-color: #f8b9b9">1</div> <div class="item" style="background-color: #f8300c">2</div> <div c
Vue3 模版常用语法
摘要：一、背景 二、实现 仅支持表达式 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} {{ author.books.length > 0 ? 'Yes' : 'No' }} <div
JS 下载文件
摘要：一、背景 二、实现 点击查看代码 // 下载文件 export function downloadFile(obj, name, suffix) { const url = window.URL.createObjectURL(new Blob([obj])) const link = docume
vue3 ts 数组构造树形 VS java 数组构造树形
摘要：一、背景 vue3 ts 数组构造树形 VS java 数组构造树形,通常是后端返回树形,但是有一些比较吊的后端就是要返回数组,不管前端死活,未雨绸缪,比较前后端 数组组转 树形结构. 二、实现 同个接口,返回同种数据结构. 其实有用的就是三个字段 id,name,pid,其他字段只是附加说明. v
JS 将列表转成树形结构数据
摘要：一、背景 联调发现有些后端返回List 但是前后需要转树形结构 二、实现 点击查看代码 import _, { isArray } from 'lodash' /** * 将列表转成树形结构数据 * @param nodes 列表数据 * @param options 可选参数，{idKey, pI
