Как редактировать задержку открытия в свернутом горизонтальном меню элемента UI

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

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

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

снимок экрана


vuejs2 element-ui
person japhfortin    schedule 09.01.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Чтобы отредактировать задержку открытия в пользовательском интерфейсе элемента, просто измените атрибут задержки открытия, привяжите желаемое значение в миллисекундах по желанию, т.е. в течение одной секунды оно должно быть 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>

см. скрипку

person Lupyana Mbembati    schedule 09.01.2019
comment
Привет, обратите внимание, что это мой вопрос. Как это сделать в свернутом горизонтальном меню, где отображается заголовок пункта меню ?. Спасибо.. - person japhfortin; 09.01.2019
comment
@japhfortin Я обновил свой ответ, см. второй пункт меню - person Lupyana Mbembati; 09.01.2019
comment
Отличная идея! @Lupyana :) Мне просто нужно было что-то добавить по своему усмотрению .. - person japhfortin; 10.01.2019

arrow_upward
1
arrow_downward

Нет собственного способа, потому что компонент его не рассматривает. Итак, решение @Lupyana Mbembati работает:

<el-tooltip effect="dark" placement="right" content="About" :open-delay="400">
    <el-menu-item :index="localePath('index')">
        <i class="el-icon-user"></i>
    </el-menu-item>
</el-tooltip>
person Ilán Vivanco    schedule 13.08.2020

arrow_upward
0
arrow_downward

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

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

от:

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

to:

<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>
person japhfortin    schedule 10.01.2019