为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第22天 组件动态 CSS 值

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

2022.11.14 09:05 252浏览

课程名称:基于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















点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
15
获赞与收藏
9

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消