请问下面vue3换肤代码,有什么问题 import {light,dark,blue} from '@/styles/variable.js' import cssVars from 'css-vars-ponyfill' const themes = { dark: './element/dark.scss', light: './element/light.scss', blue: './element/blue.scss', } export const initTheme=(theme)=>{ // 设置html class类 属性 if(theme==='light'){ document.documentElement.setAttribute('class', 'light') }else { document.documentElement.setAttribute('class', 'dark') } // 动态引入element主题 const themePath = themes[theme] || themes.light //根据theme 动态引入element 样式,会覆盖掉第一次引入的样式 import(themePath).then(()=>{ cssVars({ watch:true, shadowDOM:true, //处理shadow dom variables:theme==='dark'?dark:theme==='light'?light:blue, //更新值用 setProperty() onlyLegacy:true, //默认true 设置false将所有浏览器视为旧版 //默认true 确定是否在转换后的 CSS 中保留不引用自定义属性的 CSS 声明 preserveStatic:true, // 默认false 确定是否在转换后的CSS中保留CSS自定义属性声明 preserveVars:false, // 是否在控制台显示错误信息,默认false silent: false, // 确定在处理CSS自定义属性后是否更新DOM,默认true updateDOM:true }) }) }
理解问题请问下面vue3换肤代码,有什么问题 import {light,dark,blue} from '@/styles/variable.js' import cssVars from 'css-vars-ponyfill' const themes = { dark: './element/dark.scss', light: './element/light.scss', blue: './element/blue.scss', } export const initTheme=(theme)=>{ // 设置html class类 属性 if(theme==='light'){ document.documentElement.setAttribute('class', 'light') }else { document.documentElement.setAttribute('class', 'dark') } // 动态引入element主题 const themePath = themes[theme] || themes.light //根据theme 动态引入element 样式,会覆盖掉第一次引入的样式 import(themePath).then(()=>{ cssVars({ watch:true, shadowDOM:true, //处理shadow dom variables:theme==='dark'?dark:theme==='light'?light:blue, //更新值用 setProperty() onlyLegacy:true, //默认true 设置false将所有浏览器视为旧版 //默认true 确定是否在转换后的 CSS 中保留不引用自定义属性的 CSS 声明 preserveStatic:true, // 默认false 确定是否在转换后的CSS中保留CSS自定义属性声明 preserveVars:false, // 是否在控制台显示错误信息,默认false silent: false, // 确定在处理CSS自定义属性后是否更新DOM,默认true updateDOM:true }) }) }
已完成理解「请问下面vue3换肤代码,有什么问题 import {light,dark,blue} from '@/styles/variable.js' import cssVars from 'css-vars-ponyfill' const themes = { dark: './element/dark.scss', light: './element/light.scss', blue: './element/blue.scss', } export const initTheme=(theme)=>{ // 设置html class类 属性 if(theme==='light'){ document.documentElement.setAttribute('class', 'light') }else { document.documentElement.setAttribute('class', 'dark') } // 动态引入element主题 const themePath = themes[theme] || themes.light //根据theme 动态引入element 样式,会覆盖掉第一次引入的样式 import(themePath).then(()=>{ cssVars({ watch:true, shadowDOM:true, //处理shadow dom variables:theme==='dark'?dark:theme==='light'?light:blue, //更新值用 setProperty() onlyLegacy:true, //默认true 设置false将所有浏览器视为旧版 //默认true 确定是否在转换后的 CSS 中保留不引用自定义属性的 CSS 声明 preserveStatic:true, // 默认false 确定是否在转换后的CSS中保留CSS自定义属性声明 preserveVars:false, // 是否在控制台显示错误信息,默认false silent: false, // 确定在处理CSS自定义属性后是否更新DOM,默认true updateDOM:true }) }) }」
展开阅读网页