Merge pull request #1058 from jacksonwj/main

code 组件优化：添加了是否显示行号；优化右上角的 about；更新了 examples/code
2022-06-29 17:40:16 +08:00 · 2022-06-29 17:40:16 +08:00 · aeb5075e65
commit aeb5075e65
parent fc689186db 8e9b793b0e
3 changed files with 81 additions and 27 deletions
--- a/examples/code.html
+++ b/examples/code.html
@ -14,7 +14,27 @@ pre{margin-bottom: 20px;}
 </head>
 <body>

-<pre class="layui-code" lay-title="JavaScript" lay-height="300px">
+<pre class="layui-code" lay-title="JavaScript" lay-line-no="true" lay-height="300px">
+  //路由
+  LAY.fn.router = function(hash){
+    var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
+    var item, param = {
+      dir: []
+    };
+    for(var i = 0; i < hashs.length; i++){
+      item = hashs[i].split('=');
+      /^\w+=/.test(hashs[i]) ? function(){
+        if(item[0] !== 'dir'){
+          param[item[0]] = item[1];
+        }
+      }() : param.dir.push(hashs[i]);
+      item = null;
+    }
+    return param;
+  };
+</pre>
+
+<pre id="line-no">
 //路由
 LAY.fn.router = function(hash){
  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@ -34,7 +54,7 @@ LAY.fn.router = function(hash){
 };
 </pre>

-<pre class="layui-code" lay-skin="notepad">
+<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
 //路由
 LAY.fn.router = function(hash){
  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@ -54,21 +74,28 @@ LAY.fn.router = function(hash){
 };
 </pre>

-<pre class="layui-code">
+<pre class="layui-code" lay-line-no="true">
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
  dir: []
 };
-<pre class="layui-code">
+<pre class="layui-code" lay-title="不显示行号">
 //代码中的代码
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
  dir: []
 };
+<pre class="layui-code" lay-line-no="true">
+  //代码中的代码
+  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
+  var item, param = {
+    dir: []
+  };
+  </pre>
 </pre>
 </pre>

-<pre class="layui-code" lay-skin="notepad">
+<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
 //路由
 LAY.fn.router = function(hash){
  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@ -86,19 +113,19 @@ LAY.fn.router = function(hash){
  }
  return param;
 };
-<pre class="layui-code" lay-skin="notepad">
+<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
 //代码中的代码
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
  dir: []
 };
-<pre class="layui-code" lay-skin="notepad">
+<pre class="layui-code" lay-skin="notepad" lay-title="不显示行号">
 //代码中的代码
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
  dir: []
 };
-<pre class="layui-code" lay-skin="notepad">
+<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
 //代码中的代码
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
@ -110,18 +137,36 @@ var item, param = {
 </pre>


-<pre class="layui-code" lay-encode="true">
+<pre class="layui-code" lay-encode="true" lay-line-no="true">
  <div>
    123
  </div>
 </pre>


+<pre id="about">
+    about
+</pre>
+
+
 <script src="../src/layui.js"></script>
 <script>

 layui.use('code', function(){
  layui.code();
+
+  layui.code({
+    elem: '#line-no',
+    title: 'JavaScript（不显示行号）',
+    lineNo: false,
+    height: '300px'
+  });
+
+  layui.code({
+    elem: '#about',
+    title: '右侧 About',
+    about: 'code'
+  })
 });

 </script>
--- a/src/css/modules/code.css
+++ b/src/css/modules/code.css
@ -11,18 +11,20 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}

 /* 默认风格 */
 .layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
-.layui-code-h3{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
-.layui-code-h3 a{position: absolute; right: 10px; top: 0; color: #999;}
-.layui-code-view .layui-code-ol{position: relative; overflow: auto;}
-.layui-code-view .layui-code-ol li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
-.layui-code-view .layui-code-ol li:first-child{padding-top: 10px;}
-.layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;}
+.layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
+.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #999;}
+.layui-code-view > .layui-code-ol, .layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
+.layui-code-view > .layui-code-ol > li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
+.layui-code-view > .layui-code-ol > li:first-child, .layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
+.layui-code-view > .layui-code-ol > li:last-child, .layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
+.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px; list-style-type: none; *list-style-type: none; background-color: #fff;}
 .layui-code-view pre{margin: 0;}

 /* notepadd++ 风格 */
 .layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
-.layui-code-notepad .layui-code-h3{border-bottom: none;}
-.layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;}
+.layui-code-notepad > .layui-code-title{border-bottom: none;}
+.layui-code-notepad > .layui-code-ol > li, .layui-code-notepad > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
+.layui-code-notepad > .layui-code-ul > li{margin-left: 6px;}

 /* 代码预览 */
 .layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;}
--- a/src/modules/code.js
+++ b/src/modules/code.js
@ -17,8 +17,7 @@ layui.define(['util'], function(exports){

    options = options || {};
    options.elem = $(options.elem||'.layui-code');
-    options.lang = 'lang' in options ? options.lang : 'code';
-    
+
    options.elem.each(function(){
      elems.push(this);
    });
@ -26,22 +25,30 @@ layui.define(['util'], function(exports){
    layui.each(elems.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 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';
+      }
+      lineNo = options.lineNo === undefined ? lineNo === undefined ? false : lineNo : options.lineNo;
+
      // 转义 HTML 标签
      if(othis.attr('lay-encode') || options.encode){
        html = util.escape(html);
      }
      
-      othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>')
+      var list = lineNo ? 'ol' : 'ul';
+      othis.html('<' + list + ' class="layui-code-' + list + '"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></' + list + '>');
      
-      if(!othis.find('>.layui-code-h3')[0]){
-        othis.prepend('<h3 class="layui-code-h3">'+ (othis.attr('lay-title')||options.title||'&lt;/&gt;') + '<a href="javascript:;">'+ about +'</a>' + '</h3>');
+      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 || '&lt;/&gt;') + aboutWrapper + '</div>');
      }
      
-      var ol = othis.find('>.layui-code-ol');
+      var ol = othis.find('>.layui-code-' + list);
      othis.addClass('layui-box layui-code-view');
      
      //识别皮肤