- 博客(71)
- 收藏
- 关注
RSS订阅原创 uni-calendar日历组件日期范围默认选中及优化存在日期范围后点击第一下、第二下选中为下一日期范围
1.日期范围默认选中: 该组件未提供默认选择日期范围，需对组件进行修改，步骤如下： 1）在 uni-calendar 文件下找到 uni-calendar.vue 文件， props 中增加：defaultRange: { type: Array, default () { return [] }}, watch 方法中增加：defaultRang
2022-04-08 10:40:19
8605
7
原创 数组对象中对某几个属性相同的对象进行处理
使用 对象[属性] 的方法存储到新对象中，再将其拿出来跟数组对象逐一比较。let newData = {} // 新对象this.dataList.forEach((row) => { //新建属性名 if (Object.keys(newData).indexOf('' + row.key1 + row.key2 + row.key3) === -1) { // newData中不存在key1、key2、key3相同属性值的对象，则将row赋值其中 newData[row.key
2021-12-02 12:40:15
1231
原创 element：大图预览出现层级穿透问题
项目中有这样的数据格式：[ { attachments: [] // 图片地址数组 // ...其它 }, // ...其它]这时候需要将外层循环后再循环图片，使用el-image的previewSrcList开启大图预览。当外层有多个的时候，这时点击前面的图片大图，后面的内容会穿透到大图上，此时查看后面内容的层级为1，但大图的层级为2000，按常理不会穿透，百思不得其解，F12调试将.el-card__body的层级去掉时候就正常了。<el-row :gutter="20
2021-12-02 11:59:06
3680
原创 flex布局：某个子元素占满剩余宽度
felx布局中，如何在给子元素增加固定宽度之后，如何让某个子元素占满剩余宽度，给这个子元素增加flex-grow: 1样式即可。<div style="display: flex"> <div style="min-width: 80px;">稽核意见：</div> <div style="flex-grow: 1"> <el-tag :hit="true" type="info" class="custom-tag" width="1
2021-12-02 11:46:23
15400
原创 一、git的初步使用
一、git的安装参考链接：https://gitee.com/help/articles/4106二、初次运行git前配置参考链接：https://gitee.com/help/articles/4107三、gitee账号的申请因为qq邮箱不再维护，所以我不能再登录github账户，于是尝试使用gitee来进行git的代码托管。登录https://gitee.com/进行注册即可。四、在gitee上新建仓库1.点击用户头像前的‘+’号，选择新建仓库，输入仓库名称，不勾选初始化仓库等多选框，点
2021-06-01 14:12:28
234
原创 登录表单的验证及重置（Element）
一、表单验证： 使用 validator 来进行表单验证。 第一步：构建表单。 第二步：为 el-form 标签加上 :rules=“验证规则名” ，将需要验证项的 el-form-item 标签加上 prop=“需校验的字段名”：<el-form ref="form" :rules="rules" :model="form" class="form_box
2021-05-31 11:44:36
1486
原创 ElementUI按需引入
链接：https://blog.csdn.net/lxy123456780/article/details/107151232
2021-05-28 09:32:12
269
原创 路由守卫的简单使用-登录功能
在用户进入我们系统的时候，需要验证是否已经登录，再来进行相应的跳转。如果使用传统的方式来逐一进行判断验证，是极为麻烦的，于是有了路由守卫，话不多说，直接上代码：1.login.vue登录界面 因为时间关系，所以就简单的写了一个输入框和一个登录按钮…<template> <div id="login"> <div class="login-box">
2021-05-21 15:43:19
1337
2
原创 v-loading的使用（ElementUI）
前言：需要获取后端接口数据到页面上进行显示，所以在请求发起至数据渲染页面的这段时间，为页面提供一个 loading 加载是极为必要的。1.区域加载 以 table 表格为例，使用 v-loading，为其绑定一个布尔值（true/false），代码如下：<template> <div id="index"> <!-- 表格 --> <el-table :data="tableData" v-load
2021-05-21 11:21:13
34319
3
原创 vue父组件调用子组件中的方法
前言：使用ref属性来实现，ref的具体用法请自行百度。1、子组件中声明方法：<script>export default { name: 'father', data () { return { } }, methods: { thisChildrenMethod() { console.log("触发了子组件的thisChildrenMethod方法") } }}</script>2.父组件中引入子组件并调用子
2021-05-20 17:29:55
330
原创 vue组件间传值方式
前言：vue组件传值在开发中遇到的频率很高，以防遗忘，故写一篇博客记录一下。当然该篇博客并不全面，在日后再逐步补充完善…1、prop父传子父组件：<template> <div id="father"> <Children :byData="fatherByChildren"/> <!-- ‘:’为‘v-bind’的简写，这里使用‘v-bind’，使用传的是fatherByChildren这个对象，不使用传的是fatherByChildren这个字符
2021-05-20 17:16:12
163
原创 封装一个简单的分页组件（ElementUI）
1.在项目的component文件夹下创建名为TablePage的vue文件：2.使用ElementUI的分页组件：3.在目标页面引入TablePage组件并使用<TablePageVue />import TablePageVue from '../components/TablePage.vue'export default { components: { TablePageVue }, ...}4.props父组件传值：<TablePa
2021-05-20 16:28:18
858
1
原创 2.微信小程序（colorUI）- 构建底部操作条
写在前面：colorUI中提供了很多好看的底部操作条，如何使用这些底部操作条让我们的项目看起来更美观（ps：微信小程序的底部操作条tabBar总感觉少了点什么）。一、null二、null
2021-03-17 09:41:15
1647
8
原创 1.微信小程序（colorUI）- 引入colorUI
一、前言： colorUI是一个非常好看的css库，借用相关介绍：ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！二、引入步骤： 1.下载colorUI： 进入colorUI的github地址进行下载。 2.拷贝colorUI中\demo\color
2021-03-16 15:34:06
1355
原创 01、Element UI安装与使用
一、Element UI的简介： Element UI 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库，官方开发文档：https://element.eleme.cn/。二、Element UI的安装： 常使用npm的方式安装Element UI。 1.npm安装： npm i element-ui -S（在vue项目目录下cmd命令窗npm进行安装） 2.CDN引入：<!-- 引入样式 --><link rel="stylesheet" href="ht
2021-02-07 17:12:15
391
原创 JetBrains IDE Support的安装
昨天，某落魄前端改烤串程序猿向我推荐了WebStorm这个工具，捅了一天，格外喜欢，难怪号称最好的为专用于web开发的编辑器。话不多说，刚接触不多，还没摸明白，就现在说说JetBrains IDE Support插件，简称JB。JetBrains IDE Support是一款支持编译即时显示在浏览器上调试的谷歌浏览器插件，很吸引人吧，然后我就去下载和安装了。因为没翻墙，进不了Chrome 网上...
2020-07-27 15:52:46
10659
8
原创 vue进行简单分页
学习框架的目的是让我们开发更为便捷，相对于用原生或是jQuery来写分页，vue更为简单快捷。之前写过真分页（后端写好分页）的文章，现在来写假分页（前端自己写分页）的文章。废话不多说，直接上代码。html代码：<a class="prev" href="" @click.prevent="prev"><<</a><span v-for="index in page" :class="newPage == index ?'current':''"
2020-05-23 12:15:30
537
原创 三级联动下拉选框获取选中的值
在项目中，需要使用三级联动，由于三级是分开的，是三个请求，所以只能获取到选中的选项值，然后分别进行请求。在项目中我引入了vue，使用axios进行请求。效果如下：过程：使用$event来进行获取下拉选项的value值。<div class="layui-form-item"> <label class="layui-form-label">学...
2020-04-23 12:48:07
1103
原创 vue-cli脚手架的搭建
一、安装node.js（webpack基于node.js）1.进入官网下载node.js；2.查看版本： node -v和npm -v3.安装webpack：配置npm安装全局模块的路径和缓存cache的路径，方便管理：在node.js安装目录下node_global和node_cache文件夹；在cmd命令下执行命令：npm config set prefix “D:\node\i...
2020-04-04 12:30:04
125
原创 vue中路由跳转及传参
学习vue，我们需要了解什么是单应用页面、路由以及生命周期：1.单应用页面：开发的项目都在一个页面中，显示的是当前页面，其它页面销毁。2.路由：点击切换对应的页面。3.生命周期：vue实例从挂载到销毁的过程。一、在单页面应用中，使用路由<router-link>来进行页面的跳转。<router-link to="/search">xxxx</router-l...
2020-04-03 09:58:58
460
原创 vue中的常用指令
在正式使用vue之前，我们需要熟悉vue中的各种指令：1.{{}}文本插值：<div>{{specials}}</div>data() { return{ specials:"公安与司法大类" };}vue就将公安与司法大类渲染到页面。2.v-bind动态绑定：v-bind可以缩写为:插入一个动态的class，&l...
2020-04-03 09:40:17
129
原创 vue中的事件方法
最近在学习vue框架，相比于之前用的jQuery，vue使用起来挺简单。在vue中的script部分，有各种不同的事件方法：<script> import NavBottom from "./components/NavBottom"; //引入组件export default { //export default 导出一个默认模块，这个模块可以匿名 name...
2020-04-03 08:53:07
499
原创 图片的映射--map标签
自从上一下公司离职后，就没有继续更新博客了，最近在做前端的相关兼职。今天客户要求使用一张大图，然后在其中应用多个超链接，对于之前没用过map标签的我是懵逼的。但通过学习，发现map挺方便的，于是继续更新博客记录我的新手前端生涯。话不多说，直接上代码：<img src='img/as.png' class="img-responsive" usemap="#planetmap2"/&...
2019-12-14 21:45:44
329
原创 前端优化之减少作用域链上的查找
为什么要减少作用域链上的查找次数？ 因为js代码在执行的时候，如果需要访问一个变量或者一个函数的时候，它需要遍历当前执行环境的作用域链，而遍历是从这个作用域链的前端一级一级的向后遍历，直到全局执行环境，所以这里往往会出现一个情况，那就是如果我们需要经常访问全局环境的变量对象的时候，我们每次都必须在当前作用域链上一级一级的遍历，这显然是比较耗时的。优化方法： 使用局部变量来缓存全局变量，来...
2019-11-07 16:58:14
222
原创 前端优化之资源加载
资源加载的位置 通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使功能可用。1、CSS文件放在head中，先外联css，后内联css；2、JS文件放在body底部，先外联css，后内联js；3、处理页面、处理页面布局的JS文件放在head中；4、body中间尽量不写style标签和script标签。资源加载的时期1、异步script标签： defe...
2019-11-07 16:45:04
396
原创 前端优化之减少HTTP请求
浏览器只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。HTTP请求从建立到关闭的步骤： 1)客户端连接到Web服务器； 2)发送HTTP请求； 3)服务器接受请求并返回HTTP响应； 4)释放连接TCP链接。 这些步骤都是需要花...
2019-11-07 13:39:10
1554
原创 前端优化之缓存
为什么要使用缓存？因为它能让某些时候，性能表面上变得更加，这个就是今天要讨论的问题。 昨天在做ajax数据动态生成的下拉列表时，发现了一个问题，就是加载渲染的速度巨缓慢（ps：才一百多条数据），在实际的应用场景中，用户等你一个下拉列表加载十秒、二十秒你觉得可能吗，这很明显严重影响到了用户体验。 分析了一下问题，在之前的页面里已经获取了一次所有的数据，于是我想到了缓存。 优化：使用lo...
2019-11-07 10:49:03
225
原创 前端优化之for循环
for循环是前端常用的语句，在满足功能的同时，更重要的是注意性能。接下来讲讲该如何对for循环进行优化。1.使用break或continue跳出循环： break 语句可跳出当前循环，继续执行该循环之后的代码。 continue语句中断当前循环中的当前迭代，继续循环中的下一个迭代。 遍历查找替换某些属性的时候，一定要记得跳出一下，避免不必要的操作。for (i=0;i<10;...
2019-11-07 10:28:30
3782
原创 前端优化之if...else判断
在前端，我们大多习惯使用if…else if…else来进行判断，但是这样做代码不美观，而且可读性低且性能差，于是写了这么一篇博客。关于if…else的优化：优化前的代码：function daxiao(number) { var n =Math.floor(Math.random()*100); if (number == n) { return "值相等"...
2019-11-06 16:24:27
3349
原创 JavaScript中Math对象的方法
最近常常使用到Math对象，但是不清楚与它相关的方法，于是写一篇博客，记录Math对象的方法。Math 对象用于执行数学任务。无需创建，通过把 Math 作为对象使用就可以调用其所有属性和方法。常用：方法描述max(x,y)返回 x 和 y 中的最大值。min(x,y)返回 x 和 y 中的最小值。random()返回 0 ~ 1 之间的随机数。c...
2019-11-06 10:45:34
270
原创 自适应布局的实现方法
关于自适应，开发多套界面，通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。...
2019-11-04 10:29:58
545
原创 响应式布局的实现方法
响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好的体验。一共有以下五种方法实现响应式布局： １.百分比布局。 2.媒体查询布局。 3.rem响应式布局。 4.vw响应式布局。 5.flex弹性布局。1.百分比布局： 百分比布局很简单，就是对盒子的属性设置百分比来适配不同的屏幕。２.媒体查询布局： 媒体查询就是对不同分辨率的屏幕编写不同的css样式，...
2019-11-04 10:01:30
2296
原创 自适应和响应式的区别
自适应：百分比布局，宽度使用百分比，文字使用em，现在也很多使用rem了，也就是所谓的高清方案；响应式：据屏幕的大小自动的调整页面的展现方式，以及布局；区别：两种方式的解决问题是不一样的；自适应是为了解决如何才能在不同大小的设备上呈现相同的网页；响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局—————————————...
2019-11-02 13:54:11
6555
1
原创 布局之flex布局
为什么需要flex布局？答案是传统的div来实现自适应布局的局限性大，基于盒状模型，依赖 display 属性 + position属性 + float属性。而flex 布局，可以简便、完整、响应式地实现各种页面布局。一比较，优势出来了，废话少说，直接开始。1.了解flex布局： flex布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。块级元素...
2019-11-01 10:53:30
583
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人