- 博客(12)
- 收藏
- 关注
RSS订阅原创 基于antd-vue Table组件的二次封装
封装缘由：1.减少重复工作量2.统一风格3.方便一键式更改（如果样式变更，减少工作量）封装方式：本次封装没有封装接口联调部分，只是基于日常使用的规范，进行常用功能的封装。封装后支持的功能或方便之处：1.新增了斑马线的功能。2.新增了省略时鼠标移入的ToolTip组件提示。3.通过配置可以选择隐藏某些列。4.数据为空时，官网的滚动条在表头下面，改为表的最下面。5.通过自定义列配置，实现是/否的判断。封装时遇到的问题及解决方式1.问题：插槽的二次封装，如果想要正常使用，..
2021-09-22 15:01:52
4597
9
原创 js各种数据流之间的格式转换（blob、ArrayBuffer、DataURL、file，canvas）
总结一下常用的转换类型一.将file转换成DataURL方法1：利用URL.createObjectURL();window.onload = function () { let img = document.getElementById('img'); let file = document.getElementById('file'); file.onchange = function(e) {
2021-04-13 16:26:52
6426
原创 非嵌套父子窗口传值
例如：父页面展示题目描述和题目状态，子页面进行题目作答。子页面答案保存后，父页面需要刷新题目状态。实现方式window.opener结合postMessage实现最初想法是通过window.opener调用父页面的方法实现，但是存在跨域问题（子页面和父页面不在同一个系统中（域名下））所以最后结合postMessage派发message事件的方式实现。示例代码如下：父组件： /** * 编程题跳转点击 */ handleCodeClick = (ur
2021-03-11 16:37:55
136
原创 繁琐实用系列（一）：vue实现github活跃图
最近授课老师看到其他网站有个类似github的活动图表，用来展示个人的提交记录，让我安排一下。我看了看github的活跃图，在echarts中搜索了一个差不多的图表。无奈，他嫌太丑(╯‵□′)╯︵┻━┻。被迫造轮子，难受。（虽然echarts可以改样式，但是）...
2021-02-04 13:48:00
1524
原创 nodejs实现简单的自动化部署
如题，nodejs通过码云提供的web-hooks实现简单的服务器自动部署大致流程：1.通过码云提供的web-hooks，创建一个reques通过后的回调接口（说白了就是配置一个码云审批通过触发的接口）2.nodejs服务器监听监听这个接口，如果接口触发了，就执行自动部署逻辑。3.创建文件夹，并将最新的目标分支上的文件下载到文件夹中;安装文件依赖npm install（因为一半依赖目录不会上传到仓库的）;安装完依赖后进行npm run build进行项目打包。4.通过执行shel
2021-02-01 11:33:57
1856
2
原创 React中使用iframe进行跨页面通讯
我们使用React时经常当作spa使用，页面之间的传值可以通过react-router或sessionStorage，但是总会存在一两个比较特殊的需求。其中跨页面传值就是比较常见的需求了，接下来我们来浅谈一下iframe的传值过程。iframe是前端WEB端常用的页面镶嵌标签，可以实现嵌入其他页面当如子元素使用。APP端和小程序端有类似的标签webview，使用起来类似。父页面向iframe传值：iframe存在一个src属性，类似于图片的src，支持传入某个网站的地址，可携带参数。父页面向
2021-01-07 14:47:39
6159
原创 封装antd switch-group
效果：代码：import React from 'react'import { Switch } from 'antd'/** * switch group * @param {*} object * @oarams func onChange 变化回调 * @oarams array dataSource 数据集 * @oarams array value 默认值 * @oarams string key 主键 */const SwitchGroup = ({
2021-01-07 11:12:24
324
原创 基于react的横向滚动组件（可用于antd-table横向滚动）
代码：/* * 横向滚动容器 */import React, { Component } from 'react';import PropTypes from 'prop-types';class horizontally extends Component { static propTypes = { targetStr: PropTypes.string,//目标元素的类名（本页面类名唯一） disabled: PropTypes.bool,/
2021-01-05 13:52:26
3429
原创 scratch-gui更改动态素材库及默认作品
scratch-gui素材库更改静态文件比较简单，直接更改lib/libraries/*.json就可以了动态素材库的话需要更改业务代码以及展示方式。步骤：1.更改素材组件数据来源（背景图为例），backdrop改为自定义的redux变量2.更改素材点击分类或获取条件查询的方法，之前静态素材库采用filter条件筛选，应改成查询回调（将分类或查询条件当作参数）。3.样式修改（看自己需求更改，不做详细说明）4.更改素材引用地址 4.1设置素材地址host（文件路径lib...
2021-01-03 19:57:43
849
原创 记录一次scratch-gui的“打包瘦身”方法
记录一次scratch-gui的“打包瘦身”方法总所周知scratch-gui打包引用的第三方库文件多且大，并且我们还使用的第三方库的使用方式（npm link，把生成的build当作第三方组件使用），导致首次加载的main.chunk很大。历程我刚来项目组的时候，用的cdn加速的方法，但是需要花钱而且还是根本上避免不了这个问题。前期快速开发也没有在意这方面问题，先打开zip压缩，但是也有大约5M的大小，如果带宽不是很大的话也需要7~8s的加载时间。因为需要移动端的预览页面，所以抽时间把scrat
2020-12-22 14:51:49
870
1
原创 React+腾讯云COS对象上传 -- 记录一次云服务上传的踩坑之旅
踩坑缘由：公司新项目打算使用云服务上传文件，减少自己服务器的压力。但是之前并没有接触过相关经验，所以遇到了一些问题，打算整理一下供后期新人参考或者一些其他浏览人员参考。项目集成：react+ant design pro+dva+braft editor（react较好用的富文本库，界面比较简洁，拓展性高，重点是和antd有较高的默契）文件上传功能主要包含在antd的upload组件和braft editor第三方富文本库中的媒体上传功能中。一开始想的是，直接让后台把url拼好给我，然后使用put
2020-06-01 23:17:47
4163
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人