自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(71)
  • 收藏
  • 关注

原创 vue中tinyMCE富文本框加入图片上传至服务器、行高等功能

图片上传至服务器、行高等功能

2023-02-21 09:25:32 984 1

原创 前端js计算导致的精度问题解决方案

js精度丢失导致计算值偏差问题

2022-07-24 16:45:58 1775

原创 vite热更新(vue3)

vite热更新(vue3)

2022-06-07 09:33:56 10068 5

原创 uni-calendar日历组件日期范围默认选中及优化存在日期范围后点击第一下、第二下选中为下一日期范围

1.日期范围默认选中:    该组件未提供默认选择日期范围,需对组件进行修改,步骤如下:    1)在 uni-calendar 文件下找到 uni-calendar.vue 文件, props 中增加:defaultRange: { type: Array, default () { return [] }},    watch 方法中增加:defaultRang

2022-04-08 10:40:19 8803 9

原创 数组对象中对某几个属性相同的对象进行处理

使用 对象[属性] 的方法存储到新对象中,再将其拿出来跟数组对象逐一比较。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 1238

原创 element:大图预览出现层级穿透问题

项目中有这样的数据格式:[ { attachments: [] // 图片地址数组 // ...其它 }, // ...其它]这时候需要将外层循环后再循环图片,使用el-image的previewSrcList开启大图预览。当外层有多个的时候,这时点击前面的图片大图,后面的内容会穿透到大图上,此时查看后面内容的层级为1,但大图的层级为2000,按常理不会穿透,百思不得其解,F12调试将.el-card__body的层级去掉时候就正常了。<el-row :gutter="20

2021-12-02 11:59:06 3819

原创 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 15657

原创 一、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 235

原创 登录表单的验证及重置(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 1493

原创 ElementUI按需引入

链接:https://blog.csdn.net/lxy123456780/article/details/107151232

2021-05-28 09:32:12 276

原创 Vue中watch用法

链接:https://www.jianshu.com/p/b70f1668d08f

2021-05-25 09:32:57 106

原创 template的用法

转:https://www.cnblogs.com/taohuaya/p/10686420.html

2021-05-24 15:58:29 440

原创 路由守卫的简单使用-登录功能

    在用户进入我们系统的时候,需要验证是否已经登录,再来进行相应的跳转。如果使用传统的方式来逐一进行判断验证,是极为麻烦的,于是有了路由守卫,话不多说,直接上代码:1.login.vue登录界面    因为时间关系,所以就简单的写了一个输入框和一个登录按钮…<template> <div id="login"> <div class="login-box">

2021-05-21 15:43:19 1344 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 34545 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 331

原创 vue组件间传值方式

前言:vue组件传值在开发中遇到的频率很高,以防遗忘,故写一篇博客记录一下。当然该篇博客并不全面,在日后再逐步补充完善…1、prop父传子父组件:<template> <div id="father"> <Children :byData="fatherByChildren"/> <!-- ‘:’为‘v-bind’的简写,这里使用‘v-bind’,使用传的是fatherByChildren这个对象,不使用传的是fatherByChildren这个字符

2021-05-20 17:16:12 169

原创 封装一个简单的分页组件(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 866 1

原创 2.微信小程序(colorUI)- 构建底部操作条

   写在前面:colorUI中提供了很多好看的底部操作条,如何使用这些底部操作条让我们的项目看起来更美观(ps:微信小程序的底部操作条tabBar总感觉少了点什么)。一、null二、null

2021-03-17 09:41:15 1674 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 1366

原创 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 396

原创 JetBrains IDE Support的安装

昨天,某落魄前端改烤串程序猿向我推荐了WebStorm这个工具,捅了一天,格外喜欢,难怪号称最好的为专用于web开发的编辑器。话不多说,刚接触不多,还没摸明白,就现在说说JetBrains IDE Support插件,简称JB。JetBrains IDE Support是一款支持编译即时显示在浏览器上调试的谷歌浏览器插件,很吸引人吧,然后我就去下载和安装了。因为没翻墙,进不了Chrome 网上...

2020-07-27 15:52:46 10711 8

原创 vue进行简单分页

学习框架的目的是让我们开发更为便捷,相对于用原生或是jQuery来写分页,vue更为简单快捷。之前写过真分页(后端写好分页)的文章,现在来写假分页(前端自己写分页)的文章。废话不多说,直接上代码。html代码:<a class="prev" href="" @click.prevent="prev">&lt;&lt;</a><span v-for="index in page" :class="newPage == index ?'current':''"

2020-05-23 12:15:30 539

原创 三级联动下拉选框获取选中的值

在项目中,需要使用三级联动,由于三级是分开的,是三个请求,所以只能获取到选中的选项值,然后分别进行请求。在项目中我引入了vue,使用axios进行请求。效果如下:过程:使用$event来进行获取下拉选项的value值。<div class="layui-form-item"> <label class="layui-form-label">学...

2020-04-23 12:48:07 1108

原创 vue创建和启动项目

创建项目vue create 项目名称路由模式 是否选择history模式启动项目

2020-04-04 12:34:13 705 1

原创 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 126

原创 vue中路由跳转及传参

学习vue,我们需要了解什么是单应用页面、路由以及生命周期:1.单应用页面:开发的项目都在一个页面中,显示的是当前页面,其它页面销毁。2.路由:点击切换对应的页面。3.生命周期:vue实例从挂载到销毁的过程。一、在单页面应用中,使用路由<router-link>来进行页面的跳转。<router-link to="/search">xxxx</router-l...

2020-04-03 09:58:58 464

原创 vue中的常用指令

在正式使用vue之前,我们需要熟悉vue中的各种指令:1.{{}}文本插值:<div>{{specials}}</div>data() { return{ specials:"公安与司法大类" };}vue就将公安与司法大类渲染到页面。2.v-bind动态绑定:v-bind可以缩写为:插入一个动态的class,&l...

2020-04-03 09:40:17 130

原创 vue中的事件方法

最近在学习vue框架,相比于之前用的jQuery,vue使用起来挺简单。在vue中的script部分,有各种不同的事件方法:<script> import NavBottom from "./components/NavBottom"; //引入组件export default { //export default 导出一个默认模块,这个模块可以匿名 name...

2020-04-03 08:53:07 500

原创 图片的映射--map标签

自从上一下公司离职后,就没有继续更新博客了,最近在做前端的相关兼职。今天客户要求使用一张大图,然后在其中应用多个超链接,对于之前没用过map标签的我是懵逼的。但通过学习,发现map挺方便的,于是继续更新博客记录我的新手前端生涯。话不多说,直接上代码:<img src='img/as.png' class="img-responsive" usemap="#planetmap2"/&...

2019-12-14 21:45:44 331

原创 前端优化之减少作用域链上的查找

为什么要减少作用域链上的查找次数?  因为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 400

原创 前端优化之减少HTTP请求

浏览器只有10%-20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。HTTP请求从建立到关闭的步骤:  1)客户端连接到Web服务器;  2)发送HTTP请求;  3)服务器接受请求并返回HTTP响应;  4)释放连接TCP链接。  这些步骤都是需要花...

