- 博客(331)
- 资源 (11)
- 问答 (1)
- 收藏
- 关注
原创 flutter 动画
使用 PageRouteBuildercontext,transitionDuration: Duration(milliseconds: 500), //动画时间为500毫秒//使用渐隐渐入过渡,child: PageB(), //路由B},),继承 PageRoute 类Hero 动画。
2024-08-27 18:43:42 638
原创 flutter组件分类
使用场景:获取组件大小和相对于屏幕的坐标获取组件相对于某个父组件的坐标延伸:Flutter 的build 和 layout 是可以交错执行的,并不是严格的按照先 build 再 layout 的顺序。Sliver布局协议Viewport将当前布局和配置信息通过SliverConstraints传递给SliverSliver 确定自身的位置、绘制等信息,保存在 geometry 中(一个 SliverGeometry 类型的对象)
2024-08-07 15:33:27 857
原创 flutter生命周期
flutter生命周期initState调用时机widget 第一次插入到 widget 树时应用状态初始化订阅事件通知didChangeDependencies()调用时机State对象的依赖发生变化时组件第一次被创建后挂载的时候(包括重创建)应用当系统语言 Locale 或应用主题改变时,Flutter 框架会通知 widget 调用此回调build()调用时机在调用initState()之后在调用didUpdateWidget()之后在调用setState()之后在
2024-07-24 17:36:30 130
原创 flutter基础组件概览
每一个flutter项目的lib目录里面都有一个main.dart,这个文件就是flutter的入口文件;其中的main方法是dart的入口方法。runApp方法是flutter的入口方法。demo1:Text展示文本demo2:TextStyle增加样式demo3:AppBar与body展示demo4:抽离组件内容为HomeWidget3、内容单独抽离为组件demo1:demo2:4、MaterialApp组件、Scaffold组件MaterialApp它封装了应用程序实现Materi
2024-07-24 17:24:15 331
原创 五、maptalks:demo、源码、桌面端软件
demohttps://bidding-m.gitee.io/maptalks-test-next/#/源码https://gitee.com/bidding-M/maptalks-test-next桌面端。
2023-12-13 10:26:12 567
原创 六、mapbox:demo、源码、桌面端软件
demo地址https://bidding-m.gitee.io/mapbox-test/#/源码https://gitee.com/bidding-M/mapbox-test桌面端。
2023-12-13 10:11:42 599
原创 二、maptalks搭载vue3测试demo(11-20)
isects、right click menu、infoWindow、image marker、multi image marker...
2023-12-13 10:01:31 606
原创 二、mapbox搭载vue3测试demo(11-20)
自定义图标click显示弹出窗、自定义图标hover显示弹出窗、自定义图标显示popper、实时数据更新图标的位置、 更新建筑物的样式...
2023-12-13 09:57:07 163
原创 五、mapbox搭载vue3测试demo(41-50)
3D模型、 视频播放图层、 鼠标悬停效果、 高亮包含相似数据的部分、切换列表筛选符号...
2022-05-15 20:23:48 481
原创 三、mapbox搭载vue3测试demo(21-30)
可拖动的点、 marker、可拖动的marker、GeoJSON 点、 GeoJSON 线...
2022-05-15 20:16:49 602
原创 G6实现家族族谱关系图
二话不说就上效果图:当然我最初想要的效果图是这个样子的:来看看我们的实现代码吧:<template> <div class="demo g6"> <CommonTitle></CommonTitle> <div class="content"> <div id="container"></div> </div>
2021-09-11 09:15:27 1567
原创 一、mapbox搭载vue3测试demo(1-10)
添加custom point、添加icon point、添加circle point、添加marker、添加line...
2021-08-08 14:51:43 1238 6
原创 zoomcharts图库的惊人效果——net chart
zoomcharts官网案例:https://zoomcharts.com/en/javascript-charts-library/use-cases/zoomcharts API:https://zoomcharts.com/developers/en/introduction.html源码位置:https://gitee.com/bidding-M/demo-test/blob/master/src/views/TestZoomcharts.vue...
2021-07-04 13:44:31 914
原创 零基础学习cesium及demo(1-20)
测试demo地址:https://codechina.csdn.net/LiyangBai/cesium-test1、baseViewer2、addEntity1)box2)cone3)corridor4)cylinder5)ellipse6)ellipsoid7)point8)polygon9)polyline10)polylineVolume11)rectangle12)wall欢迎各位同僚指正。
2021-03-20 13:31:23 586
原创 在vue项目中自定义事件总线eventHub
由于在工作中vue的项目中使用了大量是全局事件总线广播,使得某些方法在某种情况下被重复多次调用,查看了一下原因,是因为在每个单文件组件中定义的事件接收器和事件广播器在页面销毁的时候没有注销导致的。于是在保证改动量不大的前提下,决定自定义一个全局事件总线文件。之前的使用是在 main.js 文件中 vue.prototype.$eventHub = vue.prototype.$eventHub || new Vue()因此,重新定义一个文件 EventHub.js/** * Created
2021-01-03 13:49:19 790
原创 四、maptalks搭载vue3测试demo(31-40)
测试demo地址:https://github.com/Ruthevil/maptalks-test31、distanceTool32、areaTool33、drawTool34、draggabled35、editabled欢迎各位同僚指正。
2020-08-15 14:58:40 432
原创 三、maptalks搭载vue3测试demo(21-30)
测试demo地址:https://github.com/Ruthevil/maptalks-test21、marker wave22、UIMarker欢迎各位同僚指正。
2020-08-08 11:07:25 573
原创 记录element bug issuei:el-dialog的close事件有bug:导致回调方法被执行了两次
el-dialog的close事件有bug:导致回调方法被执行了两次目前最新版本2.13.2依旧存在这个问题!问题:el-dialog的close事件有bug:导致回调方法被执行了两次场景:如果@close的回掉方法(@close=cancel)和取消按钮@click的回调方法(@click=cancel)相同,当点击取消按钮的时候,对应的回调就会被执行两次。如果将@close=cancel改成@click.native=cancel就不会。所以@close封装有问题!【还有这个网址https:/
2020-08-03 12:38:49 3625 4
原创 一、maptalks搭载vue3测试demo(1-10)
打点、画线、heatmap、marker cluster、animation marker...
2020-08-01 17:17:24 1120
原创 web前端常用工具类库
给大家分享一个工具类库:JavaScript专用https://github.com/Ruthevil/frontend-utils
2020-07-11 19:13:32 478
原创 8、Redux-进化的flux
Redux-进化的flux也是 Flux 里面“单向数据流”的思想,只是它充分利用函数式的特性,Redux 是超越 Flux 的一次进化。1、进化 Fluxflux 的 action creatorexport function addTodo(text) { AppDispatcher.dispatch({ type: ActionTypes.ADD_TODO, text: text });}redux 的 action creatorexport function
2020-05-30 17:15:56 186
原创 7、redux 的基础概念
redux 的基础概念1、三个基本原则整个应用只有唯一一个可信数据源,也就是只有一个 StoreState 只能通过触发 Action 来更改State 的更改必须写成纯函数,也就是每次更改总是返回一个新的 State,在 Redux 里这种函数称为 Reducer2、Actions一个单纯的包含 { type, payload } 的对象,type 是一个常量用来标示动作类型,payload 是这个动作携带的数据。Action 需要通过 store.dispatch() 方法来发送。
2020-05-30 17:15:10 187
原创 6、Flux
Flux一个 Flux 应用主要包含四个部分:dispatcher:处理动作分发,维护 Store 之间的依赖关系stores:数据和逻辑部分views:React 组件,这一层可以看作 controller-views,作为视图同时响应用户交互actions:提供给 dispatcher ,传递数据给 store1、单向数据流Flux 的核心:单向数据流Action -> Dispatcher -> Store -> ViewView 会通过用户交互触发 Acti
2020-05-30 17:14:30 230
原创 5、Data Flow
Data FlowData Flow 只是一种应用架构的方式,比如数据如何存放,如何更改数据,如何通知数据更改等等,所以它不是 React 提供的额外的什么新功能,可以看成是使用 React 构建大型应用的一种最佳实践。两种最主要的实现:官方的Flux更优雅的Redux...
2020-05-30 17:14:07 299
原创 4、react 组件通信
组件间通信1、父子组件通信就是通过 props 属性传递,在父组件给子组件设置 props,然后子组件就可以通过 props 访问到父组件的数据/方法,这样就搭建起了父子组件间通信的桥梁。父组件访问子组件用 refs2、非父子组件通信使用全局事件 Pub/Sub 模式,在 componentDidMount 里面订阅事件,在 componentWillUnmount 里面取消订阅,当收到事件触发的时候调用 setState 更新 UI。这种模式在复杂的系统里面可能会变得难以维护。一般
2020-05-30 17:12:36 172
原创 3、react DOM操作
DOM操作1、findDOMNode()当组件加载到页面上之后(mounted),可以通过 react-dom 提供的 findDOMNode() 方法拿到组件对应的 DOM 元素。findDOMNode() 不能用在无状态组件上。import { findDOMNode } from 'react-dom';2、Refs另外一种方式就是通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称,然后通过 this.refs.name 来访问对应的 DOM 元素。因为无
2020-05-30 17:11:55 265
原创 2、react事件相关
react事件相关1、React 里面绑定事件的方式和在 HTML 中绑定事件类似注意要显式调用 bind(this) 将事件函数上下文绑定要组件实例上<p onClick={this.handleClick.bind(this)}></p>2、“合成事件”和“原生事件”React 实现了一个“合成事件”层,保证了和 W3C 标准保持一致,消除了 IE 与 W3C 标准实现之间的兼容问题。事件委托:“合成事件”会以事件委托的方式绑定到组件最上层,并且在组
2020-05-30 17:11:07 158
原创 1、React生命周期钩子
通过webpack+react+stylus+koa学习react框架,实现的旅 游大数据大屏展示https://gitee.com/bidding-M/react-test
2020-05-30 17:10:14 152
原创 使用elementUI的upload上传文件,用自定义请求(FormData)覆盖默认action,并实现表格预览excel数据
需求1、使用elementui组件库的upload上传文件2、后端接口要求前台将文件对象以FormData的形式发送请求3、前端请求接口前,要提前预览数据方法1、用elementUI组件的upload提供的 http-request 钩子覆盖默认的上传行为,实现自定义上传2、使用 xlsx 将文件流数据转换成JSON格式的数据以下是代码实现:首先安装xlsx:npm in...
2020-05-01 13:30:44 2766 1
原创 webpack构建原理(实现一个简易的webpack构建器)
webpack构建原理(实现一个简易的webpack构建器)webpack的构建原理:实现代码:执行```node bundle.js```的结果Q:没有实现判断输出目录不存在且创建的逻辑?webpack的构建原理:webpack的构建原理所在的核心文件:./lib/webpack-structure.jswebpack配置文件:./webpack.config.jswebpack的执行...
2020-04-12 16:40:12 281
原创 vue-light-timeline时间轴插件的使用
vue-light-timeline时间轴插件的使用第一步、安装:install第二步、引入:main.js第三步、使用:timeline.vue第一步、安装:installnpm install vue-light-timeline --save第二步、引入:main.jsimport LightTimeline from 'vue-light-timeline';Vue.use(...
2020-04-11 14:45:26 3256 2
原创 vue2.x源码导读
dist目录输出文件说明cjs webpack1,browserfiryesm webpack2+umd 兼容cjs和amdruntime 仅仅包含运行时代码,不包含编译器环境准备1、安装依赖:npm install2、安装打包工具rollup:npm install rollup -g入口文件src\platforms\web\entry-runtime-with-co...
2020-04-11 14:16:32 251
原创 vue2.6.11版本源码运行报错问题处理
vue2.6.11版本源码运行报错问题处理1、源码下载git clone http://github.com/vuejs/vue.git2、安装npm依赖包npm install3、运行报错D:\workspace\html5\everyday2\vue>npm run dev> vue@2.5.0 dev D:\workspace\html5\everyday2\...
2020-04-01 19:53:58 1682 1
原创 nodeMailer发送邮箱验证码
nodeMailer发送邮箱验证码1、封装nodemailer对象const nodemailer = require("nodemailer");// 封装nodemailer对象let nodeEmail = { config: { host: "smtp.qq.com", port: 587, secure: false, //...
2020-03-29 10:27:20 363
原创 mongoose操作MongoDB数据库
MongoDB数据库的连接与操作1、mongoose操作MongoDB数据库const mongoose = require("mongoose")//mongoose连接数据库,数据库名:bidding-systemmongoose.connect('mongodb://localhost/bidding-system')let db = mongoose.connectiondb...
2020-03-29 10:26:23 292
vue3父子组件引入同一个hooks,父组件更新list数据后,子组件模板没有更新?
2022-03-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人