一、英雄榜实现

1、引入element Lib 和VUE

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>英雄榜</title>
    <link rel="stylesheet" href="js/element_lib/theme-chalk/index.css">
    <link rel='stylesheet' href='assets/myCss/gudianxiaoshuo.css' charset="utf-8">
</head>
<link rel='stylesheet' href='assets/css/kuaileketang.css' charset="utf-8">
<script src="js\vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/comp/comp_headBtns.js" charset="utf-8"></script>

2、设置滚动条动态显示

<style>
    ::-webkit-scrollbar {
  				width: 16px;
			    display:var(--scrollbar);
			}
			::-webkit-scrollbar-thumb {
		    background:var(--scrollCorlor);
		    box-shadow: inset 0 0 4px green; 
			border-radius: 30px;
		   }
		  #mainContent:fullscreen {  
			background-color:var(--fullCorlor);
		  }
		  #mainContent{
				padding-left: 100px;
				padding-right:100px;
			}
</style>

1）设置对应的VUE参数名：scrollHiddenVar

:style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar}">

2）VUE data定义

     scrollHiddenVar: 'none',

3）mounted 设置鼠标监听事件

   window.addEventListener('mousemove', this.myEventFunc);

4）监听方法

        myEventFunc(event) {
            let x = event.pageX;
            let rect = document.getElementById('mainContent').getBoundingClientRect();
            if (x > rect.right - 50)
                this.scrollHiddenVar = 'inline';
            else
                this.scrollHiddenVar = 'none';


        }

3、设置element Table

            <el-main1 id='mainContent' style='overflow:auto;' :style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar}">
                <el-table :show-header=true :data='tableData1' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
                    <el-table-column align='center' prop='id' label='英雄榜' width='180'>
                    </el-table-column>
                    <el-table-column align='center' prop='name' label='姓名'>
                    </el-table-column>
                    <el-table-column align='center' prop='score' label='分数'>
                    </el-table-column>
                </el-table>
                <el-table :show-header=false :data='tableData2' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
                    <el-table-column align='center' prop='id' label='英雄榜' width='180'>
                    </el-table-column>
                    <el-table-column align='center' prop='name' label='姓名'>
                    </el-table-column>
                    <el-table-column align='center' prop='score' label='分数'>
                    </el-table-column>
                </el-table>
                <el-table :show-header=false :data='tableData3' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
                    <el-table-column align='center' prop='id' label='英雄榜' width='180'>
                    </el-table-column>
                    <el-table-column align='center' prop='name' label='姓名'>
                    </el-table-column>
                    <el-table-column align='center' prop='score' label='分数'>
                    </el-table-column>
                </el-table>
                <el-table :show-header=false :data='tableData4' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
                    <el-table-column align='center' prop='id' label='英雄榜' width='180'>
                    </el-table-column>
                    <el-table-column align='center' prop='name' label='姓名'>
                    </el-table-column>
                    <el-table-column align='center' prop='score' label='分数'>
                    </el-table-column>
                </el-table>
                <el-table :show-header=false :data='tableData5' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
                    <el-table-column align='center' prop='id' label='英雄榜' width='180'>
                    </el-table-column>
                    <el-table-column align='center' prop='name' label='姓名'>
                    </el-table-column>
                    <el-table-column align='center' prop='score' label='分数'>
                    </el-table-column>
                </el-table>
                <p></p>
            </el-main1>

4、table 数组

function getTableNum() { return 5; }

function getTable1() {
    var tableData = [{ id: '至尊王者 4人', name: '刘心莹', score: 231 },
        { id: '至尊王者 4人', name: '梁维佳', score: 170 },
        { id: '至尊王者 4人', name: '陈玉雨', score: 127 },
        { id: '至尊王者 4人', name: '王静萱', score: 114 }
    ]
    return tableData;
}

function getTable2() {
    var tableData = [{ id: '王者 13人', name: '黄健桐', score: 106 },
        { id: '王者 13人', name: '梁舒然', score: 104 },
        { id: '王者 13人', name: '刘江彬', score: 98 },
        { id: '王者 13人', name: '陀天成', score: 95 },
        { id: '王者 13人', name: '林喜兰', score: 93 },
        { id: '王者 13人', name: '张嘉怡', score: 93 },
        { id: '王者 13人', name: '甘紫琳', score: 92 },
        { id: '王者 13人', name: '刘航兰', score: 91 },
        { id: '王者 13人', name: '谭李明', score: 90 },
        { id: '王者 13人', name: '黎挺彬', score: 90 },
        { id: '王者 13人', name: '李柱炫', score: 90 },
        { id: '王者 13人', name: '梁韵怡', score: 90 },
        { id: '王者 13人', name: '郑海华', score: 90 }
    ]
    return tableData;
}

