前端常用公共方法工具类
关于时间的处理1. 时间格式化12345678910111213141516171819202122232425262728293031323334353637383940414243444546/** * @param {(Object|string|number)} time * @param {string} TimeFormat 想要返回时间的格式 例如 '{y}-{m}-{d} {h}:{i}:{s} {a}' {a}为周 * @returns {string} */function parseTime(time, TimeFormat) { if (!time) { return null; } if (arguments.length === 0) { return null ...
解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136<!-- * @Author: luopeng * @Description: el-select下拉滚动加载 * @Date: 2022-08-31 09:22:49 * @LastEditTime: 2022-08-31 15:53:35--><template> <div class="content"> <el-sel ...
el-form表单封装
缘由 系统页面大部分为form+tabel的结构,系统复杂起来代码就看起来非常冗余,要修改起来也很麻烦,于是决定将表单封装起来。 结构 业务与逻辑区分 新建const.js文件,处理表单逻辑 配置化 json对象化配置表单属性 扩展&特殊处理 配置slot插槽 开始123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130<template> <el-form ref="form" :id="f ...
Hexo部署到个人云服务器
前言 最近趁着活动薅羊毛又把服务器续上了,既然白嫖到了不用白不用,就将个人博客挪个窝;顺便记录一下。 购买服务器首先我们需要有一台云服务器,我这里是买的腾讯云的 通过git生成ssh秘钥1234567// 假如没有设置git的全局信息需要先设置 设置过了可以忽略git config --global user.name "yourname"git config --global user.email youremail@example.com// 生成SSH密钥ssh-keygen -t rsa -C "youremail@example.com"// 禁用自动转换,这个不设置后面上传时会出现警告git config --global core.autocrlf false 配置服务器git 登录服务器 安装git通过git –version命令查看是否存在git命令,我这里已经安装好了;如果显示的是not found, 需要去安装yum install curl-devel expat-devel gettext-devel opens ...
外挂标签
行内文本样式 text 带 下划线 的文本 带 着重号 的文本 带 波浪线 的文本 带 删除线 的文本 键盘样式的文本 command + D 密码样式的文本:这里没有验证码123456{% u 下划线 %} 的文本{% emp 着重号 %} 的文本{% wavy 波浪线 %} 的文本{% del 删除线 %} 的文本{% kbd command %} + {% kbd D %}{% psw 这里没有验证码 %} 彩色文字在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字文档「开始」页面中的标题部分就是超大号文字。 Volantis A Wonderful Theme for Hexo 彩色文字在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字文档「开始」页面中的标题部分就是超大号文字。 Volantis A Wonderful Theme for Hexo 12 ...
Element-UI问题清单
部分内容转载自:8号的凌晨4点的一份 ElementUI 问题清单 form表单只有一个 input 时回车键刷新页面原因:触发了表单默认的提交行为,给el-form加上@submit.native.prevent就行了。 12345678910<el-form inline @submit.native.prevent> <el-form-item label="订单号"> <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable @keyup.enter.native="enterInput" /> </el-form-item></el-form> 动态表单form重置遇到的问题相对于动态表单(有条件的对表单进行渲染)而言,需要使用v-show实现显示隐藏功能。如果使用v-if会报错,但不会影响重置结果, ...
常用的一些CSS样式
文本溢出隐藏 单行文本123456p{ width:200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 多行文本123456p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 中英文自动换行 word-break:break-all;只对英文起作用,以字母作为换行依据word-wrap:break-word; 只对英文起作用,以单词作为换行依据white-space:pre-wrap; 只对中文起作用,强制换行white-space:nowrap; 强制不换行,都起作用 12345678910111213141516171819p{ word-wrap: break-word; white-space: normal; word-break: break ...
css水平垂直居中
这是一个很常见的样式布局,网上也有很多的实现方式,本文主要是针对一些比较常用到的方法做一下总结,记录一下。 现有实现方式大致的思路归纳为以下几种: 固定宽高居中 absolute + margin auto absolute + 负 margin absolute + calc 不定宽高居中 lineheight flex absolute + transform grid table-cell 公共代码(后面代码都基于这里) 123<div class="out"> <div class="inner">水平垂直居中</div></div> 实现的效果: absolute + margin auto123456789101112131415161718.out { width: 500px; height: 500px; border: 1px solid #000; position: relative;}.inner { b ...
js if/else 语句优化策略
前言 在项目当中,都会遇到需要做大量分支判断的情况,最常用到的就是用 if/else;但是用起来并不是很美观;所以当遇到大量分支判断嵌套在一起时,就会显得很难阅读。就要对应地做出一些优化。 简单逻辑判断提前 return123456789101112let a = 1;if (a) { a = 2;} else { return;}// 写成if (!a) { return;}a = 2; ||123456789let a = 1;if (a) { a = 1;} else { a = 2;}// 修改为a = a || 0; 三元表达式12345678910111213let a = 1, b = 2, c = 3, d = 4;if (a === b) { a = d;} else { a = c;}// 修改为a = a === b ? d : c; 按位异或运算符^123456789let a =1,b=2,c= ...
数组对象求和
数组对象求和问题,在项目中有时会遇到列表求和的情况,这里记录一下。 12345let list = [ { id: 1, value1: 5, value2: 10, value3: 20 }, { id: 2, value1: 15, value2: 10, value3: 50 }, { id: 3, value1: 40, value2: 20, value3: 20 },]; 利用 reduce()和 Object.keys()1234567891011function mergeArr(arr, data) { let result = arr.reduce((acc, cur) => { Object.keys(acc).forEach((item) => (acc[item] += cur[item])); return acc; }, data); return result;}const data = { value1 ...