主页 / 问题 / 1316725
Accepted
WGPavell
Asked:2022-08-12 14:09:38 +0800 CST2022-08-12 14:09:38 +0800 CST

Vue Bootstrap 下拉菜单 + emoji-mart-vue

  • 772

需要以下内容：创建一个包含 Picker 块的下拉列表 (emoji-mart-vue) 例子

一切都适用于这段代码：

            <b-dropdown variant="secondary" no-caret right class="emoji-dropdown">
                <template #button-content>
                    <i class="far fa-smile-beam"></i>
                </template>
                <Picker :data="emojiIndex" set="apple" @select="pickEmoji" title="Выберите эмодзи" emoji="grinning" emojiTooltip :i18n="emojiPickerI18n" @click.prevent></Picker>
            </b-dropdown>

但有一件事：当你点击任何表情符号时，下拉菜单会关闭。你怎么能确保这不会发生？同时，保留下拉行为的其余部分（当您单击它或调用它的按钮时，它被隐藏了）。

PS 正如您在上面的代码中看到的那样，我尝试了 @click.prevent 和其他事件修饰符，但没有达到预期的效果

vue.js

1 个回答

  1. Best Answer

    我制作了一个只有下拉菜单和选择器的页面，事实证明，关闭选择器根本不会触发表情符号的选择。事实是，当我选择一个表情符号时，我将焦点设置在文本字段上，这会触发下拉菜单的关闭。我不得不做一个小拐杖，但现在总的来说一切正常：

    <b-form-textarea placeholder="Введите сообщение" ... @focus="messageInputInFocus = true" @blur="messageInputInFocus = false"></b-form-textarea>
...
<b-dropdown variant="secondary" no-caret right class="emoji-dropdown" @hide="onEmojiDropdownHide" @show="onEmojiDropdownShow">
    <template #button-content>
        <i class="far fa-smile-beam"></i>
    </template>
    <template #default>
        <Picker :data="emojiIndex" set="apple" @select="pickEmoji" title="Выберите эмодзи" emoji="grinning" emojiTooltip :i18n="emojiPickerI18n"></Picker>
    </template>
</b-dropdown>

<script>
    ...
    export default {
        components: { ..., BFormTextarea, BDropdown, Picker },
        data() {
            return {
                ...,
                preventEmojiPickerHide: false,
                messageInputInFocus: false
            }
        },
        methods: {
            pickEmoji(emoji) {
                ...
                this.preventEmojiPickerHide = true;
                this.$refs.messageInput.focus();
                ...
            },
            onEmojiDropdownHide(bvEvent) {
                if (this.preventEmojiPickerHide) {
                    bv.preventDefault();
                    this.preventEmojiPickerHide = false;
                }
            },
            onEmojiDropdownShow() {
                if (this.messageInputInFocus) {
                    this.preventEmojiPickerHide = true;
                    setTimeout(() => { // $nextTick срабатывает до потери фокуса, так что пришлось через setTimeout
                        this.$refs.messageInput.focus();
                    }, 0);
                }
            }
        }
    }
</script>
    • 0

相关问题