rudeshark.net/src/client/app/common/views/components/emoji.vue
Acid Chicken (硫酸鶏) 0963e6d6e1 Use Twemoji
2018-11-05 11:19:40 +09:00

43 lines
902 B
Vue

<template>
<img class="mk-emoji" :src="url" :alt="alt || name" :title="name">
</template>
<script lang="ts">
import Vue from 'vue';
import { lib } from 'emojilib';
export default Vue.extend({
props: ['emoji'],
data() {
return {
url: null,
alt: null,
name: null
}
},
mounted() {
this.$nextTick(() => this.exec());
},
methods: {
exec() {
const { emoji } = this;
this.name = emoji;
(this as any).api('meta').then(meta =>
this.url = meta && meta.emojis ? meta.emojis.find(e => e.name === emoji || e.aliases && e.aliases.includes(emoji)).url : null);
if (!this.url) {
const { char } = lib[emoji] || { char: null };
if (char) {
this.url = `https://twemoji.maxcdn.com/2/svg/${char.codePointAt(0).toString(16)}.svg`;
this.alt = char;
}
}
}
}
});
</script>
<style lang="stylus" scoped>
.mk-emoji
height 2.5em
vertical-align middle
</style>