- 博客(154)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 著名开源大屏低代码系统GoView升级版:GoViewPro 正式发布!!
GoViewPro 正式发布!0.9元即可获取,内置众多模板、远程组件、还可兑换积分。Pro 还支持独立部署、大屏打包、在线编辑组件、3D模型、图片库等等功能,欢饮前来体验
2023-08-24 14:34:05
3317
3
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 轻量级状态管理库 Pinia 的实践与教学演示项目
一、什么是 PiniaPinia 是下一代的轻量级状态管理库,拥有以下优点(官网:https://pinia.esm.dev/):完整的TypeScript 支持完整的类型标支持极其轻巧,体积约1KBStore中的Actions 配置项可以执行同步或异步方法模块不需要嵌套,可以声明多个Store支持Vue DevTools, SSR和Webpack 代码拆分可能会有小伙伴问,我们不是已经有了 Vuex 了吗为什么还要一个新的框架?那么接下来我们来看看Vuex的缺点:并且我们再瞅一眼
2021-11-20 17:54:56
1354
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue大数据可视化(大屏展示)方案升级,发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~项目地址:Vue3 可视化大屏展示界面展示(这个是动态的后面会换成 gif 图):一、项目描述这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " 数据大屏项目 ",使用 ‘.vue’ 和 ‘.tsx’ 文件实现界面,采用新版动态屏幕适配方案,支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。组件详情请点击下.
2021-05-22 21:42:58
7666
3
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 React 大数据可视化(大屏展示)解决方案
一个基于 React、Dva、DataV、ECharts 框架的 " 数据大屏项目 "。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部样式、图表自由替换/复用等功能。项目地址: react-big-screen(点击这里),去码云给个三连吧,求求大家惹(老B站了)一、项目描述Vue 版本请点击这里查看,全新界面也很不错的(o ゚ v ゚)ノ!!!一个基于 React、Dva、DataV、ECharts 框架的 " 数据大屏项目 "。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部.
2020-09-29 21:14:26
12110
8
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue大数据可视化(大屏展示)解决方案
一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板,最近更新了详细的介绍说明,实现大数据可视化。通过 vue 组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用 DataV 自带组件,可自由进行更改,持续更新…项目地址: vue-big-screen(码云)一、项目描述一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 ...
2020-04-21 14:09:10
93757
59
原创 2023年初工作2年半的前端练习生个人学习总结与未来预期
2022年大部分的计划都被开源项目打乱了,没想到能做这么大,几乎所有的学习时间都被占用走,搁置了无数的学习计划。有舍有得吧,认识了很多开源的人,还有组织。主要还是获得了成就感吧。
2023-02-04 21:03:27
1917
10
原创 GoView 开源,一个好用的 Vue3 低代码开发数据大屏系统
GoView 是一个低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。 它的技术栈为:Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS
2022-05-04 22:07:56
34220
11
原创 TS 报错 Type ‘string‘ is not assignable to type ‘PositionProperty | undefined‘.
TS 报错 Type 'string' is not assignable to type 'PositionProperty | undefined'.
2022-04-26 11:23:42
3669
原创 2021工作1年半的个人学习总结与未来预期
一、实现与未实现的首先来对去年的总结与期望进行一波回顾很遗憾没有成为一个熟练的React仔,甚至忘记了其中大部分的知识,也没有坚持刷算法,但是也很幸运的做了很多其它的事情。也就是说其它的选项都完成了。二、我做了什么FNDescribe工作开源项目博客收获...
2021-12-29 16:52:07
1346
7
原创 通过遍历Vue实例树,关闭 Element Dialog 弹窗
业务场景中遇到了外部单页需要手动关闭主页面的所有的 Element Dialog 弹窗的场景,解决方法是遍历 $root 节点树,找到已经打开的 Dialog 组件,调用它的函数,因为如果只是 JSDom 去修改 Style 是不行的,内部维护的数组会错乱产生意料之外的bug。调用时候 removeDialog (this),需要把 this 传入,因为这个函数没有写在 .vue 文件中const removeDialog = (that:any) => { const childAr.
2021-08-09 14:44:12
732
原创 2021中高级前端开发工程师技能学习图
这阵子画了一个前端的技能分布图,主要是针对于中~高(偏中)之间,如果几乎熟练掌握每个位置摸到高开应该是没问题了这个图比较随性,因为是根据自己的学习路线和现在的掌握经验画的,大家可以做一个简单的参考。尤其是提升方向那一块,没有特地的强调框架源码,如果你的目标是高开,是肯定要过的,当然算法也要加强。仅供参考,大佬轻喷~...
2021-07-27 23:02:19
999
2
原创 vue3中读取state与触发mutations、actions的写法
做一个自己的学习记录<script>import { computed, ref, watch } from 'vue'import { useStore } from 'vuex'export default { name: 'player', setup() { // todo vue3 下获取 stor 数据 const store = useStore() // 获取 state 中的 stateA const stateA = comp
2021-05-09 21:24:56
1905
原创 snabbdom Diff算法学习
记一波比简单的 diff 算法学习,我是基于 https://github.com/snabbdom/snabbdom学习的,各个框架的比较算法不太一样,但是大差不差。想更详细的学习可以看这个文章(有4部分哦): https://segmentfault.com/a/1190000017494569问题引导: 为什么v-for 的时候要传key?大部分的答案是直接告诉你可以增加效率,我稍微看了如下的两个核心函数才有点感觉。其实主要是 vnode 对比,然后移动旧节点比创建一个新的节点效率高。然.
2021-01-14 11:21:00
298
原创 Node 后端系统数据架构图
最近重新复习了 NodeJS 的后端编码,学习的时候梳理了整个流程,画出一副结构图,如果有错误请指正。我估计等我真正到业务中编码的时候,肯定早就已经忘记代码怎么写了,但是只要流程记住了,express/koa2/egg框架我应该都是可以看文档想起来的吧。。。。(但愿)。...
2020-11-27 21:59:06
3338
1
原创 Vue3.0 父子组件使用 v-model 通信的新使用方式
封装了一个处理 input 的组件,父组件使用 v-model 来监听数据值,子组件使用 $emit 的方式返回处理过的值,但是实现的方法与 Vue2.0 不太相同。子组件,注意 props 的 modelValue 和 emit 的内容<tempplate> <div> <input type="email" :value="inputRef.val" @input="updateValue" /> .
2020-11-13 21:27:48
2197
1
原创 Vue3.0 使用 ref 判断目标 node 区域之外的点击事件(实现下拉框、弹窗关闭功能)
有时候会遇到点击目标区域绑定事件 / 展示效果,然后点击目标区域之外的地方就关闭效果 / 触发另一事件,为了实现这样的功能,我们需要通过比对 node 节点来进行判断,在下面我会使用 Vue3.0 的 ref 属性用法与 node.contains 方法来进行案例展示。hooks 方法如下// 判断元素是否在 node 区域之外import { ref, onMounted, onUnmounted, Ref } from 'vue'const useClickOutside = (eleme.
2020-11-13 09:24:45
3004
原创 Vue 的 template 中自动补全 ts 语法设置的属性
首先在 vscode 下安装 Vuter,然后打开 vscode 的配置文件, CTRL+SHIFT+P或者在插件的右边点击齿轮按钮,点击最后一个选项,然后找到里面的 settings.json 字眼(很好认,都可以点击)然后增加一条语句:"vetur.experimental.templateInterpolationService": true,然后在 vue 文件中的 template 中可以自动识别 ts 语法定义的属性了...
2020-11-10 22:04:21
3536
1
原创 Vue3.0 使用 ts 给 props 传入泛型
在 vue 中使用 ts 的泛型来规范父组件传入的 props 属性,就需要使用 vue 提供的 PropType 属性,具体用法如下<!-- * @Author: mtrun * @Date: 2020-11-10 21:21:00 * @LastEditTime: 2020-11-10 21:37:39 * @LastEditors: Please set LastEditors * @Description: 使用泛型约束 props 的值--><template&
2020-11-10 21:43:12
18767
6
转载 利用CSS实现rem适配
原文地址:https://www.toutiao.com/i6773562707711885832方案一:使用meta标签在html的head中插入下面的meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="viewport" content="width=375, user-scalable=no">没错,是两个viewport标签。width=d
2020-10-26 21:11:11
7256
原创 Websocket 封装
export class WebSocketClass { /** * @description: 初始化实例属性,保存参数 * @param {String} url ws的接口 * @param {Function} msgCallback 服务器信息的回调传数据给函数 * @param {String} name 可选值 用于区分ws,用于debugger * @param {String} startWsAfter 启动之后要做的事情 */ constr
2020-10-22 14:46:45
780
原创 2020工作半年的个人学习总结与未来预期
由于疫情影响,其实已经没有了明确的毕业概念,参加了一场不能回校的云毕业。从 6 月份开始毕业后的正式工作开始算起,到如今接近 11 月份,也经过了 5 个月的时间,也就是接近半年,在此记录一下。学习总结FN描述工作Vue 的切图熟练度大幅度提升,接触到了规范化的项目结构,对于大型项目结构管理有一定帮助。Vue 开源项目自己写了一个可视化开源项目,现在大概 1500 多颗星了吧,拿了个开源中国的奖杯(很惊喜和意外),后面觉得太 Low 重构了部分内容。React的萌芽
2020-10-21 22:33:00
1081
5
原创 react hooks 写防抖函数(debounce)
import { useEffect, useState } from 'react';// 防抖 hooksfunction useDebounce(value:any, delay = 300) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = window.setTimeout(() => { setDeboun
2020-10-21 19:52:28
2180
1
原创 react借助react-transiton-group实现类似vue transition复杂动画
借助react-transiton-group可以实现类似vue动画钩子的效果安装:yarn add react-transition-group引入组件和外部的lessimport React, { Fragment } from 'react'import { Button } from 'antd'import { CSSTransition,TransitionGroup } from 'react-transition-group'import './xx.less'编写内容代.
2020-08-01 16:28:15
764
原创 vue使用Font class报错:ExtractPluginMissingException: svg-sprite-loader exception
打开iconfont.css注释掉最后一个svg,然后把上一行的逗号改成分号就可以了。顺便注意一下vue.config.js中chainWebpack的配置
2020-07-16 16:05:36
4170
3
原创 解决ElementUI在IE11弹窗阴影在最顶层的问题
垃圾IE太难用了,哪怕index是对的,element的弹窗遮罩层也会覆盖在表单前面如果你有使用动画:界面切换去除transform动画如果你没有动画:我使用上一条就解决了,如果有别的解决方法,请在底部评论让我也学一学...
2020-07-07 21:00:49
833
原创 解决vue在IE11读取缓存的问题
垃圾IE会在发起请求的时候读取接口缓存,就贼蠢,我们要使用时间戳拼接在url来解决。最好不要直接加在参数上,怕后端会进行设置。function filterUrl (url) { return url.indexOf('?') !== -1 ? `${url}&time=${new Date().getTime()}` : `${url}?time=${new Date().getTime()}`}例子1:封装getfunction get(params, url) { r.
2020-07-07 20:57:10
725
原创 Vue中手动导出Element表格为pdf/word/excel格式
在vue中将element的表格进行导出为pdf/word/excel样式,需要进行一些处理,比较麻烦网页样式导出为表格导出为word导出为PDF一、编写工具函数和前置对element样式的修改函数@param {String} inerHTML 需要导出的html字段@param {String} typeName 需要导出的文件类型(注意最外层需要一个单独的容器包裹,使用)// 导出函数export function exportFileByInerHTML(iner.
2020-07-06 15:41:22
8321
10
转载 配置react支持less,babel-plugin-import按需加载antd
原文:https://blog.csdn.net/lvanboy/article/details/88200433安装基础插件:react-router,axios,less-loader ,AntD(UI框架,基于react封装),暴露webpack配置,修改less-loader。Create-react-app脚手架创建的项目默认是不支持less语法,但AntD UI 框架是基于Less编写的,为了定制主题,修改less源码文件,让这个框架能够正常使用,需要暴露webpack,修改webpa.
2020-06-20 20:04:14
890
原创 引入Ant框架报错findDOMNode is deprecated in StrictMode.
这是由于React脚手架创建的是严格模式,在index.js里(有的在app.js)<React.StrictMode> <App /></React.StrictMode>,我们需要把外层的标签改成<React.Fragment> <App /></React.Fragment>,这样就去除了严格模式,虽然为了框架去除了严格模式不太好,但是没办法等阿里UI团队更新能够跟上代码的更新速度吧。...
2020-06-20 19:53:11
3340
原创 react使用ref控制DOM元素(非受控组件)
总有一些场景我们需要直接操作dom元素,react有类似vue的refs的写法。import React, { Component, Fragment } from "react";class Input extends Component { constructor(props) { super(props); // *现在的写法 2020-6 this.hellowInput = React.createRef(); } componentDidMount.
2020-06-17 21:53:12
469
原创 使用.sync实现子组件修改父组件的数据
子组件<template> <div class="aaa" v-show="visible" @click="$__changeData"></div></template><script>export default { props: { visible: { type: Boolean, default: false } }, methods: { $__changeDa
2020-06-16 09:36:15
430
1
原创 vue拦截 “ textarea ” 默认的enter(换行)事件
进行对话界面开发的时候, 经常遇到的需求就是点击enter发送数据,所以需要更改textarea的默认事件注意keydown<textarea name="user_input" ref="user_input" class="user_input" v-model.trim="user_input" cols rows @keydown="messageSendlisten" ></textarea> // todo按下快捷.
2020-06-03 11:10:05
4364
1
原创 TS实现单例模式
单例模式是一种非常重要的模式,例如VueX状态管理就是使用这种模式,这次来演示typescript如何创建这种模式。// !单例模式class Demo { private static instance: Demo; //类型为这个类 private constructor() {} // *static 会将它挂载类上,而不是实例上 static getInstance() { if (!this.instance) { this.instance = new D
2020-05-09 15:46:03
4906
2
原创 vue中解决 “数据大屏“ 展示的屏幕适配问题
现在非常流行的大数据可视化方案,不过要做数据大屏有一个很重要的问题就是屏幕适配。一、引入flexible文件flexible是移动端屏幕适配非常著名的的插件,能够帮助我们修改rem的值,也就是修改html标签下font-size的值。例:在vue-cli中的main.js主配置文件中引入// 适配flex,文件放在src/common目录下import "@/common/flexi...
2020-05-06 23:46:45
8434
2
原创 js中使用对象映射代替 if-else,可以这很优雅!
没人喜欢一大串的单调的ifelse,有没有更加优雅的方式呢?那就是 jojo 对象映射哒!例子://常见if-else组成的逻辑判断FnAll(code, p){ if(code === 'a'){ Fna(p); } if(code === 'b'){ Fnb(p); }if(code === 'b'){ Fnc(p); }if(code === 'd'){ F...
2020-04-22 17:25:15
1799
1
原创 递归解决JS深拷贝问题
内容来源于掘金上的《JavaScript 设计模式核⼼原理与应⽤实践》一书,但是内容是收费的所以放链接也是看不到的。就不给了。function deepClone(obj) { // 如果是 值类型 或 null,则直接return if(typeof obj !== 'object' || obj === null) { return obj } ...
2020-04-21 22:44:01
591
转载 js实现组合继承(es5)
转自神三元的博客,这段代码真的很美组合继承(简直完美)function Parent5 () { this.name = 'parent5'; this.play = [1, 2, 3]; } function Child5() { Parent5.call(this); //使用call改变作用域 this.type = 'child5'; }...
2020-04-17 00:51:05
249
原创 解决vue-cli项目多个环境部署配置问题
原文https://blog.csdn.net/linbenjian/article/details/85261201使用vue-cli3打包项目,通过配置不同的指令给项目设置不一样的配置。npm run serve时会把process.env.NODE_ENV设置为‘development’;npm run build 时会把process.env.NvODE_ENV设置为‘produ...
2020-04-15 20:59:42
883
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人