- 博客(417)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vue+element-自定义指令，防止重复提交及重复发送http请求；节流throttle与防抖debounce举例说明
方法一、控制标签全局directive的写法// 提交以后禁用按钮一段时间，防止重复提交import Vue from 'vue';Vue.directive('noMoreClick', { inserted(el, binding) { el.addEventListener('click', e => { el.classList.add('is-d...
2018-12-11 14:10:01
8104
1
原创 链式调用demo
所谓链式调用就是调用完一个函数后还能再继续调用其它函数，这样大大减少了代码量，尤其是项目比较大的时候，逻辑集中清晰明了，且易于查看和修改。
2023-01-29 21:18:24
360
原创 setInterval倒计时以及解决倒计时误差
setInterval指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间。比如，setInterval指定每 100ms 执行一次，每次执行需要 5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。可以从图中明显的看出打印的结果，大多数时间每次相差结果不等于1000，因此使用setInterval长期下去，误差会很大。为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。
2022-12-27 23:52:29
1674
原创 退款详情列表显示--纵向退款进度条显示
dom代码import { View } from "@tarojs/components"import { formatDate } from '@/utils/timeFormat'import './index.less'export default (props) => { return <View className='steps-box'> {props.list?.length && props.list.map((item, index).
2022-05-30 10:13:24
271
1
原创 数组排序-按照数组每项的排序属性进行排序，空的自动按照默认顺序进行填充
求按照某一项的index排列顺序将其进行排序解决思路：新建一个长度为原数组长度的空数组`将这个空数组先填入有排序属性index的item再依次填充剩下的item关键在于对脚坐标的取值应先取出有index的排序坐标再过滤出不含index的排序脚坐标再填充方法实现// 根据 attr 进行排序export function sortByIndex(searchMeta, attr='index') { // 新建一个空数组 const arr = new Array(s
2022-04-14 14:43:01
418
原创 vue2如何给孙辈传递slot，孙如何给父传递参数
vue2如何给孙辈传递slot，孙如何给父传递参数1、父亲辈parent.vue<!-- 引用子组件 --><child-list> <template slot="search_item_display_time" slot-scope="{search}"> <div>{{search}}</div> </template></child-list>2、子辈ch
2022-04-13 16:00:43
3605
原创 分享海报-链接图片如何处理
先将远程图片链接转为base64格式在页面上显示则可用html2canvas生成海报canvasImg.js// 第一个参数是图片的URL地址，第二个是转换成base64地址后要赋值给的img标签export async function getBase64Image (url) { return new Promise((resolve)=>{ let image = new Image() image.src = url + '?v=' + Ma.
2022-01-19 11:18:18
468
原创 nginx代理常见问题
1、http200，但是返回We’re sorry but XXXX doesn’t work properly without JavaScript enabled. Please enable it to continue.可能原因server { listen 80; server_name localhost; client_max_body_size 20m; location / { root /usr/share/ngin
2022-01-11 14:45:14
2635
原创 图标动画-大小动画-css
.vote-prize-btn { width: 45px; height: 90px; position: absolute; top: 23px; right: 0; animation: mymove 1s infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }@keyframes my
2021-12-30 14:22:13
306
原创 用vue3实现抽奖模板设置
效果图代码<template> <div> <h4>抽奖模板设置</h4> <div class="container"> <ul class="ul-box"> <li v-for="(item,index) in list" :key="item.id" @click.stop="handleClickItem
2021-12-24 11:11:34
763
原创 抽奖的功能实现html,css,js
效果图代码实现<!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"> <t
2021-12-15 16:28:38
1298
1
原创 useEffect使用注意事项
useEffect使用注意事项前言1、依赖项是函数如何改进？用useCallback2、依赖项是数组如何解决？useRef3、将对象作为依赖如果修复这个问题？用useMemo 的 hook前言只有当依赖关系被改变时，useEffect hook 才会触发回调函数。而且它使用浅比较法来比较 hooks 的值。1、依赖项是函数import './App.css';import { useEffect, useState } from 'react';function App() { const
2021-09-22 10:56:57
2057
原创 微信小程序-灰度发布
总所皆知，微信小程序分为三个环境，开发环境、体验环境、生产环境。大多时候，体验环境作为测试环境，在上线的时候切到生产环境往往有一些数据等环境切换导致的bug。这个时候我们希望出现一个预生产环境。他运行的是生产环境一模一样的数据。。但是我们不希望这个环境被其他用户看到。这个时候灰度发布就起作用了需要注意的是，小程序第一次发布不能进行灰度发布。必须第二次及以后才能灰度发布。而且，小程序审核通过后才能灰度发布。灰度发布可以指定某些微信账号才能看到这个灰度发布版本（预生产版本）...
2021-09-14 17:03:16
3569
原创 iPhone12打开webview闪退或者白屏
解决办法：排除法1、先测试iPhone12打开其他嵌入的webview页面，无问题，继续下一步2、修改嵌入的webview代码，删除无用代码，然后重新部署测试，无问题，继续下一步3、检查包裹webview组件的代码，最后一个删除测试，找到是SafeAreaView导致，删除SafeAreaView的包裹代码后能正常打开。...
2021-07-26 14:26:51
1310
原创 比较两个数组，将新数组中和旧数组不同的，过滤出来
比较旧请求list和新的请求list对比，将新的数据过滤出来到resultListimport _ from "lodash";const oldList = [{commentId:1},{commentId:2},{commentId:3},{commentId:4},{commentId:5},{commentId:6},{commentId:7},{commentId:8}];const newList = [{commentId:5},{commentId:6},{commentId:7}
2021-07-15 16:11:56
664
原创 将base64格式的图片下载到本地
先将base64转为file，然后再利用a标签下载<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1
2021-07-06 09:20:05
23189
1
原创 手机屏幕弹幕纵向滚动，添加弹幕实时滚动html demo
手机屏幕弹幕纵向滚动，添加弹幕实时滚动<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2021-07-03 12:24:19
725
原创 2021-05-29
最近好久没写博客是因为做了个小手术休假了很久，然后很多知识也将近一个月没学习了，有一点点忘了，不过辞职后现在得开始找工作了得抽空看下。。间隙期间，我现在真的有点想去体验一下比如做服务员的辛苦，否则我不可能懂得珍惜程序员的幸福生活...
2021-05-29 00:15:29
150
1
原创 ant.design上传问题：Upload file.status is always being uploading
file状态一直未uploading对于受控模式，你应该在 onChange 中始终 setState fileList，保证所有状态同步到 Upload 内。类似这里的写法：比如// goodonFileChange(fileList) { if ( ... ) { ... } else { ... } // always setState this.setState({ fileList: [...fileList] });} { console.log( 'child render' ); const { data: { num } } = props; return <div>
2021-04-07 16:07:54
569
原创 React Function实时获取输入框值：React Hook - useRef
修改输入框后，send，function 组件捕获渲染的值总是上一次send的值,如何解决这个问题export default function ProfilePage() { const [message, setMessage] = useState(''); const showMessage = () => { console.log('message: ' + message); //获取的永远是上一次send之前的值 点击前输入框的值 }; const hand
2021-04-07 10:07:29
2498
原创 React-高阶组件的使用说明
概念高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 和 Relay 的 createFragmentContainer。举例说明常用userInfo的数据全局共享i
2021-04-06 12:04:08
234
原创 ant design中的Form.List 如何支持dependencies
1、单个官网例子：打开2、多个Form.List<Form name="dynamic_form_nest_item" onFinish={ onFinish } autoComplete="off"> <Form.List name="users"> { ( fields, { add, remove } ) => ( <> { fields.map( ( field ) => ( <S
2021-04-01 15:38:22
4990
1
原创 (React ant design Warning): dispatch: settings/changeSetting should not be prefixed with names
原因：在namespace为’settings’的js文件中调用dispatch，不需要加上settings前缀,解决办法：删除settings/即可import { Reducer, Subscription } from 'umi';const SettingModel= { namespace: 'settings', state: defaultSettings, reducers: { changeSetting(state = defaultSettings, { p
2021-03-03 14:26:47
659
1
原创 用ant.design实现一个form table，实现在table中输入和校验。并且获取table列表值
用ant.design实现一个table表格，实现输入和校验。能够实时获取form值实现效果如图代码如下ListTableForm.tsximport React, { useEffect, useState } from "react";import { Form, Table } from 'antd'import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";import styles f
2021-02-09 09:48:24
8843
2
原创 umi ant.design 项目打包后@ant-design文件占据内存太大
现在遇到一个问题，npm run build后打包文件由30M，用npm run analyze "analyze": "cross-env ANALYZE=1 umi build",分析后发现是图标库占据内存的原因。
2021-02-04 17:22:20
1334
原创 基于ant.design做一个可编辑的table表格，且实现可校验样式、增加、删除数据
主要利用Form.List的field进行拓展，结合table使用嵌套表单字段需要对 field 进行拓展，将 field.name 和 field.fieldKey 应用于控制字段。// 只贴关键代码const onFinish = (values)=>{ console.log(values) // 可以得到table}<Form initialValues={ {table:[{name:'lily'},{name:'lisa'}]} } onFinish={ onFi
2021-02-03 17:45:40
5895
5
原创 代码整洁之道-多个if else代码的优化
1、利用对象let a=0,b=1;let result = '';if(a===1){ if(b===1){ result='a' } if(b===0){ result='b' }}if(a===0){ if(b===1){ result='c' } if(b===0){ result='d' }}优化为let obj = { 1: { 0: 'a', 1: 'b', }, '-1': {
2021-01-28 09:19:05
416
转载 执行上下文栈
函数多了，就有多个函数执行上下文，每次调用函数创建一个新的执行上下文，那如何管理创建的那么多执行上下文呢？JavaScript 引擎创建了执行上下文栈来管理执行上下文。可以把执行上下文栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。从上面的流程图，我们需要记住几个关键点：JavaScript 执行在单线程上，所有的代码都是排队执行。一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行
2021-01-18 12:26:33
99
react源码-简易的demo-通俗易懂
2020-03-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人