sunshine-ui-layx

介绍

基于LayX的vue新一代Web弹窗组件

效果预览 使用文档

特别鸣谢 @百小僧 LayX

序言

Layx 新一代Web弹窗组件。

gzip压缩版仅 13.5kb，非常小巧。

信息

• 原创作者：百小僧
• 开源协议：MIT
• 当前版本：v2.5.4

特性

• 纯原生Javascript实现，不依赖任何第三方框架
• 支持IE10+（含IE10）、Chrome、Firefox、Opera、Edge、Safari等主流浏览器
• 支持多种窗口类型：文本窗口，页面窗口，窗口组，提示窗口，消息窗口，询问窗口，输入窗口，加载窗口、浮动窗口、置顶窗口、倒计时窗口、只读窗口
• 支持窗口最大化、最小化、恢复、置顶、关闭、调试、双击控制及事件监听
• 支持窗口阻隔、窗口闪烁功能
• 支持窗口点击标题获取焦点、点击内容/页面获取焦点
• 支持窗口图标定制、操作按钮定制
• 支持窗口四个方向拖动及方向控制
• 支持窗口八个方向拖曳大小及拖曳方向控制
• 支持窗口自动获取页面标题
• 支持窗口位置记录及恢复
• 支持窗口相互通讯
• 支持窗口设定自动关闭
• 支持窗口外观控制、状态栏、透明度控制
• 支持窗口操作拦截器、可以拦截任何不正常操作
• 支持窗口初始化位置、宽高度、最小化宽高度控制
• 支持窗口加载文字控制
• 支持窗口滚动条智能判断
• 支持窗口最小化统一管理
• 支持窗口位置记录保存
• 支持 ESC 快捷键退出窗口
• 支持自定义皮肤，设置任何您想要的外观
• 支持触摸屏手势拖曳、拖动

使用

第一步：安装

npm i sunshine-ui-layx -S

第二步：引入sunshine-ui-layx

import SunshineUiLayx from "sunshine-ui-layx"

第三步：打开一个窗口试试

SunshineUiLayx.html('str','字符串文本','Hello Layx!');

说明

SunshineUiLayx对象结构如下：
{
  "id": "str",
  "title": "字符串文本",
  "layxWindowId": "layx-str",
  "layxWindow": {},
  "createDate": "2025-08-22T05:35:17.601Z",
  "status": "normal",
  "type": "html",
  "buttons": [],
  "frames": [],
  "useFrameTitle": false,
  "cloneElementContent": true,
  "storeStatus": true,
  "url": "",
  "content": "Hello Layx!",
  "escKey": true,
  "focusToReveal": true,
  "dialogType": "",
  "enableDomainFocus": true,
  "buttonKey": "enter",
  "existFlicker": true,
  "groupCurrentId": null,
  "area": {
    "width": 800,
    "height": 600,
    "minWidth": 200,
    "minHeight": 200,
    "top": 110,
    "left": 573
  },
  "border": true,
  "control": true,
  "isFloatTarget": false,
  "floatTarget": false,
  "floatDirection": "bottom",
  "loadingText": "内容正在加载中，请稍后",
  "focusable": true,
  "isStick": false,
  "zIndex": 10000007,
  "movable": true,
  "moveLimit": {
    "vertical": false,
    "horizontal": false,
    "leftOut": true,
    "rightOut": true,
    "topOut": true,
    "bottomOut": true
  },
  "resizable": true,
  "resizeLimit": {
    "t": false,
    "r": false,
    "b": false,
    "l": false,
    "lt": false,
    "rt": false,
    "lb": false,
    "rb": false
  },
  "stickable": true,
  "minable": true,
  "maxable": true,
  "restorable": true,
  "closable": true,
  "skin": "default",
  "event": {
    "onload": {},
    "onmin": {},
    "onmax": {},
    "onrestore": {},
    "ondestroy": {},
    "onvisual": {},
    "onmove": {},
    "onresize": {},
    "onswitch": {},
    "onstick": {}
  },
  "dragInTopToMax": true
}