- 博客(141)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 浅谈微前端【qiankun】的应用
通过微前端架构，main、user 和 order 可以独立开发、独立部署，减少了各个模块之间的耦合性，同时方便团队协作开发。这种架构模式可以用于大型企业级应用的不同模块中，例如 ERP 系统、在线商城系统等，通过微前端技术，能够极大地提高开发效率和应用的扩展性。
2024-10-17 15:30:57
1013
原创 关于 typeof 与 instanceof 区别引出的原型对象问题
原型是一个对象，其他对象可以通过它实现属性和方法的继承。原型链是一种机制，它提供了属性查找的路径，使得对象可以访问原型中定义的属性和方法。原型链的末端是 Object.prototype，所有的JavaScript对象都直接或间接地继承自 Object.prototype。即：构造函数的.prototype（显示原型） 指向了（===）实例对象的.proto（隐式原型）① 结合上面instanceof 的含义内容，（它检查右侧构造函数的 prototype 属性是否存在于左侧对象的原型链上）；
2024-03-07 15:42:22
959
原创 el-date-picker 日期时间选择器 限时时间范围 精确到时分秒
el-date-picker 日期时间选择器 限时时间范围 精确到时分秒
2023-11-06 10:46:05
2336
原创 el-form动态检验无法生效问题（已解决）
要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;
2023-09-12 13:39:41
1536
原创 【Ts之Omit 排除属性】
FlatListDemo的props需要传入arr，和 需要渲染的renderItem，需要排除data属性。app.tsx中使用。
2023-07-19 23:46:35
635
原创 解决storybook7.0中全局引入css样式
如果想要在storybook中引入全局样式，目前官方并未有提供一个完全的例子来供开发中使用，而且全英文下要精确找到解决问题还是比较吃力，一下是我的配置解决。
2023-05-08 18:29:53
741
1
原创 如果后端接口有一百多字段，TypeScript 中的 interface接口是不是要一一列举出来？
但是，不必一定要定义所有字段的接口，可以使用可选属性、索引签名和扩展等特性来简化接口定义。在上面的例子中，我们定义了一个 User 接口，并通过扩展它来定义了 Admin 和 Guest 接口。综上所述，对于具有大量字段的对象，可以使用可选属性、索引签名和扩展等特性来简化接口定义。在上面的例子中，我们定义了一个索引签名，它允许任意字符串类型的字段，并将它们的类型定义为 string 或 number。在上面的例子中，email 和 phone 字段是可选的，因此可以省略它们。
2023-04-18 10:02:17
465
原创 长列表demo
/将data转换为ref对象的数组或对象属性。这可以在data中使用任何方。// 截断数组长度为10，不然会造成内存溢出。//设置每个itemHeight。//解决刷新时出现 {{}}//获取滚动条的高度。
2023-04-12 23:01:33
115
原创 前端之单例模式
它基于 classloader 机制避免了多线程的同步问题，不过，instance 在类装载时就实例化，虽然导致类装载的原因有很多种，在单例模式中大多数都是调用 getInstance 方法， 但是也不能确定有其他的方式（或者其他的静态方法）导致类装载，这时候初始化 instance 显然没有达到 lazy loading 的效果。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。：这种方式是最基本的实现方式，这种实现最大的问题就是不支持多线程。优点：没有加锁，执行效率会提高。
2023-04-01 22:56:13
460
原创 splice的替换删除修改
整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果只删除了一个元素，则返回只包含一个元素的数组。如果添加进数组的元素个数不等于被删除的元素个数，数组的长度会发生相应的改变。
2022-10-13 22:34:54
522
原创 JS数组中的方法 flat()，flatMap()
它与map连着深度值为1的flat几乎相同，但flatMap通常在合并成一种方法的效率稍微高一些。官方解释该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。一个新的数组，其中每个元素都是回调函数的结果，并且结构深度depth值为1。//只会将flatMap中的函数返回的数组“压平”一层。指定要提取嵌套数组的结构深度(降维深度)，默认值为1。数组中正在处理的当前元素的索引。当前正在数组中处理的元素。//返回新数组的元素。...
2022-07-22 17:45:54
6720
原创 Utils 前端随机生成id，中文姓名
随机生成id/** * 获取当页过滤项 */export function getFilterItem(data, key) { return Array.from(new Set((data || []).map(({ [key]: value }) => value))).map(value => ({ value, text: value }))}// 生成唯一idexport function guid() { return 'xxxxxxxx-xxxx-4xxx
2022-05-18 15:09:07
1031
原创 关于flex布局justify-content:space-around最后一个不对齐的解决方法
问题图解决图解决 css 代码 .itemBox { width: calc((100% - 30px) / 3); margin-bottom: 5px; margin-right: 10px; cursor: pointer; text-align: center; border-radius: 6px; border: 1px solid #000; &:nth-child(3n) { margin-ri
2022-05-18 15:03:30
1036
2
原创 VeeValidate表单校验
一、安装npm install vee-validate --save //安装可能会报错npm install vee-validate@2.0.0-rc.25 //报错用这个二、统一封装validate.jsimport Vue from 'vue'import VeeValidate, { Validator } from 'vee-validate'import zh from 'vee-validate/dist/locale/zh_CN' // 引入中文文件Validat
2022-05-04 22:35:41
563
原创 antdV中Anchor 锚点总结
<div :class="$style.title"> <a-anchor :get-container="getContainerBox" :affix="false" :target-offset="targetOffset" :class="$style.anchor" @click="handleAnchorClick" ...
2022-04-21 12:22:25
6125
2
原创 快速实现筛选效果
<!-- * @Description: * @Author: Ran junlin * @Date: 2021-04-29 21:21:38 * @LastEditTime: 2022-03-22 09:02:55 * @LastEditors: Ran junlin--><template> <div> <!-- <van-dropdown-menu> <van-dropdown-item title="
2022-03-22 09:25:14
458
原创 简易时钟倒计时（带盒子投影css）
<!-- * @Description: * @Author: Ran junlin * @Date: 2022-03-02 11:22:14 * @LastEditTime: 2022-03-02 11:22:39 * @LastEditors: Ran junlin--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam
2022-03-02 11:24:46
294
原创 js八股文心得体会
function ADD(x = 1, y = 0) { this.x = x this.y = y}ADD.prototype.addFn = function() { return this.x + this.y}const m = new ADD(5, 6) // console.log(m); // console.log(m.addFn()); // // 普通函数、 // function fnP(a, b, c) { /
2022-02-26 22:38:36
620
转载 Vue3中简单使用vuedraggable拖拽
一、安装引入npm i vuedraggable@4.1.0 --saveimport Draggable from 'vuedraggable';二 、使用<template> <button @click="submit">提交数据</button> <div class="drag-box"> <Draggable v-model="tags" :list="list" :animat
2022-02-18 15:56:59
9112
4
原创 Vue3+element-plus 表格实现上移下移排序
<!-- * @Description: * @Author: Ran junlin * @Date: 2022-02-18 10:16:09 * @LastEditTime: 2022-02-18 14:48:10 * @LastEditors: Ran junlin--><template> <el-page-header content="生成试卷" @back="goBack" /> <el-divider></el-di
2022-02-18 14:49:31
1658
原创 vue-router中页面直接拿参数的 props传值的三种方式
一、原始方法{path: ‘/about/:id/:name’,component: About}页面拿参数 : this.$route.params.id二、props(布尔值方法)tips：此方法只能通过params方式上行得通{path: ‘/about/:id/:name’,component: About，props:true}页面拿参数 在页面 props:['id','name]二、props(函数方法) { path: '/about/:id
2022-02-14 14:40:37
1075
原创 vue2中兄弟组件通讯
方法一：（bus事件总线）推荐一、 main.js//创建vmnew Vue({ el:'#app', render: h => h(App), beforeCreate() { Vue.prototype.$bus = this },})二、App 搜索案例APP组件<template> <div class="app"> <Search /> <br /> <hr />
2022-02-11 14:59:12
711
原创 vue中transition动画（移动端页面切换左右滑动效果）
例子一：（简单进入和离开动画）demo1<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="hello" appear> <h1 v-show="!isShow" key="1">vue2！</h1> <h1 v-show="isShow"
2022-02-11 10:12:18
8021
原创 vue利用computed简单实现过滤筛选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.
2022-02-08 16:35:37
889
原创 js快捷使用递归构建树
一、方法封装导出export const makeElementTree = (params) => { // console.log(params); // 解构取出参数 const { pid, list, pidFiled, labelFiled, valueFiled } = params // 构建一个内部函数，用于实现递归 const makeTree = (pid, arr) => { const res =
2021-12-21 16:05:10
949
原创 从数组里面随机取出几个数
getRandomArrayElements (arr, count) { var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index; while (i-- > min) { index = Math.floor((i + 1) * Math.random()); temp = shuffled[index]; shuffled...
2021-12-10 11:34:55
968
原创 JS中substr和substring的用法和区别
实例隐藏手机号码中间位数userInfo.phone?userInfo.phone.toString().substr(0, 3)+'****' +userInfo.phone.toString().substr(7):'--'substr返回一个从指定位置开始的指定长度的子字符串。stringvar.substr(start [, length ])参数说明：start ：表示从什么位置开始（0~n）索引length：表示要截取的长度。substring返回位于 String
2021-12-09 16:23:31
572
原创 eachart toolbox图标转表格数据
toolbox: { show: true, feature: { dataZoom: { yAxisIndex: "none", }, //区域缩放，区域缩放还原 dataView: { readOnly: false, optionToContent: function (opt) { let axisData = opt.xAxis[0].dat.
2021-11-30 14:43:39
271
原创 js获取本月初与月底的时间、获取前一天的时间。
可以在utils.js里面封装通用方法，引入即可使用。/* 获取本月初跟月底*/export const getCurrentMonth = () => { // 2021-10-01 00:00:00 let firstDate = new Date(); let startDate = firstDate.getFullYear() + "-" + (firstDate.getMonth() + 1 < 10 ? "0" : "") + (.
2021-11-02 15:01:42
688
原创 前端请求下载二进制流的word excel
// 下载apiexport async function downloadWord(data) { const res = await request.post('/double-reduce/report/downloadWord', data, { FORM: true, responseType: 'blob', // 表明返回服务器返回的数据类型 这里不写接受类型，文件格式乱码 }); return res;}调用下载接口下载类型对应xls: ‘ap
2021-10-20 17:59:01
473
原创 flex-shrink: 0让盒子水平上出现滚动条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2021-10-17 11:36:47
264
原创 element-table组件，动态添加行背景。
<el-table :data="tableData" highlight-current-row //点击当前行高亮 ref="multipleTable" //绑定ref > <el-table-column fixed align="center" type="index" width=".
2021-10-08 17:38:33
415
原创 js原生楼层实现scrollIntoView
1.基于原生Api scrollIntoViewscrollIntoView用法：element.scrollIntoView(scrollIntoViewOptions);在循环数组时给标签动态添加class，注意scrollIntoView地位的是到具体一个位置数，所以clas一定是唯一的，用动态id更好 <!-- 楼层 --> <ul class="ul"> <li v-for="qn in questionnaireList" :ke
2021-08-19 11:02:46
655
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人