动态样式
# 动态样式
在getters.js
import variables from '@/styles/variables.scss'
// 快捷访问
const getters = {
token: state => state.user.token,
// true 用户信息已存在
hasUserInfo: state => {
return JSON.stringify(state.user.userInfo) !== '{}'
},
userInfo: state => state.user.userInfo,
cssVar: state => variables,
sidebarOpened: state => state.app.sidebarOpened
}
export default getters
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
在页面使用
<script setup>
...
// 将来需要进行主题替换，所以这里获取下动态样式
const store = useStore()
// eslint-disable-next-line
const linkHoverColor = ref(store.getters.cssVar.menuBg)
...
</script>
<style lang="scss" scoped>
.breadcrumb {
...
.redirect {
color: #666;
font-weight: 600;
}
.redirect:hover {
// 将来需要进行主题替换，所以这里不去写死样式
color: v-bind(linkHoverColor);
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
上次更新: 2025/06/23, 07:26:12