[文档] 修复 layui 的 tpl 写法与 vue 渲染冲突的问题的

yelog · Jul 19, 2020 · 277186b · 277186b
1 parent 8faca81
commit 277186b
Show file tree

Hide file tree

Showing 57 changed files with 311 additions and 197 deletions.
diff --git a/build/md-loader/index.js b/build/md-loader/index.js
@@ -1,6 +1,7 @@
 const {
   stripScript,
   stripTemplate,
+  stripTpl,
   genInlineComponentText
 } = require('./util')
 const md = require('./config')
@@ -26,7 +27,8 @@ module.exports = function(source) {
     const commentContent = content.slice(commentStart + startTagLen, commentEnd)
     const html = stripTemplate(commentContent)
     const script = stripScript(commentContent)
-    const demoComponentContent = genInlineComponentText(html, script)
+    const tpl = stripTpl(commentContent)
+    const demoComponentContent = genInlineComponentText(html, script, tpl)
     const demoComponentName = `element-demo${id}`
     output.push(`<template slot="source"><${demoComponentName} /></template>`)
     componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},`

diff --git a/build/md-loader/util.js b/build/md-loader/util.js
@@ -1,5 +1,6 @@
 const { compileTemplate } = require('@vue/component-compiler-utils')
 const compiler = require('vue-template-compiler')
+var escape = require('escape-html');
 
 function stripScript(content) {
   const result = content.match(/<(script)>([\s\S]+)<\/\1>/)
@@ -20,14 +21,33 @@ function stripTemplate(content) {
   return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim()
 }
 
+// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
+function stripTpl(content) {
+  content = content.trim()
+  if (!content) {
+    return content
+  }
+  const matches = content.match(/<(script)[\s\S]+?<\/\1>/g, '')
+  if (matches && matches.length>0) {
+    const result = []
+    for (let i = 0; i < matches.length; i++) {
+      if (matches[i].indexOf('text/html') !== -1) {
+        result.push(matches[i])
+      }
+    }
+    return result.join('')
+  }
+  return ''
+}
+
 function pad(source) {
   return source
     .split(/\r?\n/)
     .map(line => `  ${line}`)
     .join('\n')
 }
 
-function genInlineComponentText(template, script) {
+function genInlineComponentText(template, script, tpl) {
   // https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46
   const finalOptions = {
     source: `<div>${template}</div>`,
@@ -57,6 +77,8 @@ function genInlineComponentText(template, script) {
   if (script) {
     script = `export default {
       mounted () {
+        var tpl = '${escape(tpl.replace(/\n/g, '--enter--'))}'
+          layui.$('#commonTpl').append(HTMLDecode(tpl.replace(/--enter--/g, '\\n')))
         ${script}
       }
     }`
@@ -80,5 +102,6 @@ module.exports = {
   stripScript,
   stripStyle,
   stripTemplate,
+  stripTpl,
   genInlineComponentText
 }
diff --git a/docs/10.js b/docs/10.js
diff --git a/docs/11.js b/docs/11.js
diff --git a/docs/12.js b/docs/12.js
diff --git a/docs/13.js b/docs/13.js
diff --git a/docs/14.js b/docs/14.js
diff --git a/docs/15.js b/docs/15.js
diff --git a/docs/16.js b/docs/16.js
diff --git a/docs/17.js b/docs/17.js
diff --git a/docs/18.js b/docs/18.js
diff --git a/docs/19.js b/docs/19.js
diff --git a/docs/20.js b/docs/20.js
diff --git a/docs/21.js b/docs/21.js
diff --git a/docs/22.js b/docs/22.js
diff --git a/docs/23.js b/docs/23.js
diff --git a/docs/24.js b/docs/24.js
diff --git a/docs/25.js b/docs/25.js
diff --git a/docs/26.js b/docs/26.js
diff --git a/docs/27.js b/docs/27.js
diff --git a/docs/28.js b/docs/28.js
diff --git a/docs/29.js b/docs/29.js
diff --git a/docs/30.js b/docs/30.js
diff --git a/docs/31.js b/docs/31.js
diff --git a/docs/32.js b/docs/32.js
diff --git a/docs/33.js b/docs/33.js
diff --git a/docs/34.js b/docs/34.js
diff --git a/docs/35.js b/docs/35.js
diff --git a/docs/36.js b/docs/36.js
diff --git a/docs/37.js b/docs/37.js
diff --git a/docs/38.js b/docs/38.js
diff --git a/docs/39.js b/docs/39.js
diff --git a/docs/4.js b/docs/4.js
diff --git a/docs/40.js b/docs/40.js
diff --git a/docs/41.js b/docs/41.js
diff --git a/docs/42.js b/docs/42.js
diff --git a/docs/43.js b/docs/43.js
diff --git a/docs/44.js b/docs/44.js
diff --git a/docs/45.js b/docs/45.js
diff --git a/docs/46.js b/docs/46.js
diff --git a/docs/47.js b/docs/47.js
diff --git a/docs/5.js b/docs/5.js
diff --git a/docs/6.js b/docs/6.js
diff --git a/docs/7.js b/docs/7.js
diff --git a/docs/8.js b/docs/8.js
diff --git a/docs/9.js b/docs/9.js
diff --git a/docs/app.d5f576d.js → docs/app.233ed18.js b/docs/app.d5f576d.js → docs/app.233ed18.js
diff --git a/docs/index.html b/docs/index.html
@@ -69,13 +69,89 @@
         height: 100%;
         border: none;
       }
+      #commonTpl {
+        display: none
+      }
     </style>
   <link rel="shortcut icon" href="favicon.ico"></head>
   <body>
+  <script src="layui/layui.js"></script>
     <script>
       if (!window.Promise) {
         document.write('<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
       }
+      // 自定义模块
+        layui.config({
+            base: 'ext/',   // 模块目录
+            version: 'v1.5.15'
+        }).extend({                         // 模块别名
+            soulTable: 'soulTable'
+        });
+        var $, layer;
+        layui.use(['jquery', 'layer'], function() {
+          $ = layui.$;
+          layer = layui.layer;
+          $.ajax({
+                url: 'runjs.html',
+                dataType: 'html',
+                success: function(res) {
+                    $('#runjs textarea').val(res)
+                }
+            })
+            $('#LAY_demo_run').on('click', function() {
+                var ifr = document.getElementById("runjsDemo");
+                var code = window.editor.getValue();
+                ifr.contentWindow.document.body.innerHTML = "";
+                ifr.contentWindow.document.write(code);
+            })
+
+        // 在线运行 resize
+         var dict = {}, _BODY=$('body'), _DOC = $(document), _HANDLE = $('.resize-handle'), _COVER = $('.resize-cover');
+         $('.editArea').on('mousemove', function(e){
+               var othis = $(this)
+               ,oLeft = othis.offset().left
+               ,pLeft = e.clientX - oLeft;
+               dict.allowResize = othis.width() - pLeft <= 15; //是否处于拖拽允许区域
+               _BODY.css('cursor', (dict.allowResize ? 'col-resize' : ''));
+               _HANDLE.css('display', (dict.allowResize ? 'block' : 'none'))
+
+             }).on('mouseleave', function(){
+               var othis = $(this);
+               if(dict.resizeStart) return;
+               _BODY.css('cursor', '');
+               _HANDLE.hide();
+               _COVER.hide();
+             }).on('mousedown', function(e){
+               var othis = $(this);
+               if(dict.allowResize){
+                 e.preventDefault();
+                 _COVER.show();
+                 _HANDLE.show();
+                 dict.resizeStart = true; //开始拖拽
+                 dict.offset = [e.clientX, e.clientY]; //记录初始坐标
+                 dict.ruleWidth = othis.width()
+                 dict.othis = othis
+               }
+             });
+
+             //拖拽中
+             _DOC.on('mousemove', function(e){
+               if(dict.resizeStart){
+                 e.preventDefault();
+                 if(dict.othis){
+                   var setWidth = dict.ruleWidth + e.clientX - dict.offset[0];
+                   dict.othis.css('width', setWidth + 'px');
+                 }
+               }
+             }).on('mouseup', function(e){
+               if(dict.resizeStart){
+                 dict = {};
+                 _BODY.css('cursor', '');
+                 _HANDLE.hide();
+                 _COVER.hide();
+               }
+             });
+      })
     </script>
     <div id="app"></div>
      <div id="runjsParent">
@@ -99,87 +175,23 @@
         </div>
       </div>
     </div>
-    <script src="layui/layui.js"></script>
+    <div id="commonTpl"></div>
+
     <script src="codemirror/codemirror.js"></script>
     <script src="codemirror/selection-pointer.js"></script>
     <script src="codemirror/xml.js"></script>
     <script src="codemirror/javascript.js"></script>
     <script src="codemirror/css.js"></script>
     <script src="codemirror/htmlmixed.js"></script>
-  <script type="text/javascript" src="app.d5f576d.js"></script></body>
+  <script type="text/javascript" src="app.233ed18.js"></script></body>
   <script>
-  // 自定义模块
-      layui.config({
-          base: 'ext/',   // 模块目录
-          version: 'v1.5.15'
-      }).extend({                         // 模块别名
-          soulTable: 'soulTable'
-      });
-      var $, layer;
-      layui.use(['jquery', 'layer'], function() {
-        $ = layui.$;
-        layer = layui.layer;
-        $.ajax({
-            url: 'runjs.html',
-            dataType: 'html',
-            success: function(res) {
-                $('#runjs textarea').val(res)
-            }
-        })
-        $('#LAY_demo_run').on('click', function() {
-            var ifr = document.getElementById("runjsDemo");
-            var code = window.editor.getValue();
-            ifr.contentWindow.document.body.innerHTML = "";
-            ifr.contentWindow.document.write(code);
-        })
-
-        // 在线运行 resize
-             var dict = {}, _BODY=$('body'), _DOC = $(document), _HANDLE = $('.resize-handle'), _COVER = $('.resize-cover');
-             $('.editArea').on('mousemove', function(e){
-                   var othis = $(this)
-                   ,oLeft = othis.offset().left
-                   ,pLeft = e.clientX - oLeft;
-                   dict.allowResize = othis.width() - pLeft <= 15; //是否处于拖拽允许区域
-                   _BODY.css('cursor', (dict.allowResize ? 'col-resize' : ''));
-                   _HANDLE.css('display', (dict.allowResize ? 'block' : 'none'))
-
-                 }).on('mouseleave', function(){
-                   var othis = $(this);
-                   if(dict.resizeStart) return;
-                   _BODY.css('cursor', '');
-                   _HANDLE.hide();
-                   _COVER.hide();
-                 }).on('mousedown', function(e){
-                   var othis = $(this);
-                   if(dict.allowResize){
-                     e.preventDefault();
-                     _COVER.show();
-                     _HANDLE.show();
-                     dict.resizeStart = true; //开始拖拽
-                     dict.offset = [e.clientX, e.clientY]; //记录初始坐标
-                     dict.ruleWidth = othis.width()
-                     dict.othis = othis
-                   }
-                 });
-
-                 //拖拽中
-                 _DOC.on('mousemove', function(e){
-                   if(dict.resizeStart){
-                     e.preventDefault();
-                     if(dict.othis){
-                       var setWidth = dict.ruleWidth + e.clientX - dict.offset[0];
-                       dict.othis.css('width', setWidth + 'px');
-                     }
-                   }
-                 }).on('mouseup', function(e){
-                   if(dict.resizeStart){
-                     dict = {};
-                     _BODY.css('cursor', '');
-                     _HANDLE.hide();
-                     _COVER.hide();
-                   }
-                 });
-     })
+     function HTMLDecode(text) {
+     var temp = document.createElement("div");
+     temp.innerHTML = text;
+     var output = temp.innerText || temp.textContent;
+     temp = null;
+     return output;
+     }
      function showRunJs(runJsTpl) {
         layer.open({
          type: 1,

diff --git a/docs/package.json b/docs/package.json
@@ -21,6 +21,7 @@
     "cross-env": "^5.2.0",
     "css-loader": "^3.0.0",
     "element-ui": "^2.10.1",
+    "escape-html": "^1.0.3",
     "file-loader": "^4.0.0",
     "gulp": "^4.0.2",
     "gulp-uglify": "^3.0.2",

diff --git a/documents/docs/zh-CN/changelog.md b/documents/docs/zh-CN/changelog.md
@@ -31,6 +31,10 @@
 
 ## 更新日志
 
+### **1.5.16** <small>`2020-07-19`</small>
+
+[文档] 修复 layui 的 `tpl` 写法与 vue 渲染冲突的问题的
+
 ### **1.5.16** <small>`2020-07-18`</small>
 
 [修复] 显示/隐藏列 修复显示隐藏列时会递归到子表，导致子表相同 `field` 的列会被同步隐藏

diff --git a/documents/docs/zh-CN/child/custom.md b/documents/docs/zh-CN/child/custom.md
@@ -0,0 +1,37 @@
+## 自定义展开内容
+
+### 1.展示父表当前行数据
+:::demo
+```html
+<table id="myTable" lay-filter="myTable"></table>
+<script type="text/html" id="titleTpl">
+  <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
+</script>
+<script>
+layui.use(['form', 'table','soulTable'], function () {
+    var table = layui.table,
+        soulTable = layui.soulTable;
+
+    table.render({
+        elem: '#myTable'
+        ,url: 'data-1.json'
+        ,height: 500
+        ,page: false
+        ,cols: [[
+            {title: '#', width: 50, children: '#expandAll'},
+            {field: 'title', title: '诗词', width: 200, sort: true, filter: true},
+            {field: 'dynasty', title: '朝代', width: 100, sort: true, filter: true},
+            {field: 'author', title: '作者', width: 165 , filter: true},
+            {field: 'content', title: '内容', width: 123, filter: true},
+            {field: 'type', title: '类型', width: 112,  filter: {split:','}, sort:true},
+            {field: 'heat', title: '点赞数', width: 112,  filter: true, sort:true},
+            {field: 'createTime', title: '录入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true},
+        ]]
+        ,done: function () {
+            soulTable.render(this)
+        }
+    });
+})
+</script>
+```
+:::
diff --git a/documents/docs/zh-CN/filter/basic.md b/documents/docs/zh-CN/filter/basic.md
@@ -4,6 +4,9 @@
 :::demo 通过 `filter: true` 开启筛选
 ```html
 <table id="myTable" lay-filter="myTable"></table>
+<script type="text/html" id="toolbar">
+    <a class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</a>
+</script>
 <script>
 layui.use(['form', 'table','soulTable'], function () {
     var table = layui.table,
@@ -14,7 +17,7 @@ layui.use(['form', 'table','soulTable'], function () {
         ,id: 'myTable'
         ,url: 'data.json'
         ,height: 500
-        ,toolbar: '<div><a class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</a></div>'
+        ,toolbar: '#toolbar'
         ,page: false
         ,cols: [[
             {type: 'checkbox', fixed: 'left'},

diff --git a/documents/docs/zh-CN/filter/page.md b/documents/docs/zh-CN/filter/page.md
@@ -6,6 +6,10 @@
 :::demo
 ```html
 <table id="myTable" lay-filter="myTable"></table>
+<script type="text/html" id="toolbar">
+    <a class="layui-btn layui-btn-sm" lay-event="refresh">重载</a>
+    <a class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</a>
+</script>
 <script>
 layui.use(['form', 'table','soulTable'], function () {
     var table = layui.table,
@@ -17,7 +21,7 @@ layui.use(['form', 'table','soulTable'], function () {
         ,height: 500
         ,limit: 20
         ,page: true
-        ,toolbar: '<div><a class="layui-btn layui-btn-sm" lay-event="refresh">重载</a><a class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</a></div>'
+        ,toolbar: '#toolbar'
         ,cols: [[
             {type: 'checkbox', fixed: 'left'},
             {field: 'title', title: '诗词', width: 200, sort: true, filter: true},
@@ -103,6 +107,9 @@ layui.use(['form', 'table','soulTable'], function () {
     </div>
 </div>
 <table id="myTable2" lay-filter="myTable2"></table>
+<script type="text/html" id="toolbar2">
+  <a class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</a>
+</script>
 <script>
     layui.use(['form', 'table','soulTable'], function () {
         var table = layui.table,
@@ -113,7 +120,7 @@ layui.use(['form', 'table','soulTable'], function () {
             id: 'myTable2'
             ,elem: '#myTable2'
             ,url: 'https://soultable.saodiyang.com/back/poetry/dataGrid'
-            ,toolbar: '<div><a class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</a></div>'
+            ,toolbar: '#toolbar2'
             ,height: 500 
             ,limit: 20
             ,page: true

diff --git a/documents/entry.js b/documents/entry.js
@@ -38,6 +38,7 @@ const router = new VueRouter({
 })
 router.beforeEach(async(to, from, next) => {
   if (layui.tableFilter) {
+    layui.$('#commonTpl').html('')
     layui.tableFilter.destroy([{
       config:{id: 'myTable'}
     },{