1.新建seeting.js(前提是你项目里用了less)
//自定义字体及主题颜色
export function defaultFontSize(fontSizec,color){
let headerHeight='166px'
let navHeight='75px'
let fontSizeXl = '36px'
let fontSizeLg = '26px'
let fontSizeMd = '24px'
let fontSizeSm = '22px'
let fontSizeXs = '20px'
let fontSizeXXs = '18px'
let userInfoWidth = '90px'
let fontSizeAnticon = '60px'
let defaultColor =color
switch (fontSize) {
case '24px':
headerHeight='144px'
navHeight = '53px'
fontSizeXl = '28px'
fontSizeLg = '20px'
fontSizeMd = '18px'
fontSizeSm = '16px'
fontSizeXs = '14px'
fontSizeXXs = '14px'
userInfoWidth = '70px'
fontSizeAnticon='30px'
break;
case '16px':
headerHeight='113px'
navHeight = '40px'
fontSizeXl = '32px'
fontSizeLg = '20px'
fontSizeMd = '18px'
fontSizeSm = '16px'
fontSizeXs = '14px'
fontSizeXXs = '12px'
userInfoWidth = '70px'
fontSizeAnticon='34px'
break;
case '14px':
headerHeight='113px'
navHeight = '40px'
fontSizeXl = '30px'
fontSizeLg = '18px'
fontSizeMd = '16px'
fontSizeSm = '14px'
fontSizeXs = '12px'
fontSizeXXs = '10px'
userInfoWidth = '70px'
fontSizeAnticon='34px'
break;
default:
break;
}
return {
'@primary-fontSize': fontSize,
'@primary-fontSize-xl':fontSizeXl,
'@primary-fontSize-lg': fontSizeLg,
'@primary-fontSize-md': fontSizeMd,
'@primary-fontSize-sm':fontSizeSm,
'@primary-fontSize-xs':fontSizeXs,
'@primary-fontSize-xxs':fontSizeXXs,
'@primary-anticon':fontSizeAnticon,
'@header-height':headerHeight,
'@primary-userInfoWidth':userInfoWidth,
'@nav-height':navHeight,
'@defaultColor':defaultColor,
}
}
const updateThemeFonSize = primaryColor => {
console.log(primaryColor)
if (!primaryColor) {
return;
}
console.info(`正在编译主题!`)
function buildIt() {
// 正确的判定less是否已经加载less.modifyVars可用
if (!window.less || !window.less.modifyVars) {
return;
}
localStorage.setItem('fontSize',primaryColor)
// console.log(localStorage.getItem('color'))
let defaultSize = defaultFontSize(primaryColor)
// console.log(defaultSize)
// less.modifyVars可用
window.less.modifyVars({
'@primary-color': localStorage.getItem('color'),
'@btn-primary-bg': localStorage.getItem('color'),
...defaultSize
})
.then(() => {
console.log(`成功`);
})
.catch((err) => {
// console.log(err)
// console.error(`失败`);
});
}
buildIt();
};
export { updateThemeFonSize }
2.在你需要自定的地方引入updateThemeFonSize,然后传入字体跟主题颜色
import { updateThemeFonSize } from '@/utils/setting'
updateThemeFonSize('24px','#f00)
3.vue3.0在public静态文件夹里面新建文件,在index.html里面引入fontSize.less。自此完成了,快配置试试