Tabla de contenido
1. El marco organizativo general del sitio web de novelas locales
1. La biblioteca VUE requerida, la biblioteca elementLib y JQ
2. El código central del texto
1. Introducir estilo de elemento y estilo personalizado
3. Personaliza el componente Encabezado
1) Vue define el componente MyHeader
2) Uso del componente MyHeader
3) El efecto final es el siguiente
4. Personalice los componentes del botón de color del encabezado-btns y del botón de fuente
1) Componente de botón de color
2) Uso del componente del botón de fuente de color
5. parte del cuerpo el-principal
3. La parte central del código VUE
3. Definición de VUE principal
2) Definición del método central
4. Evento de monitoreo de botón
El siguiente ejemplo es un sitio web local de lectura de novelas creado con VUE
1. El marco organizativo general del sitio web de novelas locales
1. La biblioteca VUE requerida, la biblioteca elementLib y JQ
2. Diseño de directorio local
Debajo de la biblioteca, es un archivo HTML
3. Estilo de código general
<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>Las siguientes son las descripciones
2. El código central del texto
1. Introducir estilo de elemento y estilo personalizado
<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>El estilo personalizado es el siguiente:
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;
}
*La razón por la que los archivos de mi sitio web gudianxiaoshuo.com se citan aquí no se almacenan localmente. La razón principal es que cuando desee cambiar el estilo en el futuro, puede modificarlo directamente en el sitio web.
2. Introducir 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>uno es VUE
Uno es el componente principal del sitio web local.
Uno es el componente del botón de color.
3. Personaliza el componente Encabezado
1) Vue define el componente MyHeader
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) Uso del componente MyHeader
<my-header @handle-select="myHandleSelect"></my-header>Esto implica un punto de conocimiento, el componente secundario envía información al componente principal
Los subcomponentes se envían usando $emit(eventName, data) ,
this.$emit("handle-select",key)
El primer parámetro handle-select es el nombre del evento, que debe ser coherente con el nombre del evento @ handle-select del oyente v-on en el componente principal ; el segundo parámetro son los datos que se pasan.
Luego, después de que la información se transmite desde el subcomponente, finalmente se procesa a través del evento de escucha myHandleSelect del componente principal.
myHandleSelect(key) {
location.href=key;
}3) El efecto final es el siguiente
4. Personalice los componentes del botón de color del encabezado-btns y del botón de fuente
1) Componente de botón de color
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) Uso del componente del botón de fuente de color
<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>Las cosas a tener en cuenta aquí son:
El componente principal pasa datos a través de accesorios: matriz de colores, matriz de fuentes, etc.
El componente secundario pasa datos al componente principal a través de emit
5. parte del cuerpo el-principal
<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>Lo que debe tenerse en cuenta aquí es: esto implica el punto de conocimiento de los parámetros de estilo.
Echa un vistazo a esta parte del estilo.
<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>Como arriba, los parámetros de estilo se definen con var(--name);
color de fondo:var(--fullColor);
¿Cómo asignarlo?
:style="{'--fullCorlor': tontocolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar,'--linkFontSize':linkFontSizeVar}"
Al escribir como se indicó anteriormente, puede pasar el valor específico en VUE al parámetro de estilo.
3. La parte central del código VUE
1. Parte de fuente font.js
function getAllFont() {
var fontArr = [
"微软雅黑",
"微软雅黑 Light",
"宋体",
"新宋体",
"等线",
"等线 Light",
"仿宋",
"楷体",
"黑体",
"方正舒体",
"方正姚体",
"隶书",
"幼圆",
"华文彩云",
"华文仿宋",
"华文琥珀",
"华文楷体",
"华文隶书",
"华文宋体",
"华文细黑",
"华文行楷",
"华文新魏",
"华文中宋",
"方正等线",
"站酷小薇LOGO体",
"文鼎粗钢笔行楷",
]
return fontArr;
}Este archivo se genera a través de la enumeración del software de novela de audio del cliente C++ que escribí, por lo que se enumera por separado, porque las fuentes instaladas en cada máquina son diferentes
2. Gama de colores
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. Definición de VUE principal
1) definición de datos
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) Definición del método central
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. Inicialización montada
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. Evento de monitoreo de botón
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)
}
}