CSS教程

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

本文主要是介绍【金秋打卡】第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

https://img4.sycdn.imooc.com/637194270001211602300416.jpg

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

<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 中没有监听到 依赖值的响应变化,所以我们希望修改依赖值



https://img3.sycdn.imooc.com/637191d200010ca910940772.jpg















这篇关于【金秋打卡】第22天 组件动态 CSS 值的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!