element ui aside — 側欄導航菜單移入移出折疊效果

效果如圖，移入移出控制折疊，點擊按鈕后移入移出不可控制折疊。

功能是很簡單的功能，不過昨天這塊還是弄了小一個小時，所以記錄下來。

• 發現的問題：

  • 模版上el-aside寫上@mouseenter無效

• 解決方案

  • 寫成@mouseenter.native
  • 在mounted里操作綁定原生dom事件

template

    <el-container>
        <el-header>
            <button @click="collapseStatus">
                <i class="el-icon-d-arrow-right"></i>
            </button>
        </el-header>
        <el-container>
            <el-aside
                    width="auto"
                    @mouseenter.native="collapseOpen"
                    @mouseleave.native="collapseClose">
                <el-menu :collapse="isCollapse">
                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <span slot="title">測試</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
            </el-main>
        </el-container>
    </el-container>

script

            data() {
                return {
                    collapseBtnClick: false,
                    isCollapse: true,
                    }
            }

            methods: {
                collapseStatus() {
                        this.collapseBtnClick = this.isCollapse;
                        this.isCollapse = !this.isCollapse;
                    },
                collapseOpen() {
                        if (this.collapseBtnClick) return;
                        this.isCollapse = false;
                    }
                 }
                collapseClose() {
                        if (this.collapseBtnClick) return;
                        this.isCollapse = true;
                }
            }

這里markdown的代碼不能自動排版，雲筆記的就會，一定是我寫的方式不對