weixin_38974419的博客

Vue模板代码块{ "vue_template": { "prefix": "vue", "body": [ "<template>", "\t<div class=\"vue_template_wrapper\">", "\t\t", "\t</div>", "</template>", "<script>", "export default {", "\tdata() {", .

一. 需求：最近项目中遇到要进行图片裁剪的需求，采用了cropperjs进行二次图片裁剪组件封装。在这里记录下二次封装过程。二. 二次封装代码：import React, { useState, MouseEvent, FunctionComponent } from 'react';import styles from './index.less';import Cropper from 'cropperjs';import { Button } from '@pyramid-kit/mo

一. 需求：最近在做项目的时候遇到这样一个需求。表单页可重复使用，即把表单页单独写为公共组件，但是在调用该子组件的父组件需要触发表单子组件的保存数据和校验提交表单数据的方法，表单子组件采用的是React高阶form组件构成，而子组件暴露方法给调用父组件需要使用useImperativeHandle，这是需要React.forwardRef进行Ref的传递，以方便父组件获取实例触发方法。这个时候问题就出来了，当导出此组件时使用了高阶函数createForm封装，再怎么使用React.forwardRef封装呢

需求：类似于美团的商家页面，左边是可点击选择的商品品类，右边是按各商品品类分类的商品列表。点击左边某品类时，右边商品列表自动滚动定位到该品类下商品第一个；滚动右边商品列表时，当滚动到某个品类名时自动定位高亮相对应的左边的品类名列表。所用到的插件：基于滚动插件better-scroll完成。用之前需要先了解一下better-scroll文档。所遇到的问题：在实际运用中，但商品品类和商品列表数据量特别大的时候，尤其是商品列表项目中有图片加载和事件绑定时，右侧的商品列表滚动会非常的卡顿。解决问题思路：

需求：最近项目中遇到要进行图片预览的需求，在网上找了一大圈可用的图片预览组件，起初选择react-wx-images-viewer作为预览组件二次开发，但后来发现虽然这个组件在Git上113个star，但这个组件用起来并不给力。切换图片时有种要飞的感觉，而且支持的功能也不是特别丰富，所以果断放弃了react-wx-images-viewer。然后在网络上继续寻找，最后发现一个开源预览组件非常好用，动画效果体验较好，支持的功能比较丰富，在这里记录下二次封装过程。采用的图片预览组件：react-photo-

1.折线图：(1).代码：const self = thislet chart = echarts.init(self.$refs.chart)// 数据let date = ['1-22', '1-23', '1-24', '1-25', '1-26', '1-27', '1-28', '1-29', '1-30', '1-31', '2-1', '2-2', '2-3', '2...

beforeRouteEnter：路由跳转进入页面前进行的操作，可接收to、from、next参数，此守卫钩子中还不能获取到Vue.js组件实例，但是可通过next(vm => {})获取当前组件实例。例如：beforeRouteEnter (to, from, next) {next(vm => { // 此处的vm相当于this consol...

sessionStorage： sessionStorage属性允许开发者访问一个 sessionStorage对象。它与localStorage相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页...

1.git pull说明：从远程仓库将代码更新到本地。2.git push "分支名"说明：从本地将代码上传至远程仓库。3.git branch说明：查看当前分支。4.git branch -a说明：查看所有分支。5.git checkout "分支名"说明：切换分支。6.git merge "分支名"说明：合并某分支代码至当前分支。...

1.基础方法（必须）/** * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */function debounce(func, wait, immediate) { let timeout, args, context, timestamp, ...

今天做项目中的一个图表统计时遇到一个问题 ：这个图表有3个横向的条形统计图组成，起初是写了3个容器分别在里面绘制各自的横向条形统计图，用模拟的动态数据时没有任何问题，当接入后台数据后发现，如果有两个图表的数据都为空时(尤其是第二个和第三个图表数据同时为空时)，数据更新后重新配置并绘图，会存在后两个图表Echarts实例丢失问题，也就是后两个容器中并不会绘图出来。所以，转变思路，在一个容器一个图层上...

1.JavaScript常用方法： (1).计算百分比（保留两位小数） /** * 计算百分比（保留两位小数） * @param {Number} num 分子 * @param {Number} total 分母 * @return {String} 百分比字符串 */getPercentileNumber(num, total) { // 求百分比 num...

今天进行前端基础组件开发过程中遇到一个坑，找了一个下午的原因没能解决，去请教了公司的大神，终于明白这个问题是怎么来的了。在博客中记录一下，免得以后忘了又得浪费时间~ 一、问题描述： 在一个<div></div>标签中动态绑定了style样式，如<div :style="item.labelStyle" class="img...

Vue中监听键盘事件 在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值...

一、什么是负载均衡？ 网络负载均衡技术大致原理为：利用一定的分配策略将网络网络负载平衡的分摊到网络集群的各个操作单元上，使得单个重负载任务能够分担到多个单元上并行处理，或者使得大量并发访问或数据流量分担到多个单元上分别处理，从而减少用户的等待响应时间。 在实际的应用中，负载均衡会根据网络的不同层次（一般按照OSI七层参考模型）进行划分。现代的负载均衡技术主要实现和作...

配置实例代码：...upstream backend #配置后端服务器组{ server 192.168.110.10; server 192.168.110.11; server 192.168.110.12; #默认权重weight为1}server{ listem 80; ...

配置实例代码：...upstream backend #配置后端服务器组{ server 192.168.110.10 weight=5; server 192.168.110.11 weight=2; server 192.168.110.12; #默认权重weight为1}server{ ...

vue-cli更新至3.10.0后启动项目端口为随机的5位数字，在配置文件中重新配置后也不生效解决方法：运行命令npm install portfinder@1.0.21原因：最新版本portfinder有bug，回退安装旧版本的就OK了...

首先，明确问题点。 在Vue.js项目中，引入jQuery，然后使用 $('#xxxxxxx').append(xxxxxxx)动态添加html语句。动态拼接的html语句中绑定了click事件，当鼠标点击时触发methods中某方法进行处理，但是，发现鼠标点击并没有触发该方法！ 该问题在实际开发过程中遇到过一次，但今天遇到后，忘记了之前是怎么处理的，又浪费...