新增 lay-comment 组件

example/docs/zh-CN/components/badge.md

@@ -58,3 +58,6 @@ export default {
 | default  | 默认 |  非 `dot` 可用                                   |
 
 :::
+
+::: comment 1
+:::

example/docs/zh-CN/components/button.md

@@ -305,3 +305,6 @@ export default {
 | click | 单击事件 | `--` |
 
 :::
+
+::: comment
+:::

example/docs/zh-CN/components/color.md

@@ -160,3 +160,6 @@ export default {
 | layui-bg-black  | 雅黑 | class="layui-bg-black"  |
 
 :::
+
+::: comment
+:::

example/src/assets/css/markdown.css

@@ -1,3 +1,8 @@
+.utterances {
+  margin-top: 30px;
+  max-width: 100%;
+}
+
 html {
   line-height: 1.4;
   font-size: 16px;

example/src/components/LayComment.vue

@@ -0,0 +1,31 @@
+<template>
+    <div id="comment"></div>
+</template>
+<script>
+export default {
+  name: 'Utterances',
+  props: {
+    id: {
+        type: Number,
+        default: 6
+    }
+  },
+  methods: {
+    initValine () {
+        const utterances = document.createElement('script');
+        utterances.type = 'text/javascript';
+        utterances.async = true;
+        utterances.setAttribute('issue-number', this.id)
+        utterances.setAttribute('theme','github-light')
+        utterances.setAttribute('repo',`layui-vue/layui-vue`)
+        utterances.crossorigin = 'anonymous';
+        utterances.src = 'https://utteranc.es/client.js';
+        window.document.getElementById('comment').appendChild(utterances);
+
+    }
+  },
+  mounted: function(){
+    this.initValine()
+  }
+}
+</script>

example/src/main.ts

@@ -6,6 +6,7 @@ import Layui from '../../src/index'
 import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
+import LayComment from './components/LayComment.vue'
 import './assets/css/index.css'
 
 export function createApp(): {
@@ -23,6 +24,7 @@ export function createApp(): {
     .component('LayCode', LayCode)
     .component('LaySearch', LaySearch)
     .component('LayTableBox', LayTableBox)
+    .component('LayComment', LayComment)
     .use(Layui)
 
   return { app, router }

example/src/plugin/common-plugins.ts

@@ -8,6 +8,7 @@ import createTitle from './create-title'
 import createBlock from './create-block'
 import createDescribe from './create-describe'
 import createTable from './create-table'
+import createComment from './create-comment'
 import preWrapper from './pre-wrapper'
 
 const plugins = [
@@ -29,6 +30,7 @@ const plugins = [
         .use(...createBlock('block', ''))
         .use(...createTitle('title', ''))
         .use(...createDescribe('describe', ''))
+        .use(...createComment('comment', ''))
     },
   }),
 ] as any

example/src/plugin/create-comment.ts

@@ -0,0 +1,30 @@
+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]
+        if (token.nesting === 1) {
+          return `<lay-comment>`
+        } else {
+          return '</lay-comment>\n'
+        }
+      },
+    },
+  ]
+}

package.json

@@ -30,14 +30,14 @@
   "peerDependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/layer-vue": "^1.1.7",
+    "@layui/layer-vue": "^1.1.8",
     "vue": "^3.2.24",
     "vue-router": "^4.0.12"
   },
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/layer-vue": "^1.1.7",
+    "@layui/layer-vue": "^1.1.8",
     "evtd": "^0.2.3",
     "vue": "^3.2.24",
     "vue-router": "^4.0.12"