iview动态换肤

实现方案 :

• 在public文件中新建一份iview.css(直接拷贝当前iview版本下的iview.css)
• 在index.html中使用link的方式来引入iview.css

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>iview动态换肤</title>
    <link rel="stylesheet" href="./iview.css" >
    <meta id="iviewCss"> <-- 为了将新创建的style放置到当前标签之前-->
</head>
<body>
    <div id="app"></div>
</body>
</html>

• 新建ThemePicker.vue文件

//ThemePicker.vue
<template>
    <div>
        <ColorPicker
            v-model="color"
            :colors="['#6f2fc9','#2d8cf0']"
            recommend
            @on-change="getThemeCss('customCss')"
            @on-open-change="colorOpenChange" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            color: "#6f2fc9", 
            defaultColor: "#6f2fc9" //iview原始color
        }
    },
    created() {
        this.getThemeCss("customCss");
    },
    methods: {
        //实现less fade函数
        fade(rgb, opacity) {
            let list = this.formatRgbaList(this.hexToRgba(rgb, opacity));
            list[3] = opacity;
            (opacity+"").substring(0,1)==="0"?list[3]=(opacity+"").substring(1):'';
            return `${list.join()}`
        },
        //实现less tint函数
        tint(rgb, opacity) {
            let list = this.formatRgbaList(this.hexToRgba(rgb, opacity));
            for (let i = 0; i < 3; i++) {
                list[i] = Math.ceil(list[i] + (255 * opacity) - (list[i] * opacity));
            }
            return this.rgbaToHex(`rgb(${list.join()})`)
        },
        //实现less shade函数
        shade(rgb, opacity) {
            let list = this.formatRgbaList(this.hexToRgba(rgb, opacity));
            for (let i = 0; i < 3; i++) {
                list[i] = Math.ceil(list[i] - list[i] * opacity);
            }
            return this.rgbaToHex(`rgb(${list.join()})`)
        },
        //将rgba格式化为数组
        formatRgbaList(rgba) {
            let list = rgba.replace('rgba(', '').replace(')', '').split(',');
            list = [...list].map(Number);
            return list;
        },
        //hex转换rgba
        hexToRgba(hex, opacity) {
            return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' +
                parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')';
        },
        //rgba转换hex
        rgbaToHex(rgba) {
            var bg = rgba.match(/^rgb\((\d+),\s*(\d+),\s*(\d+),\s*(\d?(\d|(\.[0-9]{1,2})))\)$/);

            function hex(x) {
                return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            return ("#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3])).toUpperCase();
        },
        //获取主题css
        getThemeCss(id) {
            if (!this.color) return;
            this.$axios.get('/iview.css').then(res => {
                let defaultColor = this.;
                let cssReg = new RegExp(defaultColor, 'gi');
                let tintReg = new RegExp(this.tint(defaultColor, .2), 'gi');
                let shadeReg = new RegExp(this.shade(defaultColor, .05), 'gi');
                let fadeReg = new RegExp("rgba\\("+this.fade(defaultColor, .9)+"\\)", 'gi');
                res = res.replace(cssReg, this.color);
                res = res.replace(tintReg, this.tint(this.color, .2));
                res = res.replace(shadeReg, this.shade(this.color, .05));
                res = res.replace(fadeReg, "rgba("+this.fade(this.color, .9)+")");
                let styleTag = document.getElementById(id);
                if (!styleTag) {
                    styleTag = document.createElement('style');
                    styleTag.setAttribute('id', id);
                    document.head.insertBefore(styleTag, document.head.querySelector('#iviewCss'));
                }
                styleTag.innerText = res;
            })
        },
        colorOpenChange(val) {
            val && this.color === "" ? this.color = "#6f2fc9" : '';
        }
    }
}
</script>

思路 :

• iview.css通过link方式引入
• 利用主题颜色及混合后的颜色替换掉iview.css中的颜色值,并创建style标签插入到link iview.css之后。

本文由 ws 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Dec 10, 2019 at 12:45 pm