1 Star 21 Fork 3

快乐两小时/Layui App Exp

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
1年前
3个月前
3个月前
7个月前
7个月前
Loading...
README
MIT

layui app exp 单 页 面 应 用 拓 展

🎏 layui 单 页 面 应 用 拓 展

layui框架:https://layui.dev/

appjs拓展:http://layui.app.kllxs.top/

使用

index.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layui单页面应用</title>
    <!-- layui -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script>
        // 配置
        layui.config({
            base: "model/", // 模块路径
        }).use(["app"], function () {
            let app = layui.app

            app.init({
                main: "main", //入口标签
                component: "/component",// 组件
                middleware: [ // 中间件
                    "/middleware/test.js"
                ],
                route: "/route.json" // 路由;url/obj
            })

        })
    </script>
</head>

<body>
    <!-- 入口标签 -->
    <main></main>
</body>

</html>

基础

目录结构

www web部署目录
├─component     组件目录
│
├─layui         layui源码
│
├─middleware    中间件目录
│
├─model         layui模块目录
│  ├─ ...
│  └─app.js     app拓展源码文件
│
├─page          路由文件目录
│
├─.gitignore    git规则
├─index.html    入口文件
├─LICENSE.txt   授权说明
├─README.md     自述文件
└─route.json    路由文件

配置

// 配置
layui.config({
    base: "model/", // 模块目录路径 app.js
}).use(["app"], function () {
    // app 
    let app = layui.app
    // 初始化
    app.init({
        main: "main", //入口标签
        component: "/component",// 组件
        middleware: [ // 中间件
            "/middleware/test.js"
        ],
        route: "/route.json" // 路由;url/obj
    })

})

路由

{
    "home": { // 路由名 你可以认为是 id 名
        "page": "/page/home.html", //路由页面
        "path": [ // 匹配
            "/",
            "/index",
            "/index.html"
        ]
    },
    "about": {
        "page": "/page/about.html",
        "path": [
            "/about",
            "/about.html"
        ]
    },
    "order": {
        "page": "/page/order.html",
        "path": [
            "/order/{id}" //参数匹配 id ;如:/order/12, {id:"12"}
        ]
    },
    "error": { // error路由名为错误路由,可以不填
        "page": "/page/404.html", // 错误页面
        "path": [] // 为空数组即可
    }
    // 以此类推
}

页面模板

<template>
    <!-- 必须template标签包裹的任意内容 -->
    <script>
        
        console.log(shadow, route, onDestroy)

        // 声明周期->销毁函数
        onDestroy(function(){
            console.log("我已经销毁了")
        })

    </script>
</template>

模板内置方法

方法 类型 说明
shadow DOM 当前页面的影子dom对象
route obj 当前页面的请求信息参数
onDestroy function 生命周期;页面卸载函数

组件

  • 使用方法layui.app.component(select,DOM = document, path = "")
参数 说明 类型 默认
select css 选择器 string 必需
DOM dom的位置,在组件内可以填入shadow dom document
path 组件位置
配置中设置了组件文件会进行拼接
"/component/"+path+".html" ,不填则path=select
string ""

模板

属性改变模板自动刷新,不建议组件内加定时器

<!-- 必须template标签包裹的任意内容 -->
<template>
    hello world
    <!-- 支持原生插槽 -->
    <slot name="my-slot">is slot</slot>
    <script>
        console.log(DOM,shadow,attrs)
    </script>
</template>

模板内置方法

方法 类型 说明
DOM DOM 当前组件dom对象
shadow DOM 当前组件的影子dom对象
attrs obj 当前组件的属性对象

中间件

  • 使用方法middleware.use(callback)
middleware.use((input) => {
    // 请求的路由信息
    console.log(input)
    // 返回true则通过否则不通过
    return true
})

jQuery 的使用

<template>
    
    <p id="my-p"> jQuery获取P的 </p>
    
    <script>
        layui.use("jquery",function(){
            let $ = layui.$

            // jQuery获取p标签,shadow是当前模板的 影子 dom 
            let my_p = $("#my-p",shadow)
            console.log(my_p)
        })
    </script>
</template>

暂时就这么点...

MIT License Copyright (c) 2024 快乐两小时 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

🍃layui 单 页 面 应 用 ,响 应 式 数 据 和 生 命 周期 展开 收起
JavaScript 等 2 种语言
MIT
取消

发行版 (3)

全部
4个月前

贡献者 (2)

全部

近期动态

3个月前推送了新的提交到 master 分支,b54d98a...5faa07d
3个月前推送了新的提交到 master 分支,f05b023...b54d98a
3个月前推送了新的提交到 master 分支,55bf199...f05b023
4个月前推送了新的提交到 master 分支,233974e...55bf199
4个月前推送了新的提交到 master 分支,c42e909...233974e
加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/kllxs_admin/layui-app-exp.git
git@gitee.com:kllxs_admin/layui-app-exp.git
kllxs_admin
layui-app-exp
Layui App Exp
master

搜索帮助