floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新 code 测试用例

Browse Source
This commit is contained in:
贤心 2023-09-05 16:29:38 +08:00
parent 67f6819823
commit 2cf39284a1
1 changed files with 74 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
examples/code.html
View File

@ -13,27 +13,58 @@
</head> </head>
<body> <body>
<pre class="layui-code" lay-height="300px"> <pre id="test">
// 在里面存放任意的文本内容 <textarea class="layui-hide">
code line <div class="layui-btn-container">
code line <button type="button" class="layui-btn">默认按钮</button>
code line </div>
code line
code line <div class="layui-btn-container">
code line <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
code line </div>
code line <script type="text/html">
code line <h3>{{= d.title }}</h3>
code line <ul>
code line {{# layui.each(d.list, function(index, item){ }}
code line <li>
code line <span>{{= item.modname }}</span>
code line <span>{{= item.alias }}：</span>
code line <span>{{= item.site || '' }}</span>
code line </li>
code line {{# }); }}
<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> </pre>
<pre><code class="layui-code">
code line
code line
code line
</code></pre>
<pre class="layui-code" lay-options="{height: 300}" 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}"> <pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
code line code line
code line code line
@ -105,29 +136,37 @@ code line
About About
</pre> </pre>
<pre id="custom1">
custom more about
</pre>
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
<script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
<script> <script>
layui.use('code', function(){ layui.use('code', function(){
// return;
layui.link('https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css');
var codeInst = layui.code({
elem: '#test',
preview: true,
codeStyle: 'height: 700px;',
// theme: 'dark',
// header: true,
lang: 'html',
highlighter: "hljs",
codeRender: function (code, opts) {
return hljs.highlight(code, {language: opts.lang}).value;
}
});
// 重载
/*codeInst.reload({
codeRender: function () {
return hljs.highlight(code, {language: opts.lang}).value;
}
});*/
// 通用实例，根据元素属性定制化参数 // 通用实例，根据元素属性定制化参数
layui.code({ layui.code({
//about: 'code' // 右上角默认显示 code
tools: ['tips'], tools: ['tips'],
preview: true langMarker: true,
// preview: true
}); });
// custom more about
layui.code({
elem: '#custom1',
about: [
'<a href="javascript:;">复制</a>',
'<a href="about:blank" target="_blank">跳转</a>'
].join('')
})
}); });
</script> </script>
</body> </body>