网站设计稿是怎么做的,手机建站cms,潍坊网站定制,广告公司名称推荐是看了袁老师的视频后#xff0c;自己做了一下练习。原视频地址#xff1a;
b站地址https://www.bilibili.com/video/BV15z4y1N7jB/?spm_id_from333.1007.top_right_bar_window_history.content.clickvd_sourcec6cf63302f28d94ebc02cbedcecc57ea首先创建一个全局的scs…是看了袁老师的视频后自己做了一下练习。原视频地址
b站地址https://www.bilibili.com/video/BV15z4y1N7jB/?spm_id_from333.1007.top_right_bar_window_history.content.clickvd_sourcec6cf63302f28d94ebc02cbedcecc57ea首先创建一个全局的scss文件。我这里放在了assets文件夹中创建了一个theme的文件夹里面放置了一个theme.scss
// 主题
$themes: (// 白亮light: (background: #fff,color: #000,textColor: #000),// 暗黑dark: (background: #121212,color: #fff,textColor: #fff)
);// 当前主题
$curTheme: light;// 混合
// mixin useTheme() {
// html[data-themelight] {
// background-color: #fff;
// color: #000;
// }
// html[data-themedark] {
// background-color: #121212;
// color: #fff;
// }
// }// 混合优化遍历上面的主题
mixin useTheme() {each $key, $value in $themes {$curTheme: $key !global; // 当前的主题html[data-theme #{$key}] { // 表示传入什么选择器就是什么选择器content; // 类似于插槽样式可以进行传入}}
}// 生成对应主题的变量
function getVar($key) {$themeMap: map-get($themes, $curTheme);return map-get($themeMap, $key);
}
然后通过vite进行这个scss文件的全局配置这样就不用多次引入了。修改vite.config.ts文件。修改之后记得重新npm run dev重新启动一下
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}},// 上面的是默认的css: { // 引入全局的scss文件// css预处理器preprocessorOptions: {scss: {// 引入 theme.scss 这样就可以在全局中使用 theme.scss中预定义的变量和方法了// 给导入的路径最后加上 ; additionalData: import ./src/assets/theme/theme.scss;}}}
})然后就可以进行测试了
templatediv classtest123/divel-switch v-modelflag changechange/el-switch
/templatescript setup langts
import { ref } from vue// 这里从本地取是为了保持刷新以后也能一致
const flag ref(localStorage.getItem(theme) dark ? true : false)const change (flag: boolean) {localStorage.setItem(theme, flag ? dark : light) // 存本地刷新的时候会用// 控制html标签给自定义属性data-theme添加对应的值这样对应的样式就会生效document.querySelector(html)?.setAttribute(data-theme, flag ? dark : light)
}
/scriptstyle langscss
// 由于vite已经配置过了所以不需要引入了。如果引入失败那就老老实实在使用的文件中都引入
// import ../assets/theme/theme.scss; // 使用测试
.test {// 共有样式部分width: 100px;height: 100px;// 黑白主题特有部分样式include useTheme() {background-color: getVar(background);color: getVar(color);}
}
/style
白亮的 暗黑的 但是会有一个问题就是刷新的时候发现html标签的data-theme自定义属性丢失了。所以就需要在App.vue文件中重新再给html标签设置一下data-theme自定义属性值就是我们存本地的值
script setup langts
import { RouterView } from vue-router// 添加主题,每次刷新的时候还是原先选择的主题
let theme localStorage.getItem(theme) || light
document.documentElement.setAttribute(data-theme, theme)
/scripttemplateRouterView /
/templatestyle langscss
* {padding: 0;margin: 0;box-sizing: border-box;
}html,body,#app {width: 100%;height: 100%;
}
/style这样刷新的话也不会受到影响了
