vue-element-admin で発生するいくつかの小さな問題

vue-element-admin ナビゲーション バーの選択された背景色

vue-element-admin を使用して背景色を変更します。CSS を使用できます (グローバル CSS ファイルに入れます)。

#app .sidebar-container .el-submenu .el-menu-item.is-active {
  background-color: #40a0ff28 !important;
}

vue-element-admin ショートカット ナビゲーション バー

要件は、ショートカット ナビゲーション バーの両側に矢印があることです。図に示すように、ショートカット ナビゲーション バーをクリックして移動します。

 プロジェクトの src\layout\components\TagsView\ScrollPane.vue ファイルを見つけて、次のコードを記述します。

<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
    <div class="arrow_left" @click="leftoffterChange"><i class="el-icon-arrow-left" /></div>
    <slot />
    <div class="arrow_right" @click="rightoffterChange"><i class="el-icon-arrow-right" /></div>
 </el-scrollbar>

leftoffterChange() {
      const $scrollWrapper = this.scrollWrapper
      this.scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft - 60
    },
    rightoffterChange() {
      const $scrollWrapper = this.scrollWrapper
      this.scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + 60
    },

それでおしまい