Как редактировать задержку открытия в свернутом горизонтальном меню пользовательского интерфейса Element

Question

Меня немного раздражает, когда вы быстро наводите курсор на пункты меню в свернутом горизонтальном меню. Поэтому я хотел отредактировать секунды, в которых он показывает панель инструментов.

Компонент всплывающей подсказки пользовательского интерфейса ELement имеет атрибут, который позволяет нам редактировать задержку открытия всплывающей подсказки.

Как нам это сделать в свернутом горизонтальном меню, где отображается заголовок пункта меню?

Скриншот

Answer 1

Основываясь на ответе @ Lupyana, мне просто нужно было что-то добавить для этого, чтобы соответствовать тому, чего я действительно хочу.

Вместо того, чтобы позволить element-ui делать автоматическое преобразование всплывающей подсказки, когда меню свернуто. Все, что нам нужно сделать, это сделать это вручную, просто отключив всплывающую подсказку, когда она не свернута, чтобы она не отображалась при раскрытии меню.

от

<el-menu-item index="/">
    <span slot="title">Home</span>
</el-menu-item>

до:

<el-tooltip effect="dark" :open-delay="300" content="Home" placement="right" :disabled="!is_collapse">
    <el-menu-item index="/">
        <span>Home</span>
    </el-menu-item>
</el-tooltip>

Answer 2

Чтобы отредактировать open-delay в пользовательском интерфейсе элемента, просто измените атрибут open-delay, привяжите желаемое значение в миллисекундах по желанию, т. Е. В течение одной секунды оно должно быть 1000. примерно так:

<el-tooltip content="Top center" :open-delay="1000" placement="top">
<el-button>Dark</el-button>
</el-tooltip>

Если вам нужно уменьшить продолжительность, используйте меньшее число и наоборот.

см. Документы Документация по пользовательскому интерфейсу элемента

В вашем случае оберните элемент элемента меню всплывающей подсказкой и настройте задержку открытия, как требуется, например:

<el-tooltip class="item" effect="dark" :open-delay="1000" 
content="Right Center prompts info" placement="right">
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span  >Navigator Two</span>
</el-menu-item>
</el-tooltip>

см. Скрипку