perf(table): 新增 列筛选 功能

docs/src/components/LayCode.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="lay-code">
-    <div class="source">
+    <div class="source" id="source">
       <slot />
     </div>
     <div ref="meta" class="meta">
@@ -16,7 +16,7 @@
       class="control"
     >
       <i
-        class="layui-icon layui-icon-file"
+        class="layui-icon layui-icon-file" @click="copy"
       />
       <i
         class="layui-icon layui-icon-fonts-code"  @click="toggle"
@@ -38,6 +38,12 @@ const toggle = function () {
   show.value = !show.value
 }
 
+const copy = function () {
+  var Url2  =document.getElementById("source") as any;
+  Url2.select();
+  document.execCommand("Copy");
+}
+
 onMounted(() => {
   const foundDescs = meta.value.getElementsByClassName('description')
   const foundCodes = meta.value.getElementsByClassName('language-html')

docs/src/components/LayTableBox.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="lay-table-box">
+        <slot></slot>
+    </div>
+</template>
+<style>
+.lay-table-box table {
+  width: 100%; /*表格宽度*/
+  border-collapse: collapse; /*使用单一线条的边框*/
+  empty-cells: show; /*单元格无内容依旧绘制边框*/
+  border-right: 1px solid whitesmoke;
+  border-left: 1px solid whitesmoke;
+  border-radius: 4px;
+}
+
+.lay-table-box table th,
+.lay-table-box table td {
+  font-size: 14px;
+  width: 160px;
+  max-width: 160px;
+  height: 50px; /*统一每一行的默认高度*/
+  border-top: 1px solid whitesmoke; /*内部边框样式*/
+  padding: 0 10px; /*内边距*/
+  padding-left: 28px;
+}
+
+.lay-table-box table th {
+  color: #666;
+  font-weight: 500;
+  white-space: nowrap; /*表头内容强制在一行显示*/
+  background-color: #fafafa;
+}
+
+.lay-table-box table td {
+  white-space: nowrap;
+}
+</style>

docs/src/main.ts

@@ -5,6 +5,7 @@ import { Router } from 'vue-router'
 import Layui from '/@src/index'
 import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
+import LayTableBox from './components/LayTableBox.vue'
 import './styles/index.css'
 
 export function createApp(): {
@@ -21,6 +22,7 @@ export function createApp(): {
     .use(router)
     .component('LayCode', LayCode)
     .component('LaySearch', LaySearch)
+    .component('LayTableBox', LayTableBox)
     .use(Layui)
 
   return { app, router }

docs/src/plugin/common-plugins.ts

@@ -7,6 +7,7 @@ import demo from './demo'
 import createTitle from './create-title'
 import createBlock from './create-block'
 import createDescribe from './create-describe'
+import createTable from './create-table'
 import preWrapper from './pre-wrapper'
 
 const plugins = [
@@ -24,9 +25,10 @@ const plugins = [
       md.use(snippet)
         .use(preWrapper)
         .use(container, 'demo', demo)
-        .use(...createBlock('block', '描述信息'))
-        .use(...createTitle('title', '标题信息'))
-        .use(...createDescribe('describe', '描述信息'))
+        .use(...createTable('table',''))
+        .use(...createBlock('block', ''))
+        .use(...createTitle('title', ''))
+        .use(...createDescribe('describe', ''))
     },
   }),
 ] as any

docs/src/plugin/create-table.ts

@@ -0,0 +1,31 @@
+import container from 'markdown-it-container'
+import type Token from 'markdown-it/lib/token'
+
+type ContainerArgs = [
+  typeof container,
+  string,
+  {
+    render(tokens: Token[], idx: number): string
+  }
+]
+
+export default function createContainer(
+  klass: string,
+  defaultTitle: string
+): ContainerArgs {
+  return [
+    container,
+    klass,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx]
+        const info = token.info.trim().slice(klass.length).trim()
+        if (token.nesting === 1) {
+          return `<lay-table-box>${info}`
+        } else {
+          return '</lay-table-box>\n'
+        }
+      },
+    },
+  ]
+}

docs/src/styles/index.css

@@ -1,4 +1,4 @@
 @import './code.css';
 @import './custom-blocks.css';
 @import './markdown.css';
-@import './vars.css';
+@import './vars.css';

docs/src/styles/markdown.css

@@ -114,36 +114,6 @@ form {
   margin: 0;
 }
 
-table {
-  width: 100%; /*表格宽度*/
-  border-collapse: collapse; /*使用单一线条的边框*/
-  empty-cells: show; /*单元格无内容依旧绘制边框*/
-  border-right: 1px solid whitesmoke;
-  border-left: 1px solid whitesmoke;
-  border-radius: 4px;
-}
-
-table th,
-table td {
-  font-size: 14px;
-  width: 160px;
-  max-width: 160px;
-  height: 50px; /*统一每一行的默认高度*/
-  border-top: 1px solid whitesmoke; /*内部边框样式*/
-  padding: 0 10px; /*内边距*/
-  padding-left: 28px;
-}
-
-table th {
-  color: #666;
-  font-weight: 500;
-  white-space: nowrap; /*表头内容强制在一行显示*/
-  background-color: #fafafa;
-}
-table td {
-  white-space: nowrap;
-}
-
 .source .layui-avatar {
   margin-right: 30px;
 }