主题切换

Props参数下发

提供一个theme.js数据文件，包含了DEFAULT和FIRST 等配置

const DEFAULT_THEME = {
  primary: '#2F54EB',
  subPrimary: '#D6E4FF',
  error: '#F5222D',
  success: '#52C41A',
  warning: '#FAAD14',
  background: '#FFFFFF',
  text: '#222222'
}
export default {
    DEFAULT: DEFAULT_THEME,
    FIRST: {
        ...DEFAULT_THEME,
        background: '#2590ff'
    }
}

在组件中使用

<script>
import theme from 'theme.js'
export default {
    name: "themeChange",
    data() {
        return {
            theme: theme['DEFAULT']
        }
    },
    methods: {
        changeTheme() {
            this.theme = theme['FIRST']
        }
    }
}
</script>

Ajax替换

通过Ajax获取css，然后替换其中的颜色变量，再通过style标签将样式插入DOM

动态Less

使用可以在浏览器上直接运行的less，通过传入变量动态编译。

最后更新于5年前

这有帮助吗？