1.使用NavigatoronLine属性 NavigatoronLine属性判断浏览器是否在线，在线返回true，离线返回false；NavigatoronLine是只读属性，所有主流浏览器都支持onLine属性； if(window.navigator.onLine){ console.log('网络正常！'); }else{ console.log('网络中断！'); } 2.使用ononline、onoffline事件 这两个方法属于“侦听器”，在网络连接/断开的瞬间会触发（当网络从离线变为在线或从在线变为离线时,分别触发这两个事件）。注意：检测ononline事件,要绑定在wi...

本文Element-ui版本2.x 问题 在el-table-column上需根据不同v-if条件来控制列显隐时，就会出现列数据展示错乱的情况（要么A列的数据显示在B列上，或者后端返回有数据的但是显示的为空），如下所示。 <template> <div> <el-table :data="tableData" border size="mini" style="width:100%"> <el-table-columnprop="date"label="登记日期"align="center"></el-table-column> ...

传送门：CSS中自定义属性（变量）详解 1.需求及解决方案 需求：通常我们动态修改div元素的样式，使用:style和:class即可；但想要动态修改如：Element-ui中输入框（input）组件的字体颜色时，由于el-input的样式嵌套很深，需要修改的实际是.el-input__inner这个样式类的color，但我们在HTML中没法直接拿到这个类名。 解决方案及相关步骤：通过CSS中的变量（自定义属性）结合样式穿透实现； 为对应的CSS类引入变量--inputColor； /deep/.el-input__inner{ color:var(--inputColor);//使用cs...

本文Element-ui版本2.x 问题 在el-table-column上需根据不同v-if条件来控制列显隐时，就会出现列数据展示错乱的情况（要么A列的数据显示在B列上，或者后端返回有数据的但是显示的为空），如下所示。 <template> <div> <el-table :data="tableData" border size="mini" style="width:100%"> <el-table-columnprop="date"label="登记日期"align="center"></el-table-column> &l...

1.使用NavigatoronLine属性 NavigatoronLine属性判断浏览器是否在线，在线返回true，离线返回false；NavigatoronLine是只读属性，所有主流浏览器都支持onLine属性； if(window.navigator.onLine){ console.log('网络正常！'); }else{ console.log('网络中断！'); } 2.使用ononline、onoffline事件 这两个方法属于“侦听器”，在网络连接/断开的瞬间会触发（当网络从离线变为在线或从在线变为离线时,分别触发这两个事件）。注意：检测ononline事件,要绑定在wind...

1.样式文件目录介绍 本项目中的公共样式文件均位于src/assets/css目录下，其中index.scss是总的样式文件的汇总入口，common.scss是供全局使用的一些基本样式(常量），_theme.scss、_handle.scss两个文件是进行主题颜色配置的文件。 如下图，将index.scss在main.js文件中引入即可全局使用。. 2.主题scss文件配置 src/assets/css目录下的_themes.scss，里面可配置不同的主题配色方案，本文配置了两个主题颜色：light、dark。 @import'./common.scss'; $themes:( lig...