冷太阳a-CSDN博客

原创关于 typeof 与 instanceof 区别引出的原型对象问题

原型是一个对象，其他对象可以通过它实现属性和方法的继承。原型链是一种机制，它提供了属性查找的路径，使得对象可以访问原型中定义的属性和方法。原型链的末端是 Object.prototype，所有的JavaScript对象都直接或间接地继承自 Object.prototype。即：构造函数的.prototype（显示原型）指向了（===）实例对象的.proto（隐式原型）① 结合上面instanceof 的含义内容，（它检查右侧构造函数的 prototype 属性是否存在于左侧对象的原型链上）；

2024-03-07 15:42:22 888

原创 el-date-picker 日期时间选择器限时时间范围精确到时分秒

el-date-picker 日期时间选择器限时时间范围精确到时分秒

2023-11-06 10:46:05 1826

原创 el-form for循环动态校验规则

el-form for循环动态校验规则

2023-09-19 18:01:43 249

原创 el-form动态检验无法生效问题（已解决）

要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;

2023-09-12 13:39:41 1129

原创【Ts之Omit 排除属性】

FlatListDemo的props需要传入arr，和需要渲染的renderItem，需要排除data属性。app.tsx中使用。

2023-07-19 23:46:35 409

原创解决storybook7.0中全局引入css样式

如果想要在storybook中引入全局样式，目前官方并未有提供一个完全的例子来供开发中使用，而且全英文下要精确找到解决问题还是比较吃力，一下是我的配置解决。

2023-05-08 18:29:53 456 1

原创如果后端接口有一百多字段，TypeScript 中的 interface接口是不是要一一列举出来？

但是，不必一定要定义所有字段的接口，可以使用可选属性、索引签名和扩展等特性来简化接口定义。在上面的例子中，我们定义了一个 User 接口，并通过扩展它来定义了 Admin 和 Guest 接口。综上所述，对于具有大量字段的对象，可以使用可选属性、索引签名和扩展等特性来简化接口定义。在上面的例子中，我们定义了一个索引签名，它允许任意字符串类型的字段，并将它们的类型定义为 string 或 number。在上面的例子中，email 和 phone 字段是可选的，因此可以省略它们。

2023-04-18 10:02:17 329

原创长列表demo

/将data转换为ref对象的数组或对象属性。这可以在data中使用任何方。// 截断数组长度为10，不然会造成内存溢出。//设置每个itemHeight。//解决刷新时出现 {{}}//获取滚动条的高度。

2023-04-12 23:01:33 68

原创 TS之静态成员与方法拦截器的使用

【代码】TS之静态成员与方法拦截器的使用。

2023-04-02 13:41:31 277

原创前端之单例模式

它基于 classloader 机制避免了多线程的同步问题，不过，instance 在类装载时就实例化，虽然导致类装载的原因有很多种，在单例模式中大多数都是调用 getInstance 方法，但是也不能确定有其他的方式（或者其他的静态方法）导致类装载，这时候初始化 instance 显然没有达到 lazy loading 的效果。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。：这种方式是最基本的实现方式，这种实现最大的问题就是不支持多线程。优点：没有加锁，执行效率会提高。

2023-04-01 22:56:13 336

原创 splice的替换删除修改

整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果只删除了一个元素，则返回只包含一个元素的数组。如果添加进数组的元素个数不等于被删除的元素个数，数组的长度会发生相应的改变。

2022-10-13 22:34:54 450

原创 js数组常用方法

find() 方法返回数组中满足提供的测试函数的

2022-09-23 15:19:06 158

原创前端常见的处理数据的一些方法

【代码】前端常见的处理数据的一些方法。

2022-09-23 15:09:42 386

原创 vue权限permission实现

vue权限permission实现。

2022-08-05 15:20:16 2052 3

原创 JS数组中的方法 flat()，flatMap()

它与map连着深度值为1的flat几乎相同，但flatMap通常在合并成一种方法的效率稍微高一些。官方解释该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。一个新的数组，其中每个元素都是回调函数的结果，并且结构深度depth值为1。//只会将flatMap中的函数返回的数组“压平”一层。指定要提取嵌套数组的结构深度(降维深度)，默认值为1。数组中正在处理的当前元素的索引。当前正在数组中处理的元素。//返回新数组的元素。...

2022-07-22 17:45:54 6397

原创通过promise.all方法去判断一组接口验证结果

promise.all

2022-06-23 23:43:21 295

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

原创关于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 884 2

原创 VeeValidate表单校验

一、安装npm install vee-validate --save //安装可能会报错npm install [email protected] //报错用这个二、统一封装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 474

原创 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 5513 2

原创快速实现筛选效果

<template> <div> <!-- <van-dropdown-menu> <van-dropdown-item title="

2022-03-22 09:25:14 379

原创简易时钟倒计时（带盒子投影css）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam

2022-03-02 11:24:46 233

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

转载 Vue3中简单使用vuedraggable拖拽

一、安装引入npm i [email protected] --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 8852 4

原创 Vue3+element-plus 表格实现上移下移排序

<template> <el-page-header content="生成试卷" @back="goBack" /> <el-divider></el-di

2022-02-18 14:49:31 1427

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

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

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

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

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

原创从数组里面随机取出几个数

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 895

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

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

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

原创前端请求下载二进制流的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 420

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

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

原创 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 590 2

原创 js数组、数组嵌套根据某个字段排序（eachart图标双击事件、vue双击）

1.根据某个字段排序var arr = [ {name:'张三',age:15}, {name:'李四',age:18}, {name:'王五',age:28}];function compare(property){ return function(a,b){ var value1 = a[property]; var value2 = b[property]; return value1 - value2; //降

2021-08-18 16:19:54 4919 1

原创 element Tree树形控件的使用

<template> <div class="table-wrapper"> <button @click="handleCancelSelect">取消所有

2021-07-14 15:49:50 505

vue3+ts入门（todolist案例）

html中嵌入vue3框架模板（过滤案例）

video视频标签做登录素材【webpack】

e-pie-two.rar

前端响应式网站开发模板

空空如也