2019-11-07 13:39:10 1601

原创 前端优化之缓存

为什么要使用缓存?因为它能让某些时候,性能表面上变得更加,这个就是今天要讨论的问题。  昨天在做ajax数据动态生成的下拉列表时,发现了一个问题,就是加载渲染的速度巨缓慢(ps:才一百多条数据),在实际的应用场景中,用户等你一个下拉列表加载十秒、二十秒你觉得可能吗,这很明显严重影响到了用户体验。  分析了一下问题,在之前的页面里已经获取了一次所有的数据,于是我想到了缓存。  优化:使用lo...

2019-11-07 10:49:03 228

原创 前端优化之for循环

for循环是前端常用的语句,在满足功能的同时,更重要的是注意性能。接下来讲讲该如何对for循环进行优化。1.使用break或continue跳出循环:  break 语句可跳出当前循环,继续执行该循环之后的代码。  continue语句中断当前循环中的当前迭代,继续循环中的下一个迭代。  遍历查找替换某些属性的时候,一定要记得跳出一下,避免不必要的操作。for (i=0;i<10;...

2019-11-07 10:28:30 3789

原创 前端优化之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 3364

原创 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 275

原创 自适应布局的实现方法

关于自适应,开发多套界面,通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。...

2019-11-04 10:29:58 546

原创 响应式布局的实现方法

响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好的体验。一共有以下五种方法实现响应式布局:  1.百分比布局。  2.媒体查询布局。  3.rem响应式布局。  4.vw响应式布局。  5.flex弹性布局。1.百分比布局:  百分比布局很简单,就是对盒子的属性设置百分比来适配不同的屏幕。2.媒体查询布局:  媒体查询就是对不同分辨率的屏幕编写不同的css样式,...

2019-11-04 10:01:30 2303

原创 自适应和响应式的区别

自适应:百分比布局,宽度使用百分比,文字使用em,现在也很多使用rem了,也就是所谓的高清方案;响应式:据屏幕的大小自动的调整页面的展现方式,以及布局;区别:两种方式的解决问题是不一样的;自适应是为了解决如何才能在不同大小的设备上呈现相同的网页;响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局—————————————...

2019-11-02 13:54:11 6588 1

原创 布局之flex布局

为什么需要flex布局?答案是传统的div来实现自适应布局的局限性大,基于盒状模型,依赖 display 属性 + position属性 + float属性。而flex 布局,可以简便、完整、响应式地实现各种页面布局。一比较,优势出来了,废话少说,直接开始。1.了解flex布局:   flex布局是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。块级元素...

2019-11-01 10:53:30 592

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除