前端常用轮子实现及封装
关注
分享
扫一扫
小demo
前端小端长
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue项目读取public下excel文件并解析渲染
Vue项目读取public下excel文件并解析渲染原创 2022-06-17 11:12:35 · 1713 阅读 · 2 评论 -
element ui封装可搜索下拉框（解决数据过多卡顿问题）
element ui封装可搜索下拉框，最多显示30条，解决数据过多卡顿原创 2022-06-15 15:02:11 · 908 阅读 · 0 评论 -
JS判断密码强度封装
/** * 校验密码强度 * 强度规则： * 1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱； * 2) 不少于6位的两类字符组合，中； * 3) 12位字符数以下的三类或四类字符组合，强； * 4) 12位字符数以上的三类或四类字符组合，非常好。 * @param value * @returns {number} 强度等级 */export const checkPasswordStrong = (value) => { let modes = 0 if原创 2022-01-19 11:26:23 · 609 阅读 · 1 评论 -
Vue+element纯前端封装分页表格
<template> <!-- 纯前端分页表格，只需传tableData --> <el-row> <el-col> <el-table :data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) " style="width: 100%; padding: 0 1原创 2022-01-17 16:39:19 · 628 阅读 · 0 评论 -
Vue封装axios
本文借鉴antd vue pro规范，博主信条:好的规范能很大程度减少bug的产生!request.jsimport axios from 'axios'import Cookie from 'js-cookie'// 跨域认证信息 header 名，根据自己业务自定义const xsrfHeaderName = 'token'axios.defaults.timeout = 5000axios.defaults.withCredentials = trueaxios.defaults.原创 2021-08-18 18:03:11 · 435 阅读 · 0 评论 -
JavaScript树转列表
封装即用/** * * * @param {*} Tree 将要变成列表的树 * @param {*} childrenName children字段的键名 * @return {*} list * 张志光 2021/8/4 */const treeToList = function (tree, childrenName, list) { tree.forEach(item => { if (!item[childrenName] || item[chi原创 2021-08-18 17:46:39 · 746 阅读 · 0 评论 -
JS将数组转化为树 （已封装成函数，拿来即用）
/** * listToTree.js * * @param {*} list 将要变成树的列表 * @param {*} id 元素id字段名称 * @param {*} parentId 元素父id名称 * @return {*} tree * 张志光 2021/6/23 */const listToTree = function(list, id, parentId) { let tree = []; tree = list.filter( item1 =&g原创 2021-06-23 15:04:58 · 922 阅读 · 0 评论 -
moment常用时间封装（几天前，几周前，几月前，几年前）
封装时间API自己封装了项目中需要用的常用时间，比如当前时间，几天前，几周前等等。一些UI组件比如antd,element等需要用moment对象的日期、时间组件可以直接用。上代码。import moment from 'moment'/** * 获取当前时间 * @returns {moment.Moment} */export const getNowDate = () => { return moment(new Date(), 'YYYY-MM-DD')}/**原创 2020-11-02 13:59:06 · 3601 阅读 · 0 评论 -
裁剪图片并将图片上传到到阿里云oss（element-ui上传组件结合图片裁剪插件VueCropper）
摘自本人项目，供自己查阅。如有需求请联系我共同探讨。<template> <div> <headTitle title="行业洞察文章管理" /> <div class="content"> <el-form ref="form" :model="articleData" label-width="80px"> <el-form-item label="文章标题">原创 2020-06-22 14:00:06 · 1194 阅读 · 0 评论 -
解决浏览器缩放导致页面显示不全问题
问题pc端web页面开发时,发现windows系统经常推荐用户使用125%、150%比例的缩放窗口，这样导致web页面被进行缩放，除此之外还有人为的按钮缩放。故此，在页面devicePixelRatio（设备像素比例）变化后，通过计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。解决所用JS/** * @author trsoliu * @date...原创 2020-04-16 22:51:54 · 18633 阅读 · 5 评论 -
用JS取出后台返回数据中用标签样式包裹的内容
后台返回的数据是这样的: `<p><span style="color: rgb(51, 51, 51); font-family: "Open Sans", sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-vari...原创 2020-03-20 11:23:56 · 2099 阅读 · 1 评论 -
JS封装评分控件代码
效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2019-12-27 23:36:16 · 418 阅读 · 0 评论 -
JavaScript手动实现call方法
call简易版(不支持传参的方法)实现思路:给目标对象创建一个属性，将要调用的方法绑定到这个属性上直接运行刚刚创建的属性删除这个属性这样就间接绑定了this的指向，并实现了callFunction.prototype.mycall=function(con){ //给Function的原型对象上加上mycall方法 con.fun = this; //this即...原创 2019-12-27 14:37:25 · 1614 阅读 · 0 评论