perf(client): use shallowRef for html element ref
This commit is contained in:
parent
a0af80f8c5
commit
2184240ef1
59 changed files with 114 additions and 115 deletions
|
@ -16,9 +16,9 @@
|
|||
</li>
|
||||
</ol>
|
||||
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
|
||||
<li v-for="emoji in emojis" tabindex="-1" :key="emoji.emoji" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
|
||||
<li v-for="emoji in emojis" :key="emoji.emoji" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
|
||||
<div class="emoji">
|
||||
<MkEmoji :emoji="emoji.emoji" />
|
||||
<MkEmoji :emoji="emoji.emoji"/>
|
||||
</div>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<span v-if="q" class="name" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
|
||||
|
@ -35,7 +35,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||
import { markRaw, ref, shallowRef, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
import contains from '@/scripts/contains';
|
||||
import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
|
||||
import { acct } from '@/filters/user';
|
||||
|
@ -45,7 +46,6 @@ import { defaultStore } from '@/store';
|
|||
import { emojilist } from '@/scripts/emojilist';
|
||||
import { instance } from '@/instance';
|
||||
import { i18n } from '@/i18n';
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
|
||||
type EmojiDef = {
|
||||
emoji: string;
|
||||
|
@ -136,7 +136,7 @@ const emit = defineEmits<{
|
|||
}>();
|
||||
|
||||
const suggests = ref<Element>();
|
||||
const rootEl = ref<HTMLDivElement>();
|
||||
const rootEl = shallowRef<HTMLDivElement>();
|
||||
|
||||
const fetching = ref(true);
|
||||
const users = ref<any[]>([]);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue