mirror of
https://github.com/layui/layui.git
synced 2026-02-09 10:19:20 +08:00
5ab142153b
* style: 统一代码格式，修复ESLint错误 - 为所有模块添加尾随逗号 - 修复缺少分号的语句 - 统一对象字面量格式 - 添加ESLint配置文件和文档 - 更新package.json中的脚本和依赖项 * build: 添加 ESLint 配置文件以支持 IE9+ 兼容性 * refactor(upload): 使用已缓存的hint实例替换直接调用 优化代码性能，避免重复实例化hint对象，直接使用模块顶部已缓存的实例 * chore: 更新.gitignore文件以包含更多忽略规则 添加了更多常见的临时文件、编辑器文件、构建输出目录和运行时数据的忽略规则，使项目更加整洁并避免不必要的文件被提交到版本控制中 * fix(lay.js): 修复passive事件监听器选项的返回值 确保getter函数返回true以正确支持passive事件监听 * refactor(form): 移除表单模块中的冗余代码 删除表单模块中无实际作用的冗余代码行，这些代码只是将属性重新赋值为自身，没有实际功能意义 * fix(form): 修复复选框状态处理逻辑 确保复选框的 indeterminate 和 checked 状态被正确转换为布尔值，并优化事件调用时的空格格式 * feat(eslint): 完善 ESLint 配置并添加 VSCode 支持 添加 VSCode 配置文件以支持 ESLint 自动修复和格式化 更新 ESLint 配置，增强代码风格和兼容性规则 修复 package.json 中的脚本拼写错误并添加 format 脚本 调整 .gitignore 以允许特定 VSCode 配置文件 * style: 统一代码中的引号格式并修复缩进问题 统一将双引号改为单引号，修复部分代码缩进不一致的问题，提升代码风格一致性 * docs: 删除过时的ESLint配置文档文件 * build: 采用 prettier 作为代码格式化工具，剔除 ESLint 格式化部分 * chore: 剔除 .vscode/ 配置，保持编辑器中立 * build: 修改 ESLint 为「扁平化配置」方式，避免大量参数堆砌 * chore: 格式化代码 * ci: 添加 git hooks 和 CI 环节把关代码风格 * ci: update * ci: update * test: 测试 ci format * ci: 改用 husky 作为 git hooks，与 Layui 3 保持一致 经测试，simple-git-hooks 生成的 pre-commit 默认为 sh，在 Windows 不兼容（必须用 git bash 执行 commits） * build: 新增 CI 和生产环境跳过 husky 安装的判断 * build: 剔除重复配置 * build: 优化 eslint 配置 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
421 lines
11 KiB
HTML
421 lines
11 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||
/>
|
||
<title>Code blocks adorn - Layui</title>
|
||
<link href="../src/css/layui.css" rel="stylesheet" />
|
||
<style>
|
||
pre {
|
||
margin: 16px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="layui-padding-3">
|
||
<div class="layui-text">
|
||
<h2>代码高亮</h2>
|
||
</div>
|
||
<pre id="test" class="layui-test">
|
||
<textarea class="layui-hide">
|
||
<div class="layui-btn-container">
|
||
<button type="button" class="layui-btn">默认按钮</button>
|
||
</div>
|
||
|
||
<p class="layui-padding-3">
|
||
AaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA
|
||
</p>
|
||
|
||
<div class="layui-btn-container">
|
||
<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
|
||
</div>
|
||
<script type="text/html">
|
||
<h3>{{= d.title }}</h3>
|
||
<ul>
|
||
{{# layui.each(d.list, function(index, item){ }}
|
||
<li>
|
||
<span>{{= item.modname }}</span>
|
||
<span>{{= item.alias }}：</span>
|
||
<span>{{= item.site || '' }}</span>
|
||
</li>
|
||
{{# }); }}
|
||
<p>{{# if(d.list.length === 0){ }}
|
||
无数据
|
||
{{# } }}</p>
|
||
</ul>
|
||
</script>
|
||
<script>
|
||
layui.use(function () {
|
||
var layer = layui.layer;
|
||
const a = '1'
|
||
function aa(a, b) {
|
||
return '11'
|
||
}
|
||
layer.msg(layui.v)
|
||
})
|
||
</script>
|
||
</textarea>
|
||
</pre>
|
||
|
||
<div class="layui-text">
|
||
<h2>行高亮和聚焦</h2>
|
||
</div>
|
||
<pre
|
||
class="layui-code"
|
||
lay-options="{
|
||
highlightLine: {
|
||
hl: {
|
||
range: '1,3-5,8', // 指定行高亮范围 '1,3,4,5,8'
|
||
comment: true, // 是否解析行中的高亮注释
|
||
}
|
||
}
|
||
}"
|
||
>
|
||
<textarea class="layui-hide">
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Quick Start - Layui</title>
|
||
<link href="//unpkg.com/layui@2.11.4/dist/css/layui.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- HTML Content -->
|
||
<script src="//unpkg.com/layui@2.11.4/dist/layui.js"></script>
|
||
<script>
|
||
// Usage // [!code focus:6]
|
||
layui.use(function () {
|
||
var layer = layui.layer;
|
||
// Welcome
|
||
layer.msg('Hello World', { icon: 6 });
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
</textarea>
|
||
</pre>
|
||
|
||
<div class="layui-text">
|
||
<h2>diff</h2>
|
||
</div>
|
||
<pre
|
||
class="layui-code"
|
||
lay-options="{
|
||
highlightLine: {
|
||
hl:{range: '38-40'},
|
||
'++':{comment: true},
|
||
'--':{comment: true}
|
||
}
|
||
}"
|
||
>
|
||
<textarea class="layui-hide">
|
||
<template id="test">
|
||
<p>转义输出：{{= d.desc }}</p>
|
||
<p>原文输出：{{- d.desc }}</p>
|
||
{{# 注释标签 - 仅在模板中显示，不在视图中输出 }} // [!code ++]
|
||
<p>{{! 忽略标签，可显示原始标签：
|
||
{{# let a = 0; }} // [!code --]
|
||
{{ let a = 0; }} // [!code ++]
|
||
!}}
|
||
</p>
|
||
<p>
|
||
条件语句：
|
||
{{= d.list.length ? d.title : '' }}
|
||
{{# if(d.title){}} - #AAAA{{='A'}}{{# } }} //[!code --]
|
||
{{ if(d.title){}} - #AAAA{{='A'}}{{ } }} //[!code ++]
|
||
</p>
|
||
<p>循环语句：</p>
|
||
<ul>
|
||
{{# d.list.forEach(function(item) { }} //[!code --]
|
||
{{ d.list.forEach(function(item) { }} //[!code ++]
|
||
</p>
|
||
<li>
|
||
<span>{{= item.title }}</span>
|
||
<span>{{= item.name }}</span>
|
||
</li>
|
||
{{# }); }} //[!code --]
|
||
{{ }); }} //[!code ++]
|
||
</ul>
|
||
{{# if (d.list.length === 0) { }} //[!code --]
|
||
{{ if (d.list.length === 0) { }} //[!code ++]
|
||
无数据
|
||
{{#} }} //[!code --]
|
||
{{} }} //[!code ++]
|
||
</template>
|
||
<script>
|
||
layui.use(function () {
|
||
var laytpl = layui.laytpl;
|
||
|
||
laytpl.config({
|
||
tagStyle: 'modern'
|
||
})
|
||
})
|
||
</script>
|
||
</textarea>
|
||
</pre>
|
||
|
||
<h2>普通示例</h2>
|
||
|
||
<pre><code class="layui-code" lay-options="{header: true}">
|
||
code line
|
||
code line
|
||
code line
|
||
</code></pre>
|
||
|
||
<pre
|
||
class="layui-code"
|
||
lay-options="{style: 'height: 300px'}"
|
||
id="ID-multi-line"
|
||
></pre>
|
||
<script type="module">
|
||
// 生成批量行，测试行结构
|
||
const elem = document.getElementById('ID-multi-line');
|
||
elem.innerHTML = Array(1001)
|
||
.fill()
|
||
.map((v) => {
|
||
return Math.random().toString(32).substring(2).toUpperCase();
|
||
})
|
||
.join('\n');
|
||
</script>
|
||
|
||
<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
</pre
|
||
>
|
||
|
||
<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
</pre
|
||
>
|
||
|
||
<pre class="layui-code" lay-options="{title: '嵌套', encode: false}">
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
<pre class="layui-code" lay-options="{ln: false, encode: false}">
|
||
code line
|
||
code line
|
||
code line
|
||
<pre class="layui-code">
|
||
code line
|
||
code line
|
||
code line
|
||
</pre>
|
||
</pre>
|
||
</pre>
|
||
|
||
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
<pre class="layui-code" lay-options="{skin: 'dark', ln: false, encode: false}">
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
code line
|
||
</pre>
|
||
</pre>
|
||
</pre>
|
||
|
||
<pre class="layui-code" lay-options="{encode: true}">
|
||
<div>
|
||
123
|
||
</div>
|
||
</pre>
|
||
|
||
<pre class="layui-code" lay-options="{about: 'AboutInfo'}">
|
||
About
|
||
</pre
|
||
>
|
||
|
||
<!-- 第三方语法高亮库 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
||
|
||
<!-- layui -->
|
||
<script src="../src/layui.js"></script>
|
||
<script>
|
||
layui.use(['code', 'dropdown'], function () {
|
||
var dropdown = layui.dropdown;
|
||
var layer = layui.layer;
|
||
var $ = layui.$;
|
||
|
||
// return;
|
||
|
||
// 高亮主题 css 库
|
||
var themeData = $.map(
|
||
[
|
||
// hljs 主题库
|
||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/vs2015.min.css',
|
||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/vs.min.css',
|
||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css',
|
||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css',
|
||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/google-dark.min.css',
|
||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/google-light.min.css',
|
||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai-sublime.min.css',
|
||
'-',
|
||
// prism 主题库
|
||
'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css',
|
||
'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'
|
||
],
|
||
function (v, index) {
|
||
return {
|
||
title: v,
|
||
link: v,
|
||
highlighter: v.indexOf('prism') === -1 ? 'hljs' : 'prism',
|
||
type: v === '-' ? '-' : 'normal'
|
||
};
|
||
}
|
||
);
|
||
|
||
// 创建实例
|
||
var codeInst = layui.code({
|
||
elem: '#test',
|
||
preview: true,
|
||
codeStyle: 'height: 510px;',
|
||
previewStyle: 'word-wrap: break-word;',
|
||
// theme: 'dark',
|
||
// header: true,
|
||
// wordWrap: false, // 是否自动换行
|
||
lang: 'html',
|
||
highlighter: 'hljs',
|
||
// code: '<div class="layui-btn">初始按钮</div>',
|
||
/*codeRender: function (code, opts) { // 初始高亮
|
||
layui.link(themeData[1].link, 'layui-code-theme');
|
||
return hljs.highlight(code, {language: opts.lang}).value;
|
||
},*/
|
||
tools: [
|
||
'full',
|
||
'window',
|
||
{
|
||
title: ['文字换行'],
|
||
type: 'form',
|
||
event: function (obj) {
|
||
dropdown.render({
|
||
elem: obj.elem,
|
||
data: [
|
||
{ title: '自动换行', wordWrap: true },
|
||
{ title: '不自动换行', wordWrap: false }
|
||
],
|
||
show: true,
|
||
click: function (data, othis) {
|
||
codeInst.reload({
|
||
wordWrap: data.wordWrap
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
{
|
||
title: ['切换高亮主题'],
|
||
type: 'theme',
|
||
event: function (obj) {
|
||
dropdown.render({
|
||
elem: obj.elem,
|
||
data: themeData,
|
||
show: true,
|
||
click: function (data, othis) {
|
||
$('#layuicss-layui-code-theme').remove();
|
||
layui.link(data.link, 'layui-code-theme');
|
||
|
||
// 若高亮器有变化，则重载
|
||
if (data.highlighter !== codeInst.config.highlighter) {
|
||
var highlighter = {
|
||
hljs: function (code, opts) {
|
||
return hljs.highlight(code, {
|
||
language: opts.lang
|
||
}).value;
|
||
},
|
||
prism: function (code, opts) {
|
||
return Prism.highlight(
|
||
code,
|
||
Prism.languages[opts.lang],
|
||
opts.lang
|
||
);
|
||
}
|
||
};
|
||
// 重载
|
||
codeInst.reload({
|
||
highlighter: data.highlighter,
|
||
codeRender: function (code, opts) {
|
||
return highlighter[data.highlighter](code, opts);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
{
|
||
title: ['编辑'],
|
||
type: 'edit',
|
||
event: function (obj) {
|
||
layer.prompt(
|
||
{
|
||
formType: 2,
|
||
value: obj.rawCode,
|
||
title: '编辑代码',
|
||
area: ['800px', '500px'],
|
||
maxlength: 9999999999
|
||
},
|
||
function (value, index) {
|
||
layer.close(index);
|
||
// 重载 code
|
||
codeInst.reloadCode({
|
||
code: value
|
||
});
|
||
}
|
||
);
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
// 语法高亮重载
|
||
codeInst.reloadCode({
|
||
codeRender: function (code, opts) {
|
||
layui.link(themeData[1].link, 'layui-code-theme');
|
||
return hljs.highlight(code, { language: opts.lang }).value;
|
||
}
|
||
});
|
||
|
||
// 通用实例，根据元素属性定制化参数
|
||
layui.code({
|
||
elem: '.layui-code',
|
||
tools: ['tips'],
|
||
langMarker: true,
|
||
lang: 'html'
|
||
// preview: true
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|