Блог

У меня есть меню, настроенное из пользовательского интерфейса элемента в Vue.

Выпадающий список подменю имеет некоторую странную конфигурацию относительно того, как он управляет выпадением меню. Изначально в настройках начальной загрузки меню раскрывается так, чтобы его левая сторона была выровнена с левой стороной заголовка подменю.

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

Я нашел в Интернете типичное решение — сделать следующее в CSS:

 .dropdown-menu-center {
 left: 50% !important;
 right: auto !important;
 text-align: center !important;
 transform: translate(-50%, 0) !important;
}
  

Тем не менее, если я это сделаю, выпадающий список будет полностью отключен и слева от заголовка, вот так:

Мне интересно, как здесь работает пользовательский интерфейс элемента, и как я могу сбросить свойства, чтобы они функционировали как базовый CSS? Запутался, как подойти к этому.

Общий код выглядит следующим образом:

 <template>
<el-menu
    class="default-menu"
    v-bind="$attrs"
    text-color="#333"
    active-text-color="#333"
    :default-active="defaultActiveIndex"
    @select="handleSelect"
    menu-trigger="hover"
>
    <el-submenu class="navigation-item" index="xxx" :popper-append-to-body="true">
        <template slot="title">Title</template>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <div class="dropdown-menu-divider" />
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
    </el-submenu>
    <el-submenu class="navigation-item" index="xxx" :popper-append-to-body="true">
        <template  slot="title">Title2</template>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">
                Submenu item
            </a>
        </el-menu-item>
    </el-submenu>
    </el-menu>
   </template>
  

При этом CSS, назначенный для «всплывающего» меню, является:

 .el-menu--horizontal ul.el-menu.el-menu--popup.el-menu--popup-bottom-start {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
    text-align: left;
    display: block !important;
    position: absolute !important;
}