- 博客(39)
- 收藏
- 关注
RSS订阅原创 JavaScript 生成日期格式坐标
准备工作// 在 String.prototype 上添加 _padStart String.prototype._padStart = function (maxLen, fillStr) { return this.length < maxLen ? this.padStart(maxLen, fillStr) : this.toString() }// 创建工具对象const utilObj = { date: new Date(), year () {
2022-05-30 14:00:19
259
原创 CSS 实现内容区域高度自适应，超出有滚动条
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { box-sizing: border-box; margin: 0; padding: 0; height:
2022-05-25 09:44:29
3452
原创 clipboard.js 复制成功多次触发成功事件
clipboard 文档地址https://www.npmjs.com/package/clipboard伪代码<template> <div> <el-button @click="handleCommand('any string')">复制</el-button> <button ref="copyBtn" @click="doCopy" style="display: none">copy</button&
2022-05-12 10:11:10
906
原创 el-cascader 修改空状态文本
<template> <div> <el-cascader popper-class="popper-loading" ></el-cascader> </div></template><style lang="scss"> .popper-loading { .el-cascader-menu__empty-text { &:before {
2022-05-12 08:58:13
866
原创 JavaScript 操作树
class TreeData { constructor(tree) { this.tree = tree || [] } /** * @function 深拷贝一颗树 * */ cloneDeepTree () { return _.cloneDeep(this.tree) } /** * @function 根据id查询节点 * @param id {string} 目标id * @param arr {array} 查询数组，默
2022-05-08 09:32:06
132
原创 JavaScript 对手机号掩码
/* 对手机号 13520299283 进行任意位数的掩码！ 例如： 对前三位掩码：***20299283 对后四位掩码：1352029**** 对中间四位掩码：135****9283 当然，对于手机号中间四位掩码比较常见！！！* */type positionType = 'prev' | 'mid' | 'last'/** * @param str 原字符串 * @param type 前中后 * @param position type是prev，last时代
2022-05-08 09:29:15
1567
1
原创 JavaScript 实现容量转换
TS：/** * @description 容量转换 * @param size {number} 容量 注意：单位是B * @param diff {boolean} true 返回数组 false 返回字符串 * */export const formatCapacity = (size: number, diff: boolean): string|[string, string] => { if (size > 0) { const kb:number
2022-05-08 09:26:02
302
原创 JavaScript 实现数字千分位添加逗号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> /** * @description 给数字或者金额千分位添加逗号 * @param money {number} 必须传入数字类型 * @param pre
2022-05-07 22:04:42
1859
原创 el-tree 中实现点击复选框触发懒加载
下面是删减后的伪代码，不能直接运行，重要的逻辑都写了注释。大家注重开思路，我的场景和你的场景可能不一样。<template> <div> <elInputMe v-model="search" search placeholder="请搜索" :searchMethod="handleFilter"></elInputMe> <el-tree ref="tree" v-loading="loading"
2022-05-05 08:57:54
1066
1
原创 JavaScript 中监听 div 高度的变化
实现功能描述：基于 vue + elementUI，在 Dialog 中有一个 Select 选择器，当 Select 的下拉列表显示时，要求高度能够撑开 Dialog。实现效果如图：实现实际项目代码结构稍微复杂，在这只说重点A 组件伪代码：<template> <div> ... <el-dialog title="提示" :visible.sync="dialogVisible" size="mini"
2021-11-08 12:19:53
4495
原创 el-table 中获取 bodyWrapper 的方法
以前获取 bodyWrapper 方法是：this.$refs.myTable.bodyWrapper现在这种方法获取不到了，要改为：this.$refs.myTable.$elTable.bodyWrapper或者this.$refs.myTable.$refs.table.bodyWrapper
2021-11-03 10:49:35
6699
8
原创 monaco-editor 在实际项目中的使用
monaco官方文档: https://microsoft.github.io/monaco-editor/api/index.html安装：npm install monaco-editor// main.js中import * as monaco from 'monaco-editor'Vue.prototype.$monaco = monacovue组件：<template> <div> <!-- sql container-->
2021-04-28 16:35:13
2250
原创 JavaScript 实现斐波那契数列
斐波那契数列就是1,1,2,3,5,8,13…，后一位数字是前两位数字之和// 暴力迭代，这种方法的算法复杂度是O(2^n)，太费性能function stair(n) { if (n === 0) { return 1; } else if (n < 0) { return 0; } else { return stair(n - 1) + stair(n - 2) }}// 缓存计算好的值（for 循环） 自下往上 性能最好function st
2021-04-16 09:04:22
296
原创 JavaScript 判断闭合括号
判断字符串中的括号是否都合法，是否都闭合示例字符串：{([ddd])} function isValidate(str) { const inArr = []; const arr = str.split(''); for (let s of arr) { if (s === '{' || s === '[' || s === '(') { // 入栈 inArr.push(s); } if (s ===
2021-04-16 08:28:03
1285
3
原创 JavaScript 实现毫秒转换为时长
毫秒数（时间戳）转换为持续时长，或者转换成日期直接上代码/** transfer time */ const transferTime = (milliseconds = 0, type) => { // get duration const getDurations = (milliseconds) => { // days const days = milliseconds / 1000 / 60 / 60 / 24 const d
2021-04-15 18:07:26
1050
1
原创 JavaScript 中添加事件函数 addEventListener 的介绍
在addEventListener事件委托中第三个参数，可以设置为bool类型（useCapture）或者object类型(options)。object类型(options)包括三个布尔值选项capture：true使用事件捕获；false使用事件冒泡（默认值）once：true只调用一次，在调用后自动销毁listener；false可以多次调用（默认值）passive:不同浏览器默认值不同。true监听函数listener永远不调用preventDefault方法。根据规范，默
2021-04-15 17:09:39
539
原创 JavaScript 比较版本号的大小
版本号示例6.1.1^8.3.5~4.5.0^4.0.0-beta.3方法一const str = '^1.0.0-alpha.1'const str2 = '^1.0.1-alpha.1'function compare(v1, v2) { if (v1 === v2) { return 0 } const arr1 = v1.split(/\D/) const arr2 = v2.split(/\D/) // 默认版本号长度一
2021-04-15 17:08:49
3279
原创 JavaScript 中作用域的理解
执行上下文（Execution Context）每当控制器转到可执行代码的时候，就会进入一个可执行上下文，就是当前代码的执行环境，它会形成一个作用域。javascript中的执行环境包含三种：全局环境函数环境eval执行上下文的生命周期当调用一个函数时，一个新的执行上下文会被创建，它包含两个阶段：创建阶段在这个阶段，执行上下文会创建变量对象（VO），作用域链（scopeChain），确定this指向代码执行阶段创建完成之后就开始执行代码，这个时候会完成变量赋值，函数引用，以
2021-04-15 17:08:01
85
原创 memoize-one 记忆函数源码解析
例如有一个add函数function add(a,b) { return a + b;}现在要对add函数的返回结果进行缓存，就是第一次计算出a+b的结果会进行缓存，下次入参如果不变立即返回结果，不会再执行add函数。实现简版定义一个memoize的方法，接受一个函数作为参数，返回也是一个函数function memoize(fn) { // 返回一个函数 return function () { // 1.获取参数 let _len = arguments.le
2021-04-15 17:06:12
546
原创 JavaScript 防抖和节流
防抖所谓防抖，就是把触发非常频繁的的事件合并成一次去执行，即在指定的时间内只执行一次回调函数，如果在指定时间内又触发事件，重新计时<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>防抖</title></head><button id="btn">点击</button><body>
2021-04-15 17:04:21
63
原创 JavaScript 常用正则表达式
replace使用正则模式匹配// 目标输出：zheng liconst str = 'li zheng'; console.log(str.replace(/(\w+) (\w+)/, '$2 $1'));第二个参数是函数let str = 'select * from $ { aa } fldsfdsjfljsdf $ { bb }'// 目标是把上面字符串中的$ { aa }替换成没有空格的${aa}str = str.replace(/\$ {([^}]*)}/g, fun
2021-04-14 15:11:00
52
原创 JavaScript 中 0 和 null 的判断
描述假如后端接口返回数据type，type取值为0，1，2，3，4（都是数字类型）这四个值是有效值，当type取不到值的时候返回null。现在，前端请求接口获取到数据后，拿到type，当type为null时，需要给一个默认值2，那么你会怎么赋值？// 接口返回的报文体假如是这样的const res = { success: true, data: { type: null }}// 前端变量typeconst type = res.data.typ.
2021-03-24 16:25:50
3396
1
原创 Vue 中利用自定义指令实现数据加载状态
场景描述表格或者div容器中，在数据加载出来之前的状态显示。数据加载完成后，状态消失。利用v-loading指令控制。代码实现About.vue<template> <div class="about"> <button @click="loading=!loading">改变状态</button> <div class="test" v-loading="loading"> 我是test </
2021-03-01 09:48:32
484
原创 el-table 中实现表格可编辑
vue-elementUI-可编辑的表格表格上绑定的事件函数请参考elementUI官方文档场景一：整行编辑鼠标移入单元格的时候，单元格所在行中所有可编辑的单元格全部进入编辑状态。vue组件<template> <div> <el-table :data="tableData" size="mini" style="width: 100%" @cell-mouse-enter="handleCellEnter
2021-02-26 14:36:18
40314
27
原创 Git 删除本地文件后，从远程仓库重新获取
基础命令git add . // 会将文件添加到本地暂存区，未生成版本git commit -m 'xx'// 提交后会生成最新版本git checkout '文件名'// 恢复该文件到未修改之前内容git reset HEAD// 只恢复暂存区的内容，如果执行了add，那么执行该命令后会恢复到add之前// 但是工作区内容不变git reset --hard HEAD// 和上面唯一区别就是工作区内容会消失删除本地文件后，从远程仓库重新获取// git 强行pull并覆
2021-02-25 10:44:11
3903
1
原创 Vue 源码中 initAssetRegisters 方法的介绍
initAssetRegisters在哪？在Vue的第二次包装里文件位置：‘src/core/index.js’import Vue from './instance/index'import { initGlobalAPI } from './global-api/index'...initGlobalAPI(Vue)...export default Vue进入initGlobalAPIexport function initGlobalAPI (Vue: GlobalAPI
2021-02-22 13:33:38
262
2
原创 Vue 开发邮箱输入组件
Email.vue<template> <div class="email-box" ref="email-box"> <el-tag :key="tag" size="mini" style="margin-right: 2px;margin-bottom: 1px;" type="info" v-for="tag in activeList" closable
2021-02-19 17:57:39
3170
原创 el-select 中给下拉选项添加图标前缀
<template> <div> <el-select class="process-instance" v-model="val" placeholder="请选择"> <div slot="prefix"> <span> <i :class="`iconfont ${options[val].unicode}`"
2021-02-19 17:12:45
5086
1
原创 el-table 中表格列循环的优缺点
基础写法<template> <el-table :data="tableData" size="mini" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column
2021-02-18 10:43:50
1639
3
原创 Vue 中 provide / inject 的使用方法
vue-场景-provide和inject的使用场景描述父组件A中有子组件B，C。子组件B中有子组件D，E。在D、E组件中需要监听各自的一个状态变化，然年后通知到组件C中父组件A子组件B子组件D子组件E子组件C代码实现A组件<template> // 引入C组件 绑定val属性 <C :val="val"></C></template>export default { name: 'A',
2021-02-05 16:26:53
544
原创 Git 修改本地分支和远程分支名称
说明：假如分支名字是oldBranchName，要修改成newBranchName，实际操作时候要修改成自己分支的名称。1.在本地切换到要改名的分支git checkout oldBranchName2.修改本地分支名称git branch -m oldBranchName newBranchName3.删除对应的远程分支git push origin --delete oleBranchName4.推送本地新分支git push origin newBranchName5.关联本
2020-08-21 14:39:49
1805
原创 React 中实现虚拟列表
直接上代码，代码里有注释！react组件代码：'use strict';/** * 列表假数据 长度1000 * */const data = []for (let i = 0;i< 1000; i++ ){ data.push({ key: i.toString(), val: 'Item' + i, })}class App extends React.Component{ /* * 假设每项数据的dom元素高度为30px * 实际项目可
2020-08-17 13:54:10
3471
原创 JavaScript 中 offsetWidth，offsetHeight，clientWidth，clientHeight 等属性归纳
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight
2019-03-07 15:16:09
830
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人