Arlisol-CSDN博客

原创 vue2.6 + elementUI 汽车管理系统

效果演示传送门说明本项目是博主自学vue时使用vue2.6 + elementUI 2.5 搭建的一个纯前端汽车管理系统demo。初始数据采用easy-mock模拟，如遇网络错误导致项目无法访问等问题，很可能是easy-mock的服务器原因。如果对您对此项目有兴趣，可以去 “Star” 支持一下，非常感谢！技术栈vue2 + vuex + vue-router + vue-cli ...

2019-02-23 15:41:53 2214 2

原创 JavaScript之ES6的filter()方法动态选择筛选条件

博主今天在实战中遇到了列表根据多个输入选择框内容筛选显示的需求，如图所示：由于博主最近在学习ES6的相关知识，所以第一时间想到了filter()方法。因为filter()方法不会改变原始数组，而是创建一个新的数组，所以只需请求一次数据，在前端判断哪些数组项需要显示即可。但是由于这里有三个输入选择框，可以有内容也可以无内容，也可以只填充其中的某1个或某2个框，所以filter()方法的筛选条件...

2019-02-14 16:42:19 6566 1

原创圣杯布局和双飞翼布局的实现和区别

圣杯布局和双飞翼布局都是为了左右两栏固定宽度，中间部分自适应的布局效果。但是，具体实现还是有一些区别，如下：1. 圣杯布局html代码：<body> <div id="header">header</div> <div id="container"> <div id="middle"

2019-03-07 21:35:45 1056 2

原创 css画圆和三角

