mirror of https://github.com/layui/layui
贤心
2 years ago
parent
aeb5075e65
commit
09c7dc8517
@ -1,73 +1,99 @@
|
||||
/**
|
||||
* code
|
||||
* 代码区简易修饰
|
||||
* 代码块简易修饰
|
||||
*/
|
||||
|
||||
layui.define(['util'], function(exports){
|
||||
layui.define(['lay', 'util'], function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$;
|
||||
var util = layui.util;
|
||||
|
||||
exports('code', function(options){
|
||||
var elems = [];
|
||||
var trim = function(str){
|
||||
return $.trim(str).replace(/^\n|\n$/, '');
|
||||
}
|
||||
var ELEM_TITLE = 'layui-code-title';
|
||||
|
||||
options = options || {};
|
||||
options.elem = $(options.elem||'.layui-code');
|
||||
// 默认参数项
|
||||
var config = {
|
||||
elem: '.layui-code', // 元素选择器
|
||||
title: '</>', // 标题
|
||||
about: '', // 右上角信息
|
||||
ln: true // 是否显示行号
|
||||
};
|
||||
|
||||
options.elem.each(function(){
|
||||
elems.push(this);
|
||||
});
|
||||
var trim = function(str){
|
||||
return $.trim(str).replace(/^\n|\n$/, '');
|
||||
};
|
||||
|
||||
// export api
|
||||
exports('code', function(options){
|
||||
var opts = options = $.extend({}, config, options);
|
||||
|
||||
layui.each(elems.reverse(), function(index, item){
|
||||
// 目标元素是否存在
|
||||
options.elem = $(options.elem);
|
||||
if(!options.elem[0]) return;
|
||||
|
||||
// 从内至外渲染
|
||||
layui.each(options.elem.get().reverse(), function(index, item){
|
||||
var othis = $(item);
|
||||
var html = trim(othis.html());
|
||||
var about = othis.attr('lay-about') || options.about || othis.attr('lay-lang') || options.lang || '';
|
||||
|
||||
//是否显示行号
|
||||
var lineNo;
|
||||
if(othis.attr('lay-line-no'))
|
||||
{
|
||||
lineNo = othis.attr('lay-line-no').toLowerCase() === 'true';
|
||||
// 合并属性上的参数，并兼容旧版本属性写法 lay-*
|
||||
var options = $.extend({}, opts, lay.options(item), function(obj){
|
||||
var attrs = ['title', 'height', 'encode', 'skin', 'about'];
|
||||
layui.each(attrs, function(i, attr){
|
||||
var value = othis.attr('lay-'+ attr);
|
||||
if(typeof value === 'string'){
|
||||
obj[attr] = value;
|
||||
}
|
||||
})
|
||||
return obj;
|
||||
}({}));
|
||||
|
||||
// 有序或无序列表
|
||||
var listTag = options.ln ? 'ol' : 'ul';
|
||||
var listElem = $('<'+ listTag +' class="layui-code-'+ listTag +'">');
|
||||
|
||||
// header
|
||||
var headerElem = $('<div class="'+ ELEM_TITLE +'">');
|
||||
|
||||
// 添加组件 clasName
|
||||
othis.addClass('layui-code-view layui-box');
|
||||
|
||||
// 自定义风格
|
||||
if(options.skin){
|
||||
if(options.skin === 'notepad') options.skin = 'dark';
|
||||
othis.addClass('layui-code-'+ options.skin);
|
||||
}
|
||||
lineNo = options.lineNo === undefined ? lineNo === undefined ? false : lineNo : options.lineNo;
|
||||
|
||||
// 转义 HTML 标签
|
||||
if(othis.attr('lay-encode') || options.encode){
|
||||
html = util.escape(html);
|
||||
if(options.encode) html = util.escape(html);
|
||||
html = html.replace(/[\r\t\n]+/g, '</li><li>'); // 转义换行符
|
||||
|
||||
// 生成列表
|
||||
othis.html(listElem.html('<li>' + html + '</li>'));
|
||||
|
||||
// 创建 header
|
||||
if(!othis.children('.'+ ELEM_TITLE)[0]){
|
||||
headerElem.html(options.title + (
|
||||
options.about
|
||||
? '<div class="layui-code-about">' + options.about + '</div>'
|
||||
: ''
|
||||
));
|
||||
othis.prepend(headerElem);
|
||||
}
|
||||
|
||||
var list = lineNo ? 'ol' : 'ul';
|
||||
othis.html('<' + list + ' class="layui-code-' + list + '"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></' + list + '>');
|
||||
// 按行数适配左边距
|
||||
(function(autoIncNums){
|
||||
if(autoIncNums > 0){
|
||||
listElem.css('margin-left', autoIncNums + 'px');
|
||||
}
|
||||
})(Math.floor(listElem.find('li').length/100));
|
||||
|
||||
if(!othis.find('>.layui-code-title')[0]){
|
||||
var aboutWrapper = about === '' ? '' : '<div class="layui-code-about">' + about + '</div>';
|
||||
othis.prepend('<div class="layui-code-title">' + (othis.attr('lay-title') || options.title || '</>') + aboutWrapper + '</div>');
|
||||
}
|
||||
|
||||
var ol = othis.find('>.layui-code-' + list);
|
||||
othis.addClass('layui-box layui-code-view');
|
||||
|
||||
//识别皮肤
|
||||
if(othis.attr('lay-skin') || options.skin){
|
||||
othis.addClass('layui-code-' +(othis.attr('lay-skin') || options.skin));
|
||||
}
|
||||
|
||||
//按行数适配左边距
|
||||
if((ol.find('li').length/100|0) > 0){
|
||||
ol.css('margin-left', (ol.find('li').length/100|0) + 'px');
|
||||
}
|
||||
|
||||
//设置最大高度
|
||||
if(othis.attr('lay-height') || options.height){
|
||||
ol.css('max-height', othis.attr('lay-height') || options.height);
|
||||
// 限制最大高度
|
||||
if(options.height){
|
||||
listElem.css('max-height', options.height);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
}).addcss('modules/code.css?v=2', 'skincodecss');
|
||||
|
||||
}).addcss('modules/code.css?v=3', 'skincodecss');
|
||||
Loading…
Reference in new issue