From 6e902c82b202b1007e5b565fec4a7c39019b2071 Mon Sep 17 00:00:00 2001
From: InvisibleFuture <huan0016@gmail.com>
Date: Wed, 31 Aug 2022 13:37:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=8F=92=E5=85=A5=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    |  1 +
 emoji.js     | 26 +++++++++++++++-----------
 main.js      |  1 +
 package.json |  2 +-
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 539fbfc..4f311c3 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@ Emoji 表情组件
 - [x] 使用 Esc 快捷键关闭弹出
 - [x] 提供回调函数以便于拓展操作
 - [x] 调用时才初始化以兼容服务端渲染项目
+- [x] 动态插入调用支持
 
 ### DEMO
 
diff --git a/emoji.js b/emoji.js
index 45fea7c..a81a8dc 100644
--- a/emoji.js
+++ b/emoji.js
@@ -18,7 +18,6 @@ export default class Emoji {
     this.button = button
     this.input = input
 
-    console.log(this.button)
     // 绑定按钮事件
     if (button) this.button.onclick = () => this.show()
 
@@ -52,7 +51,7 @@ export default class Emoji {
 
     // 表情列表
     this.ul = document.createElement("ul")
-    this.ul.classList.add('kaomojilist')
+    this.ul.classList.add('emojilist')
 
     // 表情单项
     this.list.forEach(item => {
@@ -83,16 +82,17 @@ export default class Emoji {
     document.body.appendChild(this.element)
 
     // 创建CSS样式(滚动条)
-    if (!document.querySelector('#kaomojibuttn')) {
+    if (!document.querySelector('#emoji-style')) {
       var style = document.createElement("style")
       style.type = "text/css"
+      style.id = "emoji-style"
       style.appendChild(document.createTextNode(`
-          ul.kaomojilist::-webkit-scrollbar { width : 10px; height: 1px; }
-          ul.kaomojilist::-webkit-scrollbar-thumb { border-radius:10px; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); }
-          ul.kaomojilist::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background:#ededed; border-radius:10px; }
-          ul.kaomojilist::-webkit-scrollbar-thumb:hover { background-color: #ccc; }
-          ul.kaomojilist { display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0; padding:0; overflow-y:scroll; }
-          ul.kaomojilist > li {
+          ul.emojilist::-webkit-scrollbar { width : 10px; height: 1px; }
+          ul.emojilist::-webkit-scrollbar-thumb { border-radius:10px; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); }
+          ul.emojilist::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background:#ededed; border-radius:10px; }
+          ul.emojilist::-webkit-scrollbar-thumb:hover { background-color: #ccc; }
+          ul.emojilist { display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0; padding:0; overflow-y:scroll; }
+          ul.emojilist > li {
             display:flex;
             justify-content:center;
             items-align:center;
@@ -105,7 +105,7 @@ export default class Emoji {
             transition: all .25s;
             cursor:pointer;
           }
-          ul.kaomojilist.ok > li:hover {
+          ul.emojilist.ok > li:hover {
             background-color: rgba(0,0,0,.05);
             font-size: 36px;
           }
@@ -133,7 +133,11 @@ export default class Emoji {
   // 隐藏组件(方法) (是否将聚焦返回给 input 的原本位置?)
   hide() {
     this.ul.classList.remove('ok')
-    setTimeout(() => { this.element.style.display = "none" }, 450)
+    setTimeout(() => {
+      //this.element.style.display = "none"
+      this.element.parentNode.removeChild(this.element)
+      this.element = null
+    }, 450)
     this.element.style.background = "rgba(0,0,0,0)"
     this.div.style.bottom = "-90%"
   }
diff --git a/main.js b/main.js
index bae7311..2e1e626 100644
--- a/main.js
+++ b/main.js
@@ -13,6 +13,7 @@ document.querySelector('#app').innerHTML = `
     <div>
       <a href="https://github.com/InvisibleFuture/emoji" target="_blank">github</a>
       <a href="https://www.npmjs.com/package/satori-emoji" target="_blank">npm</a>
+      <a href="https://satori.love" target="_blank">satori</a>
     <div>
   </div>
 `
diff --git a/package.json b/package.json
index ea295a6..e6290cf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "satori-emoji",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",