function getTable3() {
    var tableData = [{ id: '黄金 8人', name: '李光森', score: 88 },
        { id: '黄金 8人', name: '梁健宇', score: 88 },
        { id: '黄金 8人', name: '梁欣棋', score: 88 },
        { id: '黄金 8人', name: '欧家成', score: 88 },
        { id: '黄金 8人', name: '陈俊昌', score: 88 },
        { id: '黄金 8人', name: '秦子航', score: 85 },
        { id: '黄金 8人', name: '刘童瑶', score: 85 },
        { id: '黄金 8人', name: '郑丽莎', score: 85 }
    ]
    return tableData;
}

function getTable4() {
    var tableData = [{ id: '白银 1人', name: '梁洪霖', score: 72 }]
    return tableData;
}

function getTable5() {
    var tableData = [{ id: '青铜', name: '无' }]
    return tableData;
}

5、VUE 核心代码

new Vue({
    el: '#app',
    data: function() {
        return {
            fit: "contain",
            imgUrl: 'http://gudianxiaoshuo.com/js/logo.gif',
            gongzhonghaoUrl: 'http://gudianxiaoshuo.com/js/gongzhonghao.jpg',
            toutiaohaoUrl: 'http://gudianxiaoshuo.com/js/toutiaohao.png',
            options: [],
            colorArr: [],
            colorName: '默认',
            fontName: "宋体",
            fontSizeOptions: [],
            fontSize: 20,
            textColor: null,
            bgColor: null,
            showTip: true,
            foolcolorVar: 'rgb(255,255,255)',
            scrollcolorVar: 'rgb(255,255,255)',
            scrollHiddenVar: 'none',
            zanshangUrl: "",
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            tableData5: [],
            tableData6: [],
            tableData7: [],
            tableData8: [],
            tableData9: [],
            tableData10: [],
            tableData11: [],
            tableData12: [],
            tableData13: [],
            tableData14: [],
            tableData15: [],
            tableData16: [],
            tableData17: [],
            tableData18: [],
            tableData19: [],
            tableData20: []
        }
    },

    methods: {
        open() {
            this.$message('右键，选择大声朗读即可');
        },
        closeTip() {
            localStorage.setItem('tipClosed', '1');
        },
        selectOne(fontName) {
            var fontFamily = "font-family:" + fontName;
            document.querySelector('#app').style.setProperty('font-family', fontName)
            localStorage.setItem('font', fontFamily);
            localStorage.setItem('fontName', fontName);
        },
        selectFontSize(fontSize) {

            // document.body.requestFullscreen();   

            document.querySelector('#app').style.setProperty('font-size', fontSize)
            localStorage.setItem('fontSize', fontSize);
        },
        selectColorName(colorIndex) {
            console.log(colorIndex);
            console.log(this.colorArr[colorIndex]);
            this.setTBColor(this.colorArr[colorIndex].textcolor, this.colorArr[colorIndex].bg);
            localStorage.setItem('corlorIndex', colorIndex);
        },
        setTBColor(textColor, bgColor) {
            document.querySelector('body').style.setProperty('background', bgColor)
            var x = document.querySelectorAll("p");
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.color = textColor;
            }
            localStorage.setItem('bg', bgColor);
            localStorage.setItem('pColor', textColor);
            this.textColor = textColor;
            this.bgColor = bgColor;
        },
        el_colorPic_change() {
            this.setTBColor(this.textColor, this.bgColor);
            this.saveRand(this.textColor, this.bgColor);
            console.log(this.textColor)
        },
        saveRand(textColor, bgColor) {
            var lastElemName = this.colorArr[this.colorArr.length - 1].name;
            if (lastElemName == '随机色') {
                this.colorArr[this.colorArr.length - 1].bg = bgColor;
                this.colorArr[this.colorArr.length - 1].textcolor = textColor;
            } else {

                var fontElem = {};
                fontElem.name = '随机色';
                fontElem.bg = bgColor;
                fontElem.textcolor = textColor;
                this.colorArr.push(fontElem);
            }
            localStorage.setItem('Randbg', bgColor);
            localStorage.setItem('RandTColor', textColor);
        },
        rdmRgbColor() {
            const arr = [];
            for (let i = 0; i < 3; i++) {
                arr.push(Math.floor(Math.random() * 256));
            }
            const [r, g, b] = arr;
            var color = `rgb(${r},${g},${b})`;
            return color;
        },


        colorBtn: function(name) {
            console.log(name);
            if (name == "btn1") {
                this.setTBColor('rgb(89,89,89)', 'rgb(255,255,255)');
            } else if (name == "btn2") {
                this.setTBColor('rgb(91,70,54)', 'rgb(242,236,216)');
            } else if (name == "btn3") {
                this.setTBColor('rgb(51,51,51)', 'rgb(206,234,186)');
            } else if (name == "btn4") {
                this.setTBColor('rgb(157,159,163)', 'rgb(69,72,74)');
            } else if (name == "btn5") {
                this.setTBColor('rgb(181,172,162)', 'rgb(51,51,51)');
            } else if (name == 'rand') {
                let bgColor = this.rdmRgbColor();
                let textColor = this.rdmRgbColor();
                this.setTBColor(textColor, bgColor);
                this.saveRand(textColor, bgColor);

            } else if (name == 'full') {

                var bgColor = localStorage.getItem('bg');
                this.foolcolorVar = bgColor;
                this.scrollcolorVar = bgColor;
                document.getElementById('mainContent').requestFullscreen();
            } else if (name == 'fav') {
                var bHasScroll = this.bHasScrollbar();
                this.hideScroll();
                this.takeScreenshot();

                if (bHasScroll)
                    this.showScroll();
                //    this.$message({
                // dangerouslyUseHTMLString: true,
                // message:'浏览器不支持自动添加收藏夹标签。请您使用快捷键   <strong style="color:red"><i> Ctrl+D</i> </strong>进行添加'}
                // );

                //this.scrollHiddenVar=scrollVar;
            }
        },
        hideScroll() {
            $("html").height($("window").height()).css({
                "overflow-y": "hidden"
            }); //弹出框时隐藏滚动条

            $("html").css("margin-right", 17); //隐藏滚动条时防止页面偏题

        },
        showScroll() {
            $("html").height($(window).height()).css({
                "overflow-y": "auto"
            }); //弹出框时隐藏滚动条
            $("html").css("margin-right", 0); //隐藏滚动条时防止页面偏题
        },
        bHasScrollbar() {
            return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
        },

        myEventFunc(event) {
            let x = event.pageX;
            let rect = document.getElementById('mainContent').getBoundingClientRect();
            if (x > rect.right - 50)
                this.scrollHiddenVar = 'inline';
            else
                this.scrollHiddenVar = 'none';


        },
        myHandleSelect(key) {

            location.href = key;
        },
        SpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0) {
                    return {
                        rowspan: 1000,
                        colspan: 1
                    };
                } else if (1 <= rowIndex && rowIndex <= 1000) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }

                // else  if (rowIndex  === 4) {
                //   return {
                //     rowspan: 2,
                //     colspan: 1
                //   };
                // } 
                // else if (5<=rowIndex  && rowIndex<=8) 
                // {
                //   return {
                //     rowspan: 0,
                //     colspan: 0
                //   };
                // }           
            }
        },

        RowStyle({ row, column, rowIndex, columnIndex }) {

            // if (rowIndex <= 3) {
            //     let styleJson = {
            //         "background": "#FAF4FF"
            //     };
            //     return styleJson
            // } else if (rowIndex <= 6) {

            //     let styleJson = {
            //         "background": "#FFF7FB"
            //     };
            //     return styleJson
            // } else {

            //     let styleJson = {
            //         "background": "#DFFFDF"
            //     };
            //     return styleJson
            // }

            let styleJson = {
                "background": "rgb(255, 245, 247)"
            };
            return styleJson
        },
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0)
                return "background:rgb(217, 104, 49);color:#000;textAlign:center;";
        },
        headerStyle({ row, column, rowIndex, columnIndex }) {

            if (rowIndex == 0 && columnIndex == 0) {
                this.$nextTick(() => {
                    // 获取表头的所有单元格
                    let n = document.getElementsByClassName("el-table__header")[0].rows[0].cells
                    // 将第二列表头单元格的colSpan设为2
                    n[0].colSpan = 3
                    // 将第三列表头单元格的display设为none
                    n[1].style.display = 'none'
                    n[2].style.display = 'none'
                });
            }

            //  // 1.2 被覆盖的进行隐藏
            //   if (rowIndex === 0 && (columnIndex == 1 || columnIndex == 2)) {
            //     return {
            //       display: "none",
            //     };
            // }

            //  row[0].colSpan=3
            //  row[1].colSpan=0
            //  row[2].colSpan=0


            // if(columnIndex==2||columnIndex==1)
            //   return { display: "none" };


            return "background:rgb(255, 245, 247);color:#000;textAlign:center; fontSize:60px;";


        },
        takeScreenshot() {
            const node = document.getElementById('mainContent')
            html2canvas(node, {
                useCORS: true,
                height: node.offsetHeight,
                width: node.offsetWidth,
                scrollY: 0,
                scrollX: 0,
                backgroundColor: this.bgColor,
                scale: 2, // 处理模糊问题
                dpi: 300, // 处理模糊问题
            }).then(async (canvas) => {
                let oImg = new Image();
                oImg.src = canvas.toDataURL(); // 导出图片
                //document.body.appendChild(oImg);  // 将生成的图片添加到body
                //以下代码为下载此图片功能
                var triggerDownload = $("<a>").attr("href", oImg.src).attr("download", "英雄榜.png").appendTo("body");
                triggerDownload[0].click();
                triggerDownload.remove();

            })
        }

    },
    created() {
        console.log("beforeMount")
        if ($("#youshengHeader"))
            console.log("youshengHeader")
        // $("#youshengHeader").load('http://gudianxiaoshuo.com/js/youshengHeader.html')
    },
    beforeMount() {

    },
    mounted() {

        let tableNum = getTableNum();

        switch (tableNum) {
            case 1:
                this.tableData1 = getTable1();
                break;
            case 2:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                break;
            case 3:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                break;
            case 4:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                break;
            case 5:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                break;

            case 6:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                break;
            case 7:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                break;

            case 8:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                break;
            case 9:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                break;

            case 10:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                break;
            case 11:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                break;
            case 12:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                break;

            case 13:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                break;
            case 14:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                break;
            case 15:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                break;
            case 16:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                break;
            case 17:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                this.tableData17 = getTable17();
                break;
            case 18:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                this.tableData17 = getTable17();
                this.tableData18 = getTable18();
                break;
            case 19:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                this.tableData17 = getTable17();
                this.tableData18 = getTable18();
                this.tableData19 = getTable19();
                break;
            case 20:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                this.tableData17 = getTable17();
                this.tableData18 = getTable18();
                this.tableData20 = getTable20();
                break;
        }


        var tip = localStorage.getItem('tipClosed');
        if (tip)
            this.showTip = false;
        var bgColor = localStorage.getItem('bg');
        var pColor = localStorage.getItem('pColor');
        if (bgColor && pColor) {
            this.textColor = pColor;
            this.bgColor = bgColor;
            document.querySelector('body').style.setProperty('background', bgColor);
            var x = document.querySelectorAll("p");
            var i;
            for (i = 0; i < x.length; i++)
                x[i].style.color = pColor;
        }
        var fontArr = getAllFont();
        for (i = 0; i < fontArr.length; i++) {
            var fontElem = {};
            fontElem.value = fontArr[i];
            fontElem.label = fontArr[i];
            this.options.push(fontElem);
        }
        let fontName = localStorage.getItem('fontName');
        if (fontName) {
            document.querySelector('#app').style.setProperty('font-family', fontName);
            this.fontName = fontName;
        }

        for (i = 20; i < 100; i++) {
            var fontElem = {};
            fontElem.value = i;
            fontElem.label = i;
            this.fontSizeOptions.push(fontElem);
        }

        let fontSize = localStorage.getItem('fontSize');
        if (fontSize) {
            document.querySelector('#app').style.setProperty('font-size', fontSize)
            this.fontSize = fontSize
        }

        window.addEventListener('mousemove', this.myEventFunc);

        this.colorArr = getAllColor();

        var Randbg = localStorage.getItem('Randbg');
        var RandTColor = localStorage.getItem('RandTColor');
        if (Randbg) {
            var fontElem = {};
            fontElem.name = '随机色';
            fontElem.bg = Randbg;
            fontElem.textcolor = RandTColor;
            this.colorArr.push(fontElem);
        }

        let colorIndex = localStorage.getItem('corlorIndex');
        console.log(colorIndex)
        console.log(this.colorArr)
        if (colorIndex && colorIndex < this.colorArr.length)
            this.colorName = this.colorArr[colorIndex].name;

        var zan = getWeixin();
        if (zan)
            this.zanshangUrl = zan;
        else {
            zan = getWeixinFromLocal();
            this.zanshangUrl = zan;
        }




    }
})