mirror of https://github.com/layui/layui
更新 code 用例
parent
359c6a19f1
commit
d17e68ab54
|
@ -136,16 +136,20 @@ code line
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="layui-code" lay-options="{about: 'About info'}">
|
<pre class="layui-code" lay-options="{about: 'AboutInfo'}">
|
||||||
About
|
About
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="../src/layui.js"></script>
|
<!-- 第三方语法高亮库 -->
|
||||||
<script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
|
<script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
|
||||||
<script src="https://cdn.staticfile.org/prism/1.29.0/prism.min.js"></script>
|
<script src="https://cdn.staticfile.org/prism/1.29.0/prism.min.js"></script>
|
||||||
|
|
||||||
|
<!-- layui -->
|
||||||
|
<script src="../src/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use(['code', 'dropdown'], function(){
|
layui.use(['code', 'dropdown'], function(){
|
||||||
var dropdown = layui.dropdown;
|
var dropdown = layui.dropdown;
|
||||||
|
var layer = layui.layer;
|
||||||
var $ = layui.$;
|
var $ = layui.$;
|
||||||
|
|
||||||
// return;
|
// return;
|
||||||
|
@ -173,6 +177,7 @@ layui.use(['code', 'dropdown'], function(){
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 创建实例
|
||||||
var codeInst = layui.code({
|
var codeInst = layui.code({
|
||||||
elem: '#test',
|
elem: '#test',
|
||||||
preview: true,
|
preview: true,
|
||||||
|
@ -183,12 +188,14 @@ layui.use(['code', 'dropdown'], function(){
|
||||||
// wordWrap: false, // 是否自动换行
|
// wordWrap: false, // 是否自动换行
|
||||||
lang: 'html',
|
lang: 'html',
|
||||||
highlighter: "hljs",
|
highlighter: "hljs",
|
||||||
/*codeRender: function (code, opts) {
|
// code: '<div class="layui-btn">初始按钮</div>',
|
||||||
|
/*codeRender: function (code, opts) { // 初始高亮
|
||||||
layui.link(themeData[1].link, 'layui-code-theme');
|
layui.link(themeData[1].link, 'layui-code-theme');
|
||||||
return hljs.highlight(code, {language: opts.lang}).value;
|
return hljs.highlight(code, {language: opts.lang}).value;
|
||||||
},*/
|
},*/
|
||||||
tools: [
|
tools: [
|
||||||
'full',
|
'full',
|
||||||
|
'window',
|
||||||
{
|
{
|
||||||
title: ['文字换行'],
|
title: ['文字换行'],
|
||||||
type: 'form',
|
type: 'form',
|
||||||
|
@ -244,19 +251,36 @@ layui.use(['code', 'dropdown'], function(){
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
// 仅重载 code
|
// 语法高亮重载
|
||||||
layui.debounce(function() {
|
|
||||||
codeInst.reloadCode({
|
codeInst.reloadCode({
|
||||||
codeRender: function(code, opts) {
|
codeRender: function(code, opts) {
|
||||||
layui.link(themeData[1].link, 'layui-code-theme');
|
layui.link(themeData[1].link, 'layui-code-theme');
|
||||||
return hljs.highlight(code, {language: opts.lang}).value;
|
return hljs.highlight(code, {language: opts.lang}).value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, 300)();
|
|
||||||
|
|
||||||
|
|
||||||
// 通用实例,根据元素属性定制化参数
|
// 通用实例,根据元素属性定制化参数
|
||||||
|
|
Loading…
Reference in New Issue