1. css画园代码：.circle { width: 100px; height: 100px; background: #C6E2FF; border-radius: 50px;}效果：2. css画三角代码：.triangle { width: 0; height: 0; border-left: 50px solid...

2019-03-05 19:32:14 372

原创剑指Offer刷题笔记——js版

本博客试题均使用javascript实现在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。思路：从二维数组右上开始比较，若该数大于传入整数，则向左查找；若该数小于传入整数，则向下查找。代码：function Find(target, array)...

2019-02-27 23:19:17 656 1

原创 vue项目打包后css背景图片无法显示问题

博主在测试打包项目时发现自己使用的404页面的背景图片无法显示，经过之前的问题，基本推断又是路径问题。在搜索引擎一番查找后发现果然是路径的问题，因为打包后的css文件在static文件夹下的css文件夹中，static文件夹和index.html是同级关系，这样引用时的路径就不对了，下面上解决办法：在build/utils.js文件中相应位置修改如下：// Extract CSS when t...

2019-02-24 23:10:19 3147 2

原创 vue+elementui项目打包后样式变化问题

博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎，找到了问题所在以及解决办法：main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。代码如下：main.js/...

2019-02-24 21:09:02 8582 2

原创 vue项目打包后打开index.html页面显示空白问题

博主终于完成了自己的demo项目，到了打包这一步。通过npm run build命令打包后会在项目文件中生成一个名为dist的文件夹，里面是打包后的项目文件和资源。但是，打开index.html文件后却显示一片空白，打开控制台还会发现有报错，找不到页面路径。问题原因：config文件夹下index.js中的build命令的配置有一个属性叫assetsPublicPath，默认为 assets...

2019-02-24 19:56:06 3163

原创使用element-ui的el-table和el-pagination标签实现表格分页功能以及解决遇到的暂无数据的bug

博主需要在项目中需要使用el-table和el-pagination标签实现表格分页功能，方法如下：el-table标签的data属性是显示的数据，绑定为showTable计算属性<el-table :data="showTable" :header-cell-style="{background:'#eef1f6',color:'#606266'}" ...

2019-02-24 19:14:40 9250 7

原创 vue中keep-alive的使用

博主在做vue项目过程中设定的是组件在挂载时请求数据，这就会导致我在切换路由时在前组件的操作被清除，因为会重新挂载并请求数据。这明显不符合我们的预期，我们希望在一次程序的使用过程中进行的操作是一直有效的，keep-alive正好可以帮助我们解决这个问题。keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。用法如下：需要在router中设置rout...

2019-02-24 14:21:14 852

原创交换element-ui的MessageBox弹框的确定和取消位置

博主在使用element-ui的MessageBox弹框时发现默认的弹框是取消在前，确定在后，如图所示：博主并不喜欢这种样式，博主比较喜欢确定在前，取消在后的样式。于是在网上寻找改变按钮位置的方法，如下：//按钮点击会触发addSubmit方法<el-button type="primary" v-show="addOrEdit == 0" @click.native="addSub...

2019-02-23 23:25:24 12276 15

原创 js生成guid的方法

由于博主做的项目为前端项目，所以需要在新增时由js生成guid作为标识。博主几经查找找到了一个看起来比肩简洁易懂的方法。话不多说，直接上代码：getGuid() { function S4() { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); } retur...

2019-02-23 22:56:25 1204

原创记三个有用到的正则表达式

正整数var reg = /^[1-9]\d*$/;大于0并且小数点最多两位的数字var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/;非空且非全空格var reg = /^[\s\S]*.*[^\s][\s\S]*$/;...

2019-02-23 22:46:52 152

原创 CSS3中width属性的calc()使用问题

恭喜博主今天又踩到了一个坑，继滚动条问题解决后博主在测试过程中又发现了一个问题。由于博主的左侧菜单可以折叠，博主在折叠打开左侧菜单过程中发现右侧主题内容的宽度显示不正常，上图说明：初始渲染显示正常：折叠菜单显示正常：问题来了，再次打开发现显示不正常：博主通过谷歌的开发者工具发现了问题，之前的内容宽度为1306px，但是经过折叠宽度就变成了1346px。因为内容宽度用的是CSS3的...

2019-02-14 00:12:17 2397

原创 elementui更改el-table表头背景颜色和字体颜色

博主在使用elementui中的el-table时感觉默认表格样式实在过于简洁，尤其表头与表格内容之间区别较小，不利于辨认，降低了用户体验。如图所示：于是，博主尝试更改一下表头的背景颜色和字体颜色，方法如下：根据elementui官网的说法，header-cell-style是表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。...

2019-02-13 17:47:14 115831 26

原创记一次el-table内容溢出元素框时不出现滚动条问题

最近，博主在使用elementui实战时遇到了一件怪事。首先，先看下博主的浏览器窗口最大化截图：再看一下缩小之后的截图：博主的表用使用的是elementui的el-table标签，发现此时的表格内容已经溢出了元素框，但是并没有出现滚动条。博主被这个问题困扰了两天，后来终于找到了问题原因和解决方法。问题原因：简单贴一下原布局样式：//包括左侧导航栏和右侧内容主体.remain {...

2019-02-13 17:09:40 34718 14

原创 vue+elementui项目折叠菜单再展开有白框问题

博主在使用vue+elementui实战过程中制作了一个折叠菜单功能，可以把菜单压缩宽度。但是遇到了一个问题，压缩后再展开的菜单显示有问题，会出现一条白框，如图所示：这是正常的菜单：这是折叠后的菜单：这是再展开的菜单：可见，再展开的菜单宽度变成了折叠菜单的宽度。原因是在布局上没有控制好菜单的宽度，博主找到了两种解决方案分享给大家：将v-show属性换成v-if属性&lt;el...

2019-01-31 23:51:08 6375 3

原创 vue-cli项目打包后router-view中的内容不显示问题

今天博主实战vue项目终于到了尾声，迎来了打包阶段。但是发现打包完的index.html文件打开后只显示了左边菜单栏，router-view中的内容却没有显示出来，而且控制台也没有报错。如图所示：注：打包时候config文件夹中的index.js文件的build中的assetsPublicPath属性要改为 './' 这样的相对路径,博主已经靠前人的经验避过了这个坑。博主在网上搜索问题时发现...

2019-01-29 15:45:19 11145 7

原创 element-ui中el-tables标签表头与内容边框错位问题

今天楼主在实战学习vue项目时使用element-ui中出现了一个问题，如图所示：可见图中的表格里表头的边框和内容的边框产生了错位问题。于是楼主在网络上搜索了该问题，发现该问题是由于电脑显示的缩放引起的，并且发现同为webkit内核的Google浏览器和360浏览器中360浏览器显示正常，而Google浏览器才会出现这个问题。不过没关系，楼主还是顺利找到了解决方案：在index.html或Ap...

2019-01-28 20:38:18 9821 3

原创纯CSS实现瀑布流布局的两种方案

博主最近在学习有关布局的相关知识，总结了使用纯CSS实现瀑布流布局的两种方案。那么什么叫瀑布流布局呢？让我们通过图片来了解一下：瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。废话不多说，直接上方案：1. 方案一，使用CSS3的column属性，具体实...

2019-01-09 19:20:10 8652

原创两道js题目小练

博主最近在通过廖雪峰的js教程学习，看到了几道有趣的小题目，实现并记录下来。1.想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。(练习：不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数）博主的实现为:'use str...

2019-01-03 15:14:55 254

原创 Grid+Flex布局实现九宫格并使格中内容居中的两种方法

九宫格展示效果图(只强调实现，比较丑，请见谅)：首先，html代码如下&amp;amp;amp;lt;body&amp;amp;amp;gt;&amp;amp;amp;lt;div class=&amp;amp;quot;wrapper&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;amp;

2018-12-30 14:21:25 3004

原创 HTML5学习笔记

HTML5学习笔记HTML5简介了解HTMLHTML5相关知识HTML5的新特性HTML基础详解HTML5简介了解HTML1. 什么是HTML？HTML是用来描述网页的一种语言HTML指超文本标记语言(Hyper Text Markup Language)HTML不是编程语言，是一种标记语言2. HTML版本版本年份HTML1991HTML+199...

2018-12-25 13:15:15 474

Arlisol的博客