vue聊天发送emoji 表情

2023-07-01 10:32| 来源: 网络整理| 查看: 265

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

vue聊天表情

最近做了个聊天功能，其中表情还挺有趣，分享一下

表情将表情全部封装到JSON文件中,起名为emoji.json { "data": "😀,😁,😂,😃,😄,😅,😆,😉,😊,😋,😎,😍,😘,😗,😙,😚,😇,😐,😑,😶,😏,😣,😥,😮,😯,😪,😫,😴,😌,😛,😜,😝,😒,😓,😔,😕,😲,😷,😖,😞,😟,😤,😢,😭,😦,😧,😨,😬,😰,😱,😳,😵,😡,😠,💘,❤,💓,💔,💕,💖,💗,💙,💚,💛,💜,💝,💞,💟,❣,💪,👈,👉,☝,👆,👇,✌,✋,👌,👍,👎,✊,👊,👋,👏,👐,✍,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🍎,🍏,🍐,🍑,🍒,🍓,🍅,🍆,🌽,🍄,🌰,🍞,🍖,🍗,🍔,🍟,🍕,🍳,🍲,🍱,🍘,🍙,🍚,🍛,🍜,🍝,🍠,🍢,🍣,🍤,🍥,🍡,🍦,🍧,🍨,🍩,🍪,🎂,🍰,🍫,🍬,🍭,🍮,🍯,🍼,☕,🍵,🍶,🍷,🍸,🍹,🍺,🍻,🍴,🌹,🍀,🍎,💰,📱,🌙,🍁,🍂,🍃,🌷,💎,🔪,🔫,🏀,⚽,⚡,👄,👍,🔥,🙈,🙉,🙊,🐵,🐒,🐶,🐕,🐩,🐺,🐱,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🐈,🐯,🐅,🐆,🐴,🐎,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🐘,🐭,🐁,🐀,🐹,🐰,🐇,🐻,🐨,🐼,🐾,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🐸,🐊,🐢,🐍,🐲,🐉,🐳,🐋,🐬,🐟,🐠,🐡,🐙,🐚,🐌,🐛,🐜,🐝,🐞,🦋,😈,👿,👹,👺,💀,☠,👻,👽,👾,💣" } 复制代码创建表情组件 {{emojiJson}} /** * When I wrote this code,Only God and I understood what I was doing. * Now,God only knows !!! */ import {Component, Emit, Prop, Watch, Vue} from "vue-property-decorator"; // import emojiJson from "./emoji.json"; // eslint-disable-next-line @typescript-eslint/no-var-requires const emojiJson = require("./emoji.json"); @Component export default class Emoji extends Vue { emojiJson = emojiJson.data.split(','); } 复制代码

页面也成功渲染提示可能你会遇到导入JSON格式的数据文件，ts提示错误

import emojiJson from "./emoji.json"; 复制代码 Error:(14, 23) TS2732: Cannot find module './emoji.json'. Consider using '--resolveJsonModule' to import module with '.json' extension. 复制代码

解决方法为：

const emojiJson = require("./emoji.json"); 复制代码

3.增加样式，让其美观

{{item}} {{ emojiJson[0]}} /** * When I wrote this code,Only God and I understood what I was doing. * Now,God only knows !!! */ import {Component, Emit, Prop, Watch, Vue} from "vue-property-decorator"; // import emojiJson from "./emoji.json"; // eslint-disable-next-line @typescript-eslint/no-var-requires const emojiJson = require("./emoji.json"); @Component export default class Emoji extends Vue { emojiJson = emojiJson.data.split(','); @Emit("chooseEmojiDefault") chooseEmojiDefault(e: string) { console.log(e) return e; } } // 纵向滚动条 @mixin scroll-bar($width: 10px) { &::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; } &::-webkit-scrollbar { width: $width; height: 10px; background-color: #ffffff; } &::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(0, 0, 0, 0.2); } } .emoji { text-align: left; width: 100%; height: 100%; background: #fff; border: 1px solid #dcdfe6; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%); .emoji-tabs { border-top: 1px solid #DCDFE6; background: #f8f8f8; .emoji-tab { background: #ffffff; width: 40px; height: 100%; padding: 5px 20px; overflow: hidden; display: inline-block; text-align: center; line-height: 48px; font-size: 30px; border: 1px solid #ffffff; border-right-color: #DCDFE6; border-left-color: #DCDFE6; } } .emoji-default { width: calc(100% - 40px); height: 202px; overflow-y: auto; @include scroll-bar(); padding: 0px 20px; li { display: inline-block; padding: 5px; font-size: 24px; width: 29px; height: 29px; overflow: hidden; cursor: pointer; } li:hover { background-color: #d5d5d5; } } } 复制代码

4.其他组件引用

{{txt}} 表情 import {Component, Vue} from "vue-property-decorator"; import Emoji from "@/views/emoji.vue"; @Component({ components: {Emoji}, }) export default class Home extends Vue { txt = "" emojihowVisible = false; mounted(): void { document.documentElement.addEventListener('click', this.OnClick); } OnClick() { this. emojihowVisible = false; } chooseEmojiDefault(e: string) { this.txt = e; } emojiShow() { this.emojihowVisible = !this.emojihowVisible; } } .home { margin: 200px; width: 600px; text-align: left; background: #eeeeee; height: 600px; .home-txt { min-height: 500px; width: 100%; border-bottom: 1px solid #CECACA; } .home-tool { width: 100%; height: 100px; button { width: 80px; height: 40px; } position: relative; .emoji-container { width: 400px; height: 300px; position: absolute; bottom: 110px; left: 0px; z-index: 10; transition: all 0.2s; } } } 复制代码

【本文地址】

公司简介

联系我们