end
This commit is contained in:
parent
5c2e9a4d43
commit
d7dbf16284
48
README.md
48
README.md
@ -1,2 +1,50 @@
|
||||
# emoji
|
||||
Emoji 表情组件
|
||||
|
||||
|
||||
### DEMO
|
||||
|
||||
[DEMO](https://emoji.satori.love)
|
||||
|
||||
|
||||
### Install
|
||||
|
||||
```bash
|
||||
npm install @InvisibleFuture/emoji --save
|
||||
```
|
||||
|
||||
```javascript
|
||||
import Emoji from '@InvisibleFuture/emoji'
|
||||
|
||||
const emoji = new Emoji({
|
||||
input: document.querySelector('#input') , // 绑定的输入框元素(非必选)
|
||||
button: document.querySelector('#button'), // 绑定的开关按钮(非必选)
|
||||
callback: (data) => console.log('cilck:', data), // 选中 emoji 表情的回调函数(非必选)
|
||||
})
|
||||
|
||||
// 打开 emoji 表情选择窗口
|
||||
emoji.show()
|
||||
|
||||
|
||||
// 关闭 emoji 表情选择窗口
|
||||
emoji.hide()
|
||||
|
||||
```
|
||||
|
||||
|
||||
### Dev
|
||||
|
||||
```bash
|
||||
# clone
|
||||
git clone git@github.com:InvisibleFuture/emoji.git
|
||||
cd emoji
|
||||
|
||||
# install
|
||||
npm install
|
||||
npm run dev
|
||||
|
||||
# build
|
||||
npm run build
|
||||
npm preview
|
||||
|
||||
```
|
||||
37
emoji.js
37
emoji.js
@ -1,5 +1,5 @@
|
||||
export default class Emoji {
|
||||
constructor({ submit, callback }) {
|
||||
constructor({ input, button, callback }) {
|
||||
let emoji = '😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾'
|
||||
emoji += ' 👋 🤚 🖐 ✋ 🖖 👌 🤌 🤏 ✌️ 🤞 🤟 🤘 🤙 👈 👉 👆 🖕 👇 ☝️ 👍 👎 ✊ 👊 🤛 🤜 👏 🙌 👐 🤲 🤝 🙏 ✍️ 💅 🤳 💪 🦾 🦵 🦿 🦶 👣 👂 🦻 👃 🫀 🫁 🧠 🦷 🦴 👀 👁 👅 👄 💋 🩸'
|
||||
emoji += ' 👶 👧 🧒 👦 👩 🧑 👨 👩🦱 🧑🦱 👨🦱 👩🦰 🧑🦰 👨🦰 👱♀️ 👱 👱♂️ 👩🦳 🧑🦳 👨🦳 👩🦲 🧑🦲 👨🦲 🧔 👵 🧓 👴 👲 👳♀️ 👳 👳♂️ 🧕 👮♀️ 👮 👮♂️ 👷♀️ 👷 👷♂️ 💂♀️ 💂 💂♂️ 🕵️♀️ 🕵️ 🕵️♂️ 👩⚕️ 🧑⚕️ 👨⚕️ 👩🌾 🧑🌾 👨🌾 👩🍳 🧑🍳 👨🍳 👩🎓 🧑🎓 👨🎓 👩🎤 🧑🎤 👨🎤 👩🏫 🧑🏫 👨🏫 👩🏭 🧑🏭 👨🏭 👩💻 🧑💻 👨💻 👩💼 🧑💼 👨💼 👩🔧 🧑🔧 👨🔧 👩🔬 🧑🔬 👨🔬 👩🎨 🧑🎨 👨🎨 👩🚒 🧑🚒 👨🚒 👩✈️ 🧑✈️ 👨✈️ 👩🚀 🧑🚀 👨🚀 👩⚖️ 🧑⚖️ 👨⚖️ 👰♀️ 👰 👰♂️ 🤵♀️ 🤵 🤵♂️ 👸 🤴 🥷 🦸♀️ 🦸 🦸♂️ 🦹♀️ 🦹 🦹♂️ 🤶 🧑🎄 🎅 🧙♀️ 🧙 🧙♂️ 🧝♀️ 🧝 🧝♂️ 🧛♀️ 🧛 🧛♂️ 🧟♀️ 🧟 🧟♂️ 🧞♀️ 🧞 🧞♂️ 🧜♀️ 🧜 🧜♂️ 🧚♀️ 🧚 🧚♂️ 👼 🤰 🤱 👩🍼 🧑🍼 👨🍼 🙇♀️ 🙇 🙇♂️ 💁♀️ 💁 💁♂️ 🙅♀️ 🙅 🙅♂️ 🙆♀️ 🙆 🙆♂️ 🙋♀️ 🙋 🙋♂️ 🧏♀️ 🧏 🧏♂️ 🤦♀️ 🤦 🤦♂️ 🤷♀️ 🤷 🤷♂️ 🙎♀️ 🙎 🙎♂️ 🙍♀️ 🙍 🙍♂️ 💇♀️ 💇 💇♂️ 💆♀️ 💆 💆♂️ 🧖♀️ 🧖 🧖♂️ 💅 🤳 💃 🕺 👯♀️ 👯 👯♂️ 🕴 👩🦽 🧑🦽 👨🦽 👩🦼 🧑🦼 👨🦼 🚶♀️ 🚶 🚶♂️ 👩🦯 🧑🦯 👨🦯 🧎♀️ 🧎 🧎♂️ 🏃♀️ 🏃 🏃♂️ 🧍♀️ 🧍 🧍♂️ 👭 🧑🤝🧑 👬 👫 👩❤️👩 💑 👨❤️👨 👩❤️👨 👩❤️💋👩 💏 👨❤️💋👨 👩❤️💋👨 👪 👨👩👦 👨👩👧 👨👩👧👦 👨👩👦👦 👨👩👧👧 👨👨👦 👨👨👧 👨👨👧👦 👨👨👦👦 👨👨👧👧 👩👩👦 👩👩👧 👩👩👧👦 👩👩👦👦 👩👩👧👧 👨👦 👨👦👦 👨👧 👨👧👦 👨👧👧 👩👦 👩👦👦 👩👧 👩👧👦 👩👧👧 🗣 👤 👥 🫂'
|
||||
@ -15,7 +15,12 @@ export default class Emoji {
|
||||
this.list = emoji.split(/\s+/)
|
||||
this.callback = callback
|
||||
this.element = null
|
||||
this.submit = submit
|
||||
this.button = button
|
||||
this.input = input
|
||||
|
||||
console.log(this.button)
|
||||
// 绑定按钮事件
|
||||
if (button) this.button.onclick = () => this.show()
|
||||
|
||||
// 窗口被创建时的回调函数
|
||||
// 窗口被关闭时的回调函数
|
||||
@ -23,6 +28,8 @@ export default class Emoji {
|
||||
// 只在使用组件时才创建组件
|
||||
// 挂载开关按钮
|
||||
// 挂载输入框(挂载输入框可以精确到光标位置)
|
||||
// 动画时移除动画以外的交互规则以提高性能
|
||||
// 加载时渐显过渡 离开时渐隐过渡
|
||||
}
|
||||
|
||||
create_window() {
|
||||
@ -52,13 +59,20 @@ export default class Emoji {
|
||||
let li = document.createElement("li")
|
||||
li.innerText = item
|
||||
li.onclick = () => {
|
||||
//let tc = document.getElementById("message")
|
||||
//let tclen = tc.value.length; tc.focus()
|
||||
//if (typeof document.selection != "undefined") {
|
||||
// document.selection.createRange().text = item
|
||||
//} else {
|
||||
// tc.value = tc.value.substr(0, tc.selectionStart) + item + tc.value.substring(tc.selectionStart, tclen);
|
||||
//}
|
||||
// 向输入框中添加表情(精确的位置插入)
|
||||
if (this.input) {
|
||||
this.input.focus()
|
||||
if (document.selection) {
|
||||
document.selection.createRange().text = item
|
||||
} else if (typeof this.input.selectionStart != "undefined") {
|
||||
let start = this.input.selectionStart
|
||||
let end = this.input.selectionEnd
|
||||
this.input.value = this.input.value.substring(0, start) + item + this.input.value.substring(end)
|
||||
this.input.selectionStart = start + item.length
|
||||
this.input.selectionEnd = end + item.length
|
||||
}
|
||||
}
|
||||
// 向回调函数返回表情
|
||||
this.callback && this.callback(item)
|
||||
this.hide()
|
||||
}
|
||||
@ -98,9 +112,6 @@ export default class Emoji {
|
||||
`
|
||||
))
|
||||
document.head.appendChild(style)
|
||||
|
||||
//var submit = document.querySelector(className)
|
||||
//submit.parentNode.insertBefore(new button(), submit.nextSibling)
|
||||
}
|
||||
|
||||
return this.element
|
||||
@ -128,5 +139,3 @@ export default class Emoji {
|
||||
}
|
||||
}
|
||||
|
||||
// 动画时移除动画以外的交互规则以提高性能
|
||||
// 加载时渐显过渡 离开时渐隐过渡
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<title>Emoji</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
22
main.js
22
main.js
@ -1,34 +1,28 @@
|
||||
import './style.css'
|
||||
import javascriptLogo from './javascript.svg'
|
||||
import Emoji from './emoji.js'
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
|
||||
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
|
||||
</a>
|
||||
<h1>Hello Vite!</h1>
|
||||
<textarea id="textaret">🥳hello world! </textarea>
|
||||
<div class="card">
|
||||
<button id="counter" type="button">click here</button>
|
||||
</div>
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite logo to learn more
|
||||
Click the button to test inserting emoji
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
|
||||
const element = document.querySelector('#counter')
|
||||
const emoji = new Emoji({
|
||||
input: document.querySelector('#textaret'),
|
||||
button: document.querySelector('#counter'),
|
||||
callback: (data) => {
|
||||
console.log(data)
|
||||
}
|
||||
})
|
||||
|
||||
element.addEventListener('click', () => {
|
||||
emoji.show()
|
||||
})
|
||||
//document.querySelector('#counter').addEventListener('click', () => {
|
||||
// emoji.show()
|
||||
//})
|
||||
|
||||
emoji.show()
|
||||
//emoji.show()
|
||||
|
||||
15
style.css
15
style.css
@ -95,3 +95,18 @@ button:focus-visible {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
#textaret {
|
||||
display: block;
|
||||
height: 2.5em;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-size: 3rem;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
background-color: #f9f9f9;
|
||||
padding: 1em;
|
||||
border-radius: 8px;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user