1. 样式文件目录介绍
本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口 ，common.scss 是供全局使用的一些基本样式(常量）， _theme.scss、_handle.scss 两个文件是进行主题颜色配置的文件。
如下图，将 index.scss 在 main.js 文件中引入即可全局使用。.
2. 主题 scss 文件配置
src/assets/css 目录下的 _themes.scss，里面可配置不同的主题配色方案，本文配置了两个主题颜色：light、dark。
@import './common.scss';
$themes: (
light: (
bg-color: $white,
font-color: $regularBlack,
link-color: $grey,
icon-home: url('~@/assets/img/icon/lightHomeIcon.svg'),
icon-filter: url('~@/assets/img/icon/lightFilter.png'),
),
dark: (
bg-color: $black,
font-color: $white,
link-color: $blue,
icon-home: url('~@/assets/img/icon/darkHomeIcon.svg'),
icon-filter: url('~@/assets/img/icon/darkFilter.png'),
)
)src/assets/css 目录下的 _handle.scss 用来操作上述 _themes.scss 中 $theme 的变量，_handle.scss 文件内容：
@import "./_themes.scss";
// 从主题色map中取出对应颜色
@function themed($key) {
@return map-get($theme-map, $key);
}
// 切换主题时 获取不同的主题色值
@mixin themeify {
@each $theme-name,$theme-map in $themes {
// !global 把局部变量强升为全局变量
$theme-map: $theme-map !global;
// 判断html的data-theme的属性值 #{}是sass的插值表达式
// & sass嵌套里的父容器标识 @content是混合器插槽，像vue的slot
[data-theme="#{$theme-name}"] & {
@content;
}
}
}
// 获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color) !important;
}
}
// 获取背景图片
@mixin background_image($color) {
@include themeify {
background-image: themed($color) !important;
}
}
// 获取图片
@mixin content($color) {
@include themeify {
content: themed($color) !important;
}
}
// 获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color) !important;
}
}
// 获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color) !important;
服务器托管网 }
}3. 组件中使用
样式文件都配置完成了，怎么设置当前需要使用的主题呢 ？
- 此处具体情况具体分析，在合适的页面或位置写入即可，本文是写在了 App.vue 项目入口文件中，通过
window.document.documentElement.setAttribute();方法传入当前想要使用的主题。本文默认传入的 ‘light’，则 vue 页面中使用的即为 _theme.scss 中的 light 对象下配置好的颜色或者其他属性；
- 设置其他主题色（如：dark、blue）同理，前提是 _theme.scss 文件中存在配置好的对应主题样式；
// App.vue
主页
图表
折线图
表格
普通表格
动态表格
export default {
data(){
return {
switchVal: false,
activeIndex: '/home',
}
},
methods:{
switchChange(val){
if(val){
window.document.documentElement.setAttribute('data-theme', "dark");
}else{
window.document.documentElement.setAttribute('data-theme', "light");
}
},
handleSelect(key, keyPath) {
this.$router.push(key)
}
},
mounted(){
this.switchChange(this.switchVal);
}
}
// 引入主题配置文件
@import "@/assets/css/_handle.scss";
#app {
height: 100vh;
text-align: center;
@include background_color('bg-color');
// background_color 为 _handle.scss 文件中配置好的属性，传入'bg-color'即可通过当前的主题配置在 _theme.scss 文件中取色。
.fun{
width: 100%;
display: flex;
justify-content: flex-end;
padding: 5px;
box-sizing: border-box;
}
}
ho服务器托管网me.vue 中同理
@import "@/assets/css/_handle.scss";
.home{
text-align: center;
@include font_color('font-color');
.homeIcon{
width: 14px;
height: 14px;
margin-right: 5px;
display: inline-block;
background-size: 100% 100%;
@include background_image('icon-home');
}
a{
@include font_color('link-color');
}
}
4. 效果
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: MindSponge分子动力学模拟——使用迭代器进行系统演化（2023.09）
技术背景 在前面几篇博客中，我们已经介绍过使用MindSponge去定义一个系统以及使用MindSponge计算一个分子系统的单点能。这篇文章我们将介绍一下在Mi服务器托管网ndSponge中定义迭代器Updater，并使用Sponge对系统进行演化，最后使用…
