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

vue聊天表情

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

表情

1. 将表情全部封装到JSON文件中,起名为emoji.json

{
  "data": "😀,😁,😂,😃,😄,😅,😆,😉,😊,😋,😎,😍,😘,😗,😙,😚,😇,😐,😑,😶,😏,😣,😥,😮,😯,😪,😫,😴,😌,😛,😜,😝,😒,😓,😔,😕,😲,😷,😖,😞,😟,😤,😢,😭,😦,😧,😨,😬,😰,😱,😳,😵,😡,😠,💘,❤,💓,💔,💕,💖,💗,💙,💚,💛,💜,💝,💞,💟,❣,💪,👈,👉,☝,👆,👇,✌,✋,👌,👍,👎,✊,👊,👋,👏,👐,✍,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🍎,🍏,🍐,🍑,🍒,🍓,🍅,🍆,🌽,🍄,🌰,🍞,🍖,🍗,🍔,🍟,🍕,🍳,🍲,🍱,🍘,🍙,🍚,🍛,🍜,🍝,🍠,🍢,🍣,🍤,🍥,🍡,🍦,🍧,🍨,🍩,🍪,🎂,🍰,🍫,🍬,🍭,🍮,🍯,🍼,☕,🍵,🍶,🍷,🍸,🍹,🍺,🍻,🍴,🌹,🍀,🍎,💰,📱,🌙,🍁,🍂,🍃,🌷,💎,🔪,🔫,🏀,⚽,⚡,👄,👍,🔥,🙈,🙉,🙊,🐵,🐒,🐶,🐕,🐩,🐺,🐱,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🐈,🐯,🐅,🐆,🐴,🐎,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🐘,🐭,🐁,🐀,🐹,🐰,🐇,🐻,🐨,🐼,🐾,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🐸,🐊,🐢,🐍,🐲,🐉,🐳,🐋,🐬,🐟,🐠,🐡,🐙,🐚,🐌,🐛,🐜,🐝,🐞,🦋,😈,👿,👹,👺,💀,☠,👻,👽,👾,💣"
}

2. 创建表情组件

<template>
    <div>
        {{emojiJson}}
    </div>
</template>

<script lang="ts">
/**
 * 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(',');

}
</script>

<style lang="scss" scoped>

</style>

页面也成功渲染 提示 可能你会遇到导入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.增加样式，让其美观

<template>
    <div class="emoji">
        <ul class="emoji-default">
            <li v-for="(item, index) in emojiJson" :key="index"
                @click.stop="chooseEmojiDefault(item)">
                {{item}}
            </li>
        </ul>
        <div class="emoji-tabs">
            <div class="emoji-tab">
                {{ emojiJson[0]}}
            </div>
        </div>

    </div>
</template>

<script lang="ts">
/**
 * 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;
    }

}
</script>

<style lang="scss" scoped>
// 纵向滚动条
@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;
        }
    }
}

</style>

4.其他组件引用

<template>
    <div class="home">
        <div class="home-txt">
            {{txt}}
        </div>
        <div class="home-tool">
            <button @click.stop="emojiShow">表情</button>
            <div class="emoji-container" v-show="emojihowVisible">
                <Emoji @chooseEmojiDefault="chooseEmojiDefault"></Emoji>
            </div>
        </div>


    </div>
</template>

<script lang="ts">
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;
    }
}
</script>
<style lang="scss" scoped>
.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;
        }
    }
}
</style>