【金秋打卡】第22天 组件动态 CSS 值

课程名称：基于Vue3最新标准，实现后台前端综合解

课程章节： 第一章

课程讲师：Sunday

课程内容

        在 vue 3.2 最新更新中，除了 响应式变化 之外，还有另外一个很重要的更新，那就是 组件状态驱动的动态 CSS 值

<template>
  ... 
   <el-avatar   :size="logoHeight" >
   ... 
 </template> 
 <script setup> 
   ... 
   const logoHeight = 44 
 </script> 
 <style scoped> 
   .logo-container {   
       height: v-bind(logoHeight) + 'px';
       ...
    } 
 </style>

接下来是 动画处理  transition-group

<template>
  <el-breadcrumb class="breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      ...
    </transition-group>
  </el-breadcrumb>
</template>

.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}
.breadcrumb-leave-active {
  position: absolute;
}

接下来说下 自定义主题

在代码中 需要进行自定义主题变更 成 menu 菜单背景色

其实实现原理也是通过vuex

<el-menu    :default-active="activeMenu"
    :collapse="!$store.getters.sidebarOpened"
    :background-color="$store.getters.cssVar.menuBg"
    :text-color="$store.getters.cssVar.menuText"
    :active-text-color="$store.getters.cssVar.menuActiveText"
    :unique-opened="true"
    router  >

在el-menu 里面设置 v-model 绑定vuex

import variables from '@/styles/variables.scss'
import { MAIN_COLOR } from '@/constant'
import { getItem } from '@/utils/storage'
import { generateColors } from '@/utils/theme'
const getters = {
  ...
  cssVar: state => {
    return {
      ...variables,
      ...generateColors(getItem(MAIN_COLOR))
    }
  },
  ...}
  
  export default getters

但在开发过程中 没有进行变更

<sidebar
      id="guide-sidebar"
      class="sidebar-container"
      :style="{ backgroundColor: $store.getters.cssVar.menuBg }"
    />

import variables from '@/styles/variables.scss'export default {
  namespaced: true,
  state: () => ({
    ...
    variables  }),
  mutations: {
    /**
     * 设置主题色
     */
    setMainColor(state, newColor) {
      ...
      state.variables.menuBg = newColor      ...
    }
  }}

这个是因为 getters 中没有监听到 依赖值的响应变化，所以我们希望修改依赖值