lg.dom

浏览器 DOM 环境专用工具包，为 lg.web、lg.vue 等上层包提供底层 DOM 能力。依赖 lg.tool

六哥项目推荐

• lg-soar 六哥开源前后端脚手架
• lg.tool 纯 JS 通用工具（跨环境）
• lg.dom 浏览器 DOM 工具
• lg.web Web 项目增强
• lg.vue Vue 项目增强
• lg.uniapp UniApp 项目增强
• lg.table-copy 表格复制
• lg.table-plus 表格增强

安装

npm install lg.dom

文件操作

import {
    chooseFile,
    fileToBase64,
    readFile,
    exportFile,
    exportJSON,
    importJSON,
} from "lg.dom/file";

chooseFile({ count: 3, accept: '.jpg,.pdf', size: 50 * 1024 * 1024 }).then(res => {
    console.log(res);
});

右键菜单

import { showContextmenu } from "lg.dom/contextmenu";

showContextmenu({
    event,
    menu: ['复制', '粘贴', '删除'],
    onclick: (index) => console.log(index)
});

宫格布局

基于容器宽度自动计算列数的 CSS 辅助方案，适合商品列表、表单栅格、图标矩阵等场景。

初始化

import { grid } from "lg.dom/grid";
import 'lg.dom/index.css';

grid.install();

grid.install() 用于显式初始化。现代浏览器中脚本会自动监听页面中的 [lg-grid] 元素， 因此多数情况下引入后即可使用；兜底环境（不支持 ResizeObserver / MutationObserver） 会切换为轮询模式。

基础用法

在容器上添加 lg-grid 属性，值为每列期望的最小宽度（单位 px，只写数字即可）， 并在子容器上应用 .lg-grid：

<!-- 每列最小 200px，容器越宽列数越多 -->
<div lg-grid="200" @lg-grid-change="handleGridChange">
  <div class="lg-grid">
    <div v-for="x in 10">{{ x }}</div>
  </div>
</div>

function handleGridChange(e) {
  console.log('当前列数', e.detail.cols);
  console.log('上一次列数', e.detail.oldCols);
  console.log('容器宽度', e.detail.width);
  console.log('配置的最小宽度', e.detail.minWidth);
}

CSS 变量

| 变量 | 默认值 | 说明 | | --- | --- | --- | | --lg-grid | 自动计算 | 当前列数，由 JS 根据容器宽度写入 | | --lg-grid-space | 18px | 栅格间距，同时控制横向与纵向 | | --lg-grid-space-x | --lg-grid-space / 2 | 单项水平内边距的一半 | | --lg-grid-space-y | --lg-grid-space / 2 | 单项垂直内边距的一半 | | --lg-grid-scale | 1 | 单项占用的列数比例 | | --lg-grid-scale-max | 同 --lg-grid-scale | 单项最大宽度限制 |

常用类名

| 类名 | 效果 | | --- | --- | | .lg-grid | 启用 flex 换行布局，子项按 --lg-grid 列数均分 | | .lg-grid-row | 当前项独占一行（等效于 --lg-grid-scale: var(--lg-grid)） | | .lg-grid-full | 当前项占满整行宽度 | | .lg-grid.lg-grid-full > :last-child | 容器同时带 lg-grid-full 时，最后一子项自动占满整行 |

示例：混合格局

<div lg-grid="200">
  <div class="lg-grid">
    <!-- 普通项，自动列数 -->
    <div v-for="x in 12">{{ x }}</div>

    <!-- 独占一行 -->
    <div class="lg-grid-row">lg-grid-row</div>

    <!-- 占两列宽 -->
    <div style="--lg-grid-scale: 2">scale 2</div>

    <!-- 最后一项占满整行 -->
    <div class="lg-grid-full">full</div>
  </div>
</div>

事件

容器会派发 lg-grid-change 自定义事件，当列数真正发生变化时触发：

el.addEventListener('lg-grid-change', (e) => {
  const { cols, oldCols, width, minWidth } = e.detail;
  console.log(cols, oldCols, width, minWidth);
});

事件属性：

• detail.cols：新的列数
• detail.oldCols：上一次列数
• detail.width：当前容器宽度
• detail.minWidth：lg-grid 属性配置的每列最小宽度

API

interface GridAPI {
  install(): void;                // 初始化（现代浏览器通常自动完成）
  update(el: HTMLElement): void;   // 手动刷新指定 [lg-grid] 容器
  observe(el: HTMLElement): void;  // 手动观察指定容器
  unobserve(el: HTMLElement): void;// 取消观察指定容器
}

样式

import 'lg.dom/index.css';

index.css 已同时包含 contextmenu 与 grid 的样式，若只想引入 grid：

import 'lg.dom/grid/index.css';

浏览器存储

基于 localStorage / sessionStorage 的键值存取，自动做 JSON 序列化与反序列化。

import {
    getLocalStorage,
    setLocalStorage,
    removeLocalStorage,
    clearLocalStorage,
    getSessionStorage,
    setSessionStorage,
    removeSessionStorage,
    clearSessionStorage,
} from "lg.dom/storage";

// localStorage
setLocalStorage('user', { name: '六哥', age: 18 });
const user = getLocalStorage('user');        // { name: '六哥', age: 18 }
const token = getLocalStorage<string>('token'); // string | null
removeLocalStorage('user');
clearLocalStorage();

// sessionStorage 用法相同
setSessionStorage('temp', { key: 'value' });
const temp = getSessionStorage('temp');

API

interface StorageAPI {
  getLocalStorage<T = any>(key: string): T | null;
  setLocalStorage(key: string, value: any): void;
  removeLocalStorage(key: string): void;
  clearLocalStorage(): void;
  getSessionStorage<T = any>(key: string): T | null;
  setSessionStorage(key: string, value: any): void;
  removeSessionStorage(key: string): void;
  clearSessionStorage(): void;
}

在隐私模式或存储被禁用的浏览器中，读写操作会失败并打印警告，返回 null，不会抛出异常。