From 06a31a3f24afcb1523aee7f080315ae6f1d6b658 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 16 Dec 2021 00:00:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20lay-comment=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/badge.md  |  3 +++
 example/docs/zh-CN/components/button.md |  3 +++
 example/docs/zh-CN/components/color.md  |  3 +++
 example/src/assets/css/markdown.css     |  5 ++++
 example/src/components/LayComment.vue   | 31 +++++++++++++++++++++++++
 example/src/main.ts                     |  2 ++
 example/src/plugin/common-plugins.ts    |  2 ++
 example/src/plugin/create-comment.ts    | 30 ++++++++++++++++++++++++
 package.json                            |  4 ++--
 9 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 example/src/components/LayComment.vue
 create mode 100644 example/src/plugin/create-comment.ts

diff --git a/example/docs/zh-CN/components/badge.md b/example/docs/zh-CN/components/badge.md
index 0f9abc2a..df4d61de 100644
--- a/example/docs/zh-CN/components/badge.md
+++ b/example/docs/zh-CN/components/badge.md
@@ -58,3 +58,6 @@ export default {
 | default  | 默认 |  非 `dot` 可用                                   |
 
 :::
+
+::: comment 1
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/button.md b/example/docs/zh-CN/components/button.md
index 3e771d89..b1666915 100644
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@@ -305,3 +305,6 @@ export default {
 | click | 单击事件 | `--` |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/color.md b/example/docs/zh-CN/components/color.md
index 9aaac970..f62e3ab6 100644
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@@ -159,4 +159,7 @@ export default {
 | layui-bg-blue   | 蓝色 | class="layui-bg-blue"   |
 | layui-bg-black  | 雅黑 | class="layui-bg-black"  |
 
+:::
+
+::: comment
 :::
\ No newline at end of file
diff --git a/example/src/assets/css/markdown.css b/example/src/assets/css/markdown.css
index 72e2403f..db461523 100644
--- a/example/src/assets/css/markdown.css
+++ b/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;
diff --git a/example/src/components/LayComment.vue b/example/src/components/LayComment.vue
new file mode 100644
index 00000000..f3370cb5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/example/src/main.ts b/example/src/main.ts
index 0ffaa208..8f711035 100644
--- a/example/src/main.ts
+++ b/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 }
diff --git a/example/src/plugin/common-plugins.ts b/example/src/plugin/common-plugins.ts
index 4e873453..bca114ec 100644
--- a/example/src/plugin/common-plugins.ts
+++ b/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
diff --git a/example/src/plugin/create-comment.ts b/example/src/plugin/create-comment.ts
new file mode 100644
index 00000000..d882be0a
--- /dev/null
+++ b/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'
+        }
+      },
+    },
+  ]
+}
diff --git a/package.json b/package.json
index 5e5c341b..f2fe046b 100644
--- a/package.json
+++ b/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"