ldz_miantiao-CSDN博客

原创著名开源大屏低代码系统GoView升级版：GoViewPro 正式发布！！

GoViewPro 正式发布！0.9元即可获取，内置众多模板、远程组件、还可兑换积分。Pro 还支持独立部署、大屏打包、在线编辑组件、3D模型、图片库等等功能，欢饮前来体验

2023-08-24 14:34:05 2601 3

原创轻量级状态管理库 Pinia 的实践与教学演示项目

一、什么是 PiniaPinia 是下一代的轻量级状态管理库，拥有以下优点（官网：https://pinia.esm.dev/）：完整的TypeScript 支持完整的类型标支持极其轻巧，体积约1KBStore中的Actions 配置项可以执行同步或异步方法模块不需要嵌套，可以声明多个Store支持Vue DevTools， SSR和Webpack 代码拆分可能会有小伙伴问，我们不是已经有了 Vuex 了吗为什么还要一个新的框架？那么接下来我们来看看Vuex的缺点：并且我们再瞅一眼

2021-11-20 17:54:56 1305

原创 Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本

千呼万唤始出来，终于将原先的 Vue2 升级到了 Vue3，并且使用了 Ts，部分界面使用了 Tsx 的写法，欢迎大家来点个星星~项目地址：Vue3 可视化大屏展示界面展示（这个是动态的后面会换成 gif 图）：一、项目描述这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " 数据大屏项目 "，使用 ‘.vue’ 和 ‘.tsx’ 文件实现界面，采用新版动态屏幕适配方案，支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。组件详情请点击下.

2021-05-22 21:42:58 7427 3

原创 React 大数据可视化（大屏展示）解决方案

一个基于 React、Dva、DataV、ECharts 框架的 " 数据大屏项目 "。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部样式、图表自由替换/复用等功能。项目地址： react-big-screen（点击这里），去码云给个三连吧，求求大家惹（老B站了）一、项目描述Vue 版本请点击这里查看，全新界面也很不错的(o ﾟ v ﾟ)ノ！！！一个基于 React、Dva、DataV、ECharts 框架的 " 数据大屏项目 "。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部.

2020-09-29 21:14:26 11690 8

原创 Vue大数据可视化（大屏展示）解决方案

一个基于 vue、datav、Echart 框架的大数据可视化（大屏展示）模板，最近更新了详细的介绍说明，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改，持续更新…项目地址： vue-big-screen（码云）一、项目描述一个基于 vue、datav、Echart 框架的 " 数据大屏项目 "，通过 ...

2020-04-21 14:09:10 92090 59

原创 2023年初工作2年半的前端练习生个人学习总结与未来预期

2022年大部分的计划都被开源项目打乱了，没想到能做这么大，几乎所有的学习时间都被占用走，搁置了无数的学习计划。有舍有得吧，认识了很多开源的人，还有组织。主要还是获得了成就感吧。

2023-02-04 21:03:27 1760 10

原创 GoView 开源，一个好用的 Vue3 低代码开发数据大屏系统

GoView 是一个低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可完成业务需求。它的技术栈为：Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS

2022-05-04 22:07:56 33303 10

原创 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 3465

原创 vue3使用 animation.css4

vue3 animation4

2022-03-08 21:38:47 601

原创 2021工作1年半的个人学习总结与未来预期

一、实现与未实现的首先来对去年的总结与期望进行一波回顾很遗憾没有成为一个熟练的React仔，甚至忘记了其中大部分的知识，也没有坚持刷算法，但是也很幸运的做了很多其它的事情。也就是说其它的选项都完成了。二、我做了什么FNDescribe工作开源项目博客收获...

2021-12-29 16:52:07 1266 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 700

原创 2021中高级前端开发工程师技能学习图

这阵子画了一个前端的技能分布图，主要是针对于中~高（偏中）之间，如果几乎熟练掌握每个位置摸到高开应该是没问题了这个图比较随性，因为是根据自己的学习路线和现在的掌握经验画的，大家可以做一个简单的参考。尤其是提升方向那一块，没有特地的强调框架源码，如果你的目标是高开，是肯定要过的，当然算法也要加强。仅供参考，大佬轻喷~...

2021-07-27 23:02:19 936 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 1865

原创 snabbdom Diff算法学习

记一波比简单的 diff 算法学习，我是基于 https://github.com/snabbdom/snabbdom学习的，各个框架的比较算法不太一样，但是大差不差。想更详细的学习可以看这个文章（有4部分哦）： https://segmentfault.com/a/1190000017494569问题引导：为什么v-for 的时候要传key？大部分的答案是直接告诉你可以增加效率，我稍微看了如下的两个核心函数才有点感觉。其实主要是 vnode 对比，然后移动旧节点比创建一个新的节点效率高。然.

2021-01-14 11:21:00 288

原创 Node 后端系统数据架构图

最近重新复习了 NodeJS 的后端编码，学习的时候梳理了整个流程，画出一副结构图，如果有错误请指正。我估计等我真正到业务中编码的时候，肯定早就已经忘记代码怎么写了，但是只要流程记住了，express/koa2/egg框架我应该都是可以看文档想起来的吧。。。。（但愿）。...

2020-11-27 21:59:06 3184 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 2159 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 2898

原创 Vue 的 template 中自动补全 ts 语法设置的属性

首先在 vscode 下安装 Vuter，然后打开 vscode 的配置文件， CTRL+SHIFT+P或者在插件的右边点击齿轮按钮，点击最后一个选项，然后找到里面的 settings.json 字眼（很好认，都可以点击）然后增加一条语句："vetur.experimental.templateInterpolationService": true,然后在 vue 文件中的 template 中可以自动识别 ts 语法定义的属性了...

2020-11-10 22:04:21 3471 1

原创 Vue3.0 使用 ts 给 props 传入泛型

在 vue 中使用 ts 的泛型来规范父组件传入的 props 属性，就需要使用 vue 提供的 PropType 属性，具体用法如下<template&

2020-11-10 21:43:12 18544 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 7218

原创 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 744

原创 2020工作半年的个人学习总结与未来预期

由于疫情影响，其实已经没有了明确的毕业概念，参加了一场不能回校的云毕业。从 6 月份开始毕业后的正式工作开始算起，到如今接近 11 月份，也经过了 5 个月的时间，也就是接近半年，在此记录一下。学习总结FN描述工作Vue 的切图熟练度大幅度提升，接触到了规范化的项目结构，对于大型项目结构管理有一定帮助。Vue 开源项目自己写了一个可视化开源项目，现在大概 1500 多颗星了吧，拿了个开源中国的奖杯（很惊喜和意外），后面觉得太 Low 重构了部分内容。React的萌芽

2020-10-21 22:33:00 1032 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 2165 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 716

原创 vue使用Font class报错：ExtractPluginMissingException: svg-sprite-loader exception

打开iconfont.css注释掉最后一个svg，然后把上一行的逗号改成分号就可以了。顺便注意一下vue.config.js中chainWebpack的配置

2020-07-16 16:05:36 4087 3

原创解决ElementUI在IE11弹窗阴影在最顶层的问题

垃圾IE太难用了，哪怕index是对的，element的弹窗遮罩层也会覆盖在表单前面如果你有使用动画:界面切换去除transform动画如果你没有动画:我使用上一条就解决了，如果有别的解决方法，请在底部评论让我也学一学...

2020-07-07 21:00:49 815

原创解决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 697

原创 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 8070 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 873

空空如也

空空如也