vue5 - 技术栈

el-container

el-container是ElementPlus中的布局容器组件 ，主要用于快速构建基础布局结构，比如：顶部-主体-底部，侧边栏-主体等常见页面结构。把页面按照上下或左右方向组织起来，让布局变得简单、清晰、可读性高。

它通常和以下组件一起使用：

el-header: 页头区域
el-aside: 侧边栏区域
el-main: 主体内容区域
el-footer: 页脚区域

基本用法举例

上下布局（Header + Main）

html 复制代码

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>

左右布局（Aside + Main）

html 复制代码

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-main>Main</el-main>
</el-container>

v-if

html 复制代码

<router-link v-if="!['mixin'].includes(appStore.layoutMode)" to="/">om</router-link>

<router-link v-else to="/">
    <span>OM OS</span>
</router-link>

v-if 是vue提供的条件渲染指令 ，作用是根据表达式的真假来决定是否渲染这个元素（或组件）。当表达式为false时，vue会完全移除这个元素，不会出现在DOM中。

也就是说，在上面的代码中，当layoutMode中不含mixin时，om不会被渲染，显示的文本是OM OS

同理：

html 复制代码

<template v-if="mode==='horizontal'">
......
</template>

<template v-if="mode === 'vertical'">
......
</template>

也是在符合条件的情况下，template才会被渲染

至于这里为什么用template，主要是因为v-if只能绑定在一个元素上 ，但有时你必须包住多个节点，所以vue提供<template v-if="condition">用于对多个子元素统一控制显示/隐藏

这里不用div的原因是，template 不会渲染标签内容，只会渲染内部内容，而div会在页面中渲染一个实际的div

动态绑定css

html 复制代码

<el-icon color="#373839" class="nav-bar-left-icon" :class="{'is-active':appStore.sidebar.opened}" title="展开">
    <Expand/>
</el-icon>

<el-icon color="#373839" class="nav-bar-left-icon" :class="{'is-active':!appStore.sidebar.opened}" title="折叠">
    <Fold/>
</el-icon>

css 复制代码

.bar-left-ex {
    margin: 0 10px;

    .nav-bar-left-icon {
        ......
     }

  
    .is-active {
      display: none;
    }

}

这里:class="{'is-active': appStore.sidebar.opened}是动态Class绑定，写法含义：

js 复制代码

{
  'is-active': appStore.sidebar.opened
}

如果appStore.sidebar.opened === true -> 给这个元素添加is-activeclass
如果为false -> 不添加

通过改变appStore.sidebar.opened的值，来使el-icon显示或者不显示

el-scrollbar

html 复制代码

<el-scrollbar>
    <el-menu
        class="hor-menu"
        :mode="mode"
        ellipsis
        :default-active="currentRoute.path"
        background-color="transparent"
        >
          <MenuItems :routes="filteredRoutes"/>
        </el-menu>
</el-scrollbar>

el-scrollbar

ElementPlus提供的菜单滚动容器，如果菜单太长，超过屏幕宽度，会出现滚动区域，而不是挤到一行显示不下。

el-menu：ElementPlus菜单组件
- :mode="mode" 指定菜单模式，horizontal->横向菜单（用于顶部导航），vertical->纵向菜单（用于侧边栏）
- ellipsis：ElementPlus自带属性，开启文字过长时的省略号效果
- :default-active="currentRoute.path"：菜单默认选中当前路由对应的菜单项，例如当前路由 /home，那么 "/home" 的菜单项会高亮，菜单随着路由变化自动更新状态。

导航栏

js 复制代码

const props = defineProps({
    mode: {
        type: String,
        default: 'vertical'
        // default: 'horizontal'
    }
})

prop

prop：父组件传给子组件的数据，就像函数的参数，组件也需要参数才能知道该怎么工作，而props就是这个参数

为什么需要props?

因为组件是可以复用的，不能在组件里写死数据，例如做一个按钮组件<MyButton>

有的按钮是红色
有的是绿色
有的是大按钮
有的是小按钮

如果都写死，那组件就没法复用了

所以props让这样用：

html 复制代码

<MyButton color="red" size="large" />
<MyButton color="green" size="small" />

vue中如何定义

js 复制代码

const props = defineProps({
  color: String,
  size: String
})

例如：

子组件:

js 复制代码

<script setup>
const props = defineProps({
  mode: {
    type: String,
    default: 'vertical'
  }
})
</script>

<template>
  <div>当前模式：{{ props.mode }}</div>
</template>

父组件：

父组件只是传值，不定义props

js 复制代码

<MyMenu mode="horizontal" />

除了父组件，任何地方都不能直接修改props 因为vue的设计理念是：父组件负责数据，子组件负责展示和逻辑，子组件不能私自篡改父组件的数据

v-model

v-model = 把组件的值和变量做双向绑定

html 复制代码

<el-switch size="default" v-model="appStore.watermarking"  @change="appStore.changeWatermarking()"/>

即：

el-switch 显示的开/关状态 = appStore.watermarking
你点击 switch → Element Plus 自动把新值写回 appStore.watermarking

也就是说，点switch的同时，ElementPlus自动执行appStore.watermarking = true/false

@change这里用来进行一些存数据库或发日志等辅助操作：

html 复制代码

const changeWatermarking = () => {
        dbUtils.set('watermarking', watermarking.value);
}