【金秋打卡】第22天 组件动态 CSS 值
2022/11/15 4:24:00
本文主要是介绍【金秋打卡】第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 中没有监听到 依赖值的响应变化,所以我们希望修改依赖值
这篇关于【金秋打卡】第22天 组件动态 CSS 值的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享