Table of contents
1. The overall organizational framework of the local novel website
1. The required VUE library, elementLib and JQ library
1. Introduce element style and custom style
3. Customize the Header component
1) Vue defines the MyHeader component
3) The final effect is as follows
4. Customize the header-btns color button and font button components
2) Color font button component use
3. The core part of the VUE code
The following example is a local novel reading website built with VUE
1. The overall organizational framework of the local novel website
1. The required VUE library, elementLib and JQ library
2. Local directory design
Under the library, it is an HTML file
3. Overall code style
<html lang="zh-cn">
<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='http://gudianxiaoshuo.com/js/myCss/gudianxiaoshuo.css'>
</head>
<script src="js\vue.js" type="text/javascript" charset="utf-8"></script>
<script src="http://gudianxiaoshuo.com/js/myHeader.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://gudianxiaoshuo.com/js/comp/comp_headBtns.js" charset="utf-8"></script>
<style>
p{text-indent:2em; color:#606266;line-height:200%;}
body {font-family: '宋体', Arial, Helvetica;font-size:20px;} .el-row{margin-bottom: 20px;}
.el-main .el-link{font-size:var(--linkFontSize);}
.Btn1{
background - color:rgb(250, 248, 238);
width:20px;
height:20px;
border:0px;
border - radius:10px;
margin: 10px;
}
.Btn1:hover{
background - color:rgb(250, 238, 238);
}
.Btn2{
background - color:rgb(242, 226, 216);
width:20px;
height:20px;
border:0px;
border - radius:10px;
margin: 10px;
}
.Btn2:hover{
background - color:rgb(242, 226, 216);
}
.Btn3{
background - color:rgb(216, 244, 196);
width:20px;
height:20px;
border:12px;
border - radius:10px;
margin: 10px;
}
.Btn3:hover{
background - color:rgb(216, 244, 196);
}
.Btn4{
background - color:rgb(79, 82, 84);
width:20px;
height:20px;
border:0px;
border - radius:10px;
margin: 10px;
}
.Btn4:hover{
background - color:rgb(79, 82, 84);
}
.Btn5{
background - color:rgb(61, 61, 61);
width:20px;
height:20px;
border:0px;
border - radius:10px;
margin: 10px;
}
.Btn5:hover{
background - color:rgb(61, 61, 61);
}
::-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>
<body>
<div id="app">
<el-container>
<my-header @handle-select="myHandleSelect"></my-header>
<header-btns :color-arr='colorArr' :options-arr='options' :font-Size-Options-Arr='fontSizeOptions' :color-name='colorName' :text-color='textColor' :bg-color='bgColor' :font-name='fontName' :font-size='fontSize' @color-btn='colorBtn' @select-color-name='selectColorName' @el_color-pic_change='el_colorPic_change' @select-one='selectOne' @select-font-size='selectFontSize'></header-btns>
<el-row>
<el-col align="middle">
<p>
总书目</p>
</el-col>
</el-row>
<el-main id='mainContent' :style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar,'--linkFontSize':linkFontSizeVar}">
<el-row :gutter="20">
<el-col :span="6">
<el-link type="info" href=".\藏书库\目录.html">藏书库</el-link>
</el-col>
</el-row>
</el-main>
<el-footer id='youshengFooterMulu' style='height:160px;margin:160px 60px 20px;'> </el-footer>
</el-container>
</div>
</body>
<script src="js\element_lib/index.js" type="text/javascript" charset="utf-8"></script>
<script src="js\font.js" type="text/javascript" charset="utf-8"></script>
<script src="js\jquery-3.5.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js\dashang_local.js" type="text/javascript" charset="utf-8"></script>
<script src="http://gudianxiaoshuo.com/js/dashang.js" type="text/javascript" charset="utf-8"></script>
<script src="js\myVueCode.js" type="text/javascript" charset="utf-8"></script>
</html>The following are the descriptions
2. The core code of the text
1. Introduce element style and custom style
<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='http://gudianxiaoshuo.com/js/myCss/gudianxiaoshuo.css'>
</head>The custom style is as follows:
p {
text-indent: 2em;
color: #606266;
line-height: 200%;
}
body {
font-family: '宋体', Arial, Helvetica;
font-size: 20px;
}
.el-row {
margin-bottom: 20px;
}
.el-main .el-link {
font-size: var(--linkFontSize);
}
.el-row {
margin-bottom: 10px;
}
.el-row:last-child {
margin-bottom: 0px;
}
.el-row:nth-last-child(2) {
margin-bottom: 100px;
margin-top: 40px;
}
.el-header {
height: 160px !important;
}
.Btn1 {
background-color: rgb(250, 248, 238);
width: 20px;
height: 20px;
border: 0px;
border-radius: 10px;
margin: 10px;
}
.Btn1:hover {
background - color: rgb(250, 238, 238);
}
.Btn2 {
background-color: rgb(242, 226, 216);
width: 20px;
height: 20px;
border: 0px;
border-radius: 10px;
margin: 10px;
}
.Btn2:hover {
background-color: rgb(242, 226, 216);
}
.Btn3 {
background-color: rgb(216, 244, 196);
width: 20px;
height: 20px;
border: 12px;
border-radius: 10px;
margin: 10px;
}
.Btn3:hover {
background-color: rgb(216, 244, 196);
}
.Btn4 {
background-color: rgb(79, 82, 84);
width: 20px;
height: 20px;
border: 0px;
border-radius: 10px;
margin: 10px;
}
.Btn4:hover {
background-color: rgb(79, 82, 84);
}
.Btn5 {
background-color: rgb(61, 61, 61);
width: 20px;
height: 20px;
border: 0px;
border-radius: 10px;
margin: 10px;
}
.Btn5:hover {
background-color: rgb(61, 61, 61);
}
::-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;
}
*The reason why the files in my website gudianxiaoshuo.com are quoted here is not stored locally. The main reason is that when you want to change the style in the future, you can directly modify it on the website.
2. Introduce JS
<script src="js\vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/myHeader.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/comp/comp_headBtns.js" charset="utf-8"></script>One is VUE
One is the head component of the local website
One is the color button component
3. Customize the Header component
1) Vue defines the MyHeader component
Vue.component("MyHeader",{
data(){
return{
activeIndex: '1'
}
},
template:`
<div>
<el-header height='160px' style="background-color: #13303e;">
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" background-color="#13303e" text-color="#fff" active-text-color="#ffd04b" >
<el-menu-item index="http://www.gudianxiaoshuo.com/">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">古典小说</template>
<el-menu-item index="http://www.gudianxiaoshuo.com/%E8%97%8F%E4%B9%A6%E5%BA%93/%E5%8F%A4%E5%85%B8%E5%B0%8F%E8%AF%B4/%E4%BC%A0%E4%B8%96%E7%BB%8F%E5%85%B8/%E7%9B%AE%E5%BD%95.html">传世经典</el-menu-item>
<el-menu-item index="http://www.gudianxiaoshuo.com/%E8%97%8F%E4%B9%A6%E5%BA%93/%E5%8F%A4%E5%85%B8%E5%B0%8F%E8%AF%B4/%E5%8F%A4%E4%B9%A6%E6%8B%BE%E9%81%97/%E7%9B%AE%E5%BD%95.html">古书拾遗</el-menu-item>
<el-menu-item index="http://www.gudianxiaoshuo.com/%E8%97%8F%E4%B9%A6%E5%BA%93/%E5%8F%A4%E5%85%B8%E5%B0%8F%E8%AF%B4/%E5%8F%A4%E5%85%B8%E8%A8%80%E6%83%85/%E7%9B%AE%E5%BD%95.html">古典言情</el-menu-item>
<el-menu-item index="http://www.gudianxiaoshuo.com/%E8%97%8F%E4%B9%A6%E5%BA%93/%E5%8F%A4%E5%85%B8%E5%B0%8F%E8%AF%B4/%E5%8F%B2%E4%B9%A6%E6%88%8F%E6%9B%B2/%E7%9B%AE%E5%BD%95.html">史书戏曲</el-menu-item>
</el-submenu>
</el-menu>
<el-row style="line-height:20px;font-size:14px;margin-top:10px;margin-bottom:20px;">
<el-col :span="3" style="text-align:left; color:rgb(18, 228, 18);">
<div class="section-title">
<p class="pInfo">头条号：古典小说</p>
<p class="pInfo">公众号：古典小说网</p>
</div>
</el-col>
<el-col :span="21" style=" display: flex; font-size:16px; color:rgb(225, 237, 238); justify-content:flex-start;align-items:center;">
<span>千年千本古典小说，本网站整理近六百本古典小说资源，并提供有声聆听方式，欢迎咨询下载 QQ群号：252380640</span>
</el-col>
</el-row>
</el-header>
</div>
`,
props:["sonprop"],
methods:{
handleSelect(key, keyPath){
this.$emit("handle-select",key)
}
}
})2) MyHeader component use
<my-header @handle-select="myHandleSelect"></my-header>This involves a knowledge point, the child component sends information to the parent component
Subcomponents are sent using $emit(eventName, data) ,
this.$emit("handle-select",key)
The first parameter handle-select is the event name, which needs to be consistent with the event name @ handle-select of the v-on listener in the parent component ; the second parameter is the data to be passed.
Then, after the information is transmitted from the sub-component, it is finally processed through the listening event myHandleSelect of the main component.
myHandleSelect(key) {
location.href=key;
}3) The final effect is as follows
4. Customize the header-btns color button and font button components
1) Color button component
Vue.component("header-btns",{
template:`
<div>
<el-row>
<button class="Btn1" v-on:click="colorBtn('btn1')"></button>
<button class="Btn2" v-on:click="colorBtn('btn2')"></button>
<button class="Btn3" v-on:click="colorBtn('btn3')"></button>
<button class="Btn4" v-on:click="colorBtn('btn4')"></button>
<button class="Btn5" v-on:click="colorBtn('btn5')"></button>
<template>
<el-select style='width:100' v-model='colorNameTmp' placeholder='配色方案' @change='selectColorName'>
<el-option
v-for='(item,index) in colorArr'
:key='index'
:label='item.name'
:value='index'>
</el-option>
</el-select>
</template>
<el-divider direction='vertical'></el-divider>
<el-color-picker v-model='textColor' @change='elColorPicChange'></el-color-picker>
<el-color-picker v-model='bgColor' @change='elColorPicChange'></el-color-picker>
<el-button size='mini' round v-on:click="colorBtn('rand')">随机配色</el-button>
<el-divider direction='vertical'></el-divider>
<el-button icon='el-icon-full-screen' circle v-on:click="colorBtn('full')"></el-button>
<el-button icon='el-icon-star-off' circle v-on:click="colorBtn('fav')"></el-button>
</el-row>
<el-divider></el-divider>
<el-row>
<template>
<el-select v-model="fontNameTmp" placeholder="请选择字体" @change="selectOne">
<el-option
v-for="item in optionsArr"
:key="item.value"
:label="item.value"
:value="item.value">
</el-option>
</el-select>
</template>
<template>
<el-select v-model='fontSizeTmp' placeholder='请选择字体大小' >
<el-option
v-for='item in fontSizeOptionsArr'
:key='item.value'
:label='item.value'
:value='item.value'>
</el-option>
</el-select>
</template>
</el-row>
</div>
`,
props:["colorArr","optionsArr","fontSizeOptionsArr","colorName","textColor","bgColor","fontName","fontSize"],
data(){
return{
fontSizeTmp:this.fontSize,
colorNameTmp:this.colorName,
fontNameTmp:this.fontName
}
},
methods:{
colorBtn(key)
{
this.$emit("color-btn",key)
},
selectColorName(key)
{
console.log(key)
this.$emit("select-color-name",key)
},
elColorPicChange(){
this.$emit("el_color-pic_change")
}
,
selectOne(fontName)
{
this.$emit("select-one",fontName)
}
// ,
// selectFontSize(fontSize) @change='selectFontSize'
// {
// this.$emit("select-font-size",fontSize)
// }
},
watch: {
fontSizeTmp(newVar,oldVar){
console.log(newVar)
// this.fontSize=newVar;
this.$emit("select-font-size",newVar)
}
},
})2) Color font button component use
<header-btns :color-arr='colorArr' :options-arr='options' :font-Size-Options-Arr='fontSizeOptions' :color-name='colorName' :text-color='textColor' :bg-color='bgColor' :font-name='fontName' :font-size='fontSize' @color-btn='colorBtn' @select-color-name='selectColorName' @el_color-pic_change='el_colorPic_change' @select-one='selectOne' @select-font-size='selectFontSize'></header-btns>The things to note here are:
The parent component passes data through props: color array, font array, etc.
The child component passes data to the parent component through emit
5. el-main body part
<el-main id='mainContent' :style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar,'--linkFontSize':linkFontSizeVar}">
<el-row :gutter="20">
<el-col :span="6">
<el-link type="info" href=".\藏书库\目录.html">藏书库</el-link>
</el-col>
</el-row>
</el-main>What needs to be noted here is: this involves the knowledge point of style parameters
Take a look at this part of the style
<style>
p{text-indent:2em; color:#606266;line-height:200%;}
body {font-family: '宋体', Arial, Helvetica;font-size:20px;} .el-row{margin-bottom: 20px;}
.el-main .el-link{font-size:var(--linkFontSize);}
.Btn1{
background - color:rgb(250, 248, 238);
width:20px;
height:20px;
border:0px;
border - radius:10px;
margin: 10px;
}
.Btn1:hover{
background - color:rgb(250, 238, 238);
}
.Btn2{
background - color:rgb(242, 226, 216);
width:20px;
height:20px;
border:0px;
border - radius:10px;
margin: 10px;
}
.Btn2:hover{
background - color:rgb(242, 226, 216);
}
.Btn3{
background - color:rgb(216, 244, 196);
width:20px;
height:20px;
border:12px;
border - radius:10px;
margin: 10px;
}
.Btn3:hover{
background - color:rgb(216, 244, 196);
}
.Btn4{
background - color:rgb(79, 82, 84);
width:20px;
height:20px;
border:0px;
border - radius:10px;
margin: 10px;
}
.Btn4:hover{
background - color:rgb(79, 82, 84);
}
.Btn5{
background - color:rgb(61, 61, 61);
width:20px;
height:20px;
border:0px;
border - radius:10px;
margin: 10px;
}
.Btn5:hover{
background - color:rgb(61, 61, 61);
}
::-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>As above, style parameters are defined with var(--name);
background-color:var(--fullCorlor);
How to assign it?
:style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar,'--linkFontSize':linkFontSizeVar}"
By writing as above, you can pass the specific value in VUE to the style parameter.
3. The core part of the VUE code
1. Font part font.js
function getAllFont() {
var fontArr = [
"微软雅黑",
"微软雅黑 Light",
"宋体",
"新宋体",
"等线",
"等线 Light",
"仿宋",
"楷体",
"黑体",
"方正舒体",
"方正姚体",
"隶书",
"幼圆",
"华文彩云",
"华文仿宋",
"华文琥珀",
"华文楷体",
"华文隶书",
"华文宋体",
"华文细黑",
"华文行楷",
"华文新魏",
"华文中宋",
"方正等线",
"站酷小薇LOGO体",
"文鼎粗钢笔行楷",
]
return fontArr;
}This file is generated through the enumeration of the C++ client audio novel software I wrote, so it is listed separately, because the fonts installed on each machine are different
2. Color array
function getAllColor() {
var colorArr = [{
name: '浅白',
bg: 'rgb(255,255,255)',
textcolor: 'rgb(89,89,89)'
},
{
name: '淡黄',
bg: 'rgb(244,236,216)',
textcolor: 'rgb(91,70,54)'
},
{
name: '明黄',
bg: 'rgb(255,250,233)',
textcolor: 'rgb(44,39,36)'
},
{
name: '绿意',
bg: 'rgb(238,250,238)',
textcolor: 'rgb(44,39,36)'
},
{
name: '浅绿',
bg: 'rgb(206,234,186)',
textcolor: 'rgb(51,51,51)'
},
{
name: '草绿',
bg: 'rgb(134,202,190)',
textcolor: 'rgb(81,81,81)'
},
{
name: '粉红',
bg: 'rgb(255,239,252)',
textcolor: 'rgb(44,39,36)'
},
{
name: '淡蓝1',
bg: 'rgb(220,245,245)',
textcolor: 'rgb(44,39,36)'
},
{
name: '淡蓝2',
bg: 'rgb(237,255,255)',
textcolor: 'rgb(44,39,36)'
},
{
name: '深蓝',
bg: 'rgb(61,122,168)',
textcolor: 'rgb(178,204,159)'
},
{
name: '灰色',
bg: 'rgb(239,239,239)',
textcolor: 'rgb(44,39,36)'
},
{
name: '深灰',
bg: 'rgb(69,72,74)',
textcolor: 'rgb(157,159,163)'
},
{
name: '深黑',
bg: 'rgb(51,51,51)',
textcolor: 'rgb(181,172,162)'
}
]
return colorArr;
}
3. Definition of main VUE
1) data definition
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: "http://gudianxiaoshuo.com/assets/img/zan.png"
}
},2) Core method definition
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 url = decodeURI(location.href);
NimCefWebInstance.call('CEF_SendToCppEdgeListen', { url }, (error, result) => {
});
// this.$message({
// dangerouslyUseHTMLString: true,
// message:'浏览器不支持自动添加收藏夹标签。请您使用快捷键 <strong style="color:red"><i> Ctrl+D</i> </strong>进行添加'}
// );
} else if (name == 'reg') {
NimCefWebInstance.call('CEF_SendToCppButtonInfo', { name }, (error, result) => {
});
}
},
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;
}
},3. Mounted initialization
mounted() {
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;
}
})
4. Button monitoring event
window.onkeydown = function(ev) {
console.log(ev);
if (ev.ctrlKey && ev.shiftKey && event.keyCode === 58) { //89 is y
var mainContent = document.getElementById("mainContent");
var preBrother = mainContent.previousElementSibling;
while (preBrother) {
preBrother.style.visibility = "hidden"; //visible
preBrother = preBrother.previousElementSibling;
}
setTimeout(function() {
var mainContent = document.getElementById("mainContent");
var preBrother = mainContent.previousElementSibling;
while (preBrother) {
preBrother.style.visibility = "visible"; //visible
preBrother = preBrother.previousElementSibling;
}
}, 500)
}
}