渐变强的小刘-CSDN博客

原创 vue3自定义拖拽，vue3-dnd 的使用

vue3-dnd vue3自定义拖拽数据驱动视图

2022-09-20 11:56:17 6139 5

实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。话不多说，先上图需求介绍：主要实现的是中间区域（红框）内可以托住上下拖动.功能实现所需： resize: css3新增属性，放在div上即可使其可以拖拽，详见:resize介绍文档(https://www.w3school.com.cn/cssref/pr_resize.asp) cursor:ns-resize，上下拖拽鼠标图标.详见：[cursor属性](https://developer.mozilla.org/zh.

2022-04-21 22:19:46 2927 1

原创 vue2总结 (完整搭建、风格指南融合)

1、项目搭建vuex部分1、我们都知道vuex的取值、提交可以通过两种方式例如：this.store...mapState()为了方便统一，并且简化模块化后this.store ...mapState() 为了方便统一，并且简化模块化后this.store...mapState()为了方便统一，并且简化模块化后this.store.commit()/dispatch()/getters() 第一个参数都需要通过模块名/字段名的形式操作我们统一使用…mapState()…mapGetter

2021-09-23 18:34:41 1006

原创匹配文本内容高亮

老规矩，先图后解：方法一：brightenKeyword(val) { // this.keyword为输入框绑定的值 if (val.includes(this.keyword) && this.keyword !== "") { return val.replace( // 替换掉keyword 加上颜色标签 this.keyword,

2021-04-19 17:45:02 505

原创百度地图开发探索 angular7地图原始宽高固定、初始化、工具条/比例尺、缩略图/混合图，地图类型切换（卫星、三位、混合）、定位/版权/城市列表控件

1、地图宽高固定（整页背景）通过ID获取地图，高度随窗口变化而变化const height = window.innerHeight - 123;const map = document.getElementById('allmap');map.style.height = height + 'px';2、地图初始化

2021-01-15 10:51:14 542

原创百度地图开发探索定位功能（搜索获取位置，地图自带定位，点击获取定位） typescript angular

百度地图定位定位控件：如图// 定位控件 locationControl() { // 添加带有定位的导航控件,就是缩放控件+定位按钮 const navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, /

2021-01-15 10:51:05 2610 2

原创百度地图开发探索 angular7 (typescript) 添加参考点、定位点与自定义弹窗

添加参考点并获取位置话不多说，看图说话分析一下此点和弹窗的组成：1、上图的蓝色图标为一个marker2、生成一个marker需要point，生成point需要两个坐标（经纬度）3、上方的弹窗是依赖于marker生成的（弹窗自定义样式下面会有整理）// 参考点 referencePoint(e: any) { const point = new BMap.Point(e.point.lng, e.point.lat); // 创建point const poiIcon = n

2021-01-15 10:50:57 1071

原创百度地图开发探索添加覆盖物（圆形、多边形、行政区）围栏 typescript angular

添加覆盖物话不多说，先上图，看图写代码（添加点的在上一章有整理）1、圆形围栏：2、多边形围栏：3、行政区围栏：图形的展示：// 画围栏 drawFence(fenceDetail: any) { this.fenceDetail = null; const pointArr: any = []; this.fencePolygon = []; let pointView: any = []; let points: any = []; c

2021-01-15 10:50:49 1276

原创百度地图开发探索轨迹（路书） typescript angular

上图为先：轨迹的组成：起点、终点、一条线、线上的小车主要功能：添加轨迹、小车在轨迹上跑动、小车回到起点、小车回到重点、小车速度调节、轨迹的粗细调节实现方式：路书还有一种是在轨迹线不断的对小车进行添加和删除操作，感觉会更灵活，因为可以时刻记录你想要的数据，但是路书是封装好的方式，我也没有研究很全面添加轨迹// 画轨迹 drawTrack(trackArr: Array<any>, startOrEnd?: any) { this.lushuPointArr = [];

2021-01-15 10:50:40 1216

原创大型动态表单实例整合 angular7 4-具体应用与数据库配置与总结

先上代码：，引用app-dynamic-form组件<ng-container *ngFor="let tab of emergencyArr"> <div class="container-fluid product-info" *ngIf="!tab.componentName"> <div class="row form-customer"> <app-dynamic-form #emergencyInfo [config]="t

2021-01-15 10:50:17 185

原创大型动态表单实例整合 angular7 3-具体动态模版组件库动态input、动态日期选择框

总组件首先是动态模版的最外层组件dynamic-form首先来看模版HTML<ng-container *ngFor="let field of config"> <ng-container dynamicField [config]="field" [group]="form" *ngIf="!field.isComponent" [model]="model"> </ng-container> <app-multi-linkage *ngI.

2021-01-15 10:50:05 324

原创大型动态表单实例整合 angular7 2-引入与模版接口定义

接下来，整理一下动态表单的module.ts结构与其接口的模版dynamic-form.module.ts先上代码，再整理解析import { TestFormComponent } from './components/test-form/test-form.component';import { FormCheckboxComponent } from './components/form-checkbox/form-checkbox.component';import { FormDate

2021-01-15 10:49:52 165

原创大型动态表单实例整合 angular7 1-动态指令

大型动态表单：独白：最近突然想要整理一下动态表单的相关知识，但是量太大，分散又不好理解。我想尽量做到详细且结构清晰，容易记忆，所以只能慢慢整理，最后再调整一下结构。限于本人才疏尚浅，对于动态表单的理解也并非无所不能，如果有所偏差，希望可以得到一些建议适用情况：本案例介绍尽量适配于大量无冗杂操作逻辑的表单尽量适用于表单的展示，当然也可以进行修改，但是如果仅是查看那就更加适配了。...

2021-01-15 10:49:40 324 1

原创 OSS方式、canvas方式图片压缩（宽高、质量百分比）、EXIF图片数据解析（旋转角、数据）

利用FileReader、Canvas对图片进行压缩：注意这里的压缩指的是宽高压缩还有质量的百分比压缩，而不是压缩到指定的多少k（但是观察oss的压缩我发现，当使用Q_10时，图片总是在500K以下）利用EXIF对图片进行解析，以获取图片的旋转角度、大小等各类数据1、OSS方式质量/大小压缩与解析质量压缩不改变大小：图片url后面拼接 ?x-oss-process=image/quality,Q_10因为这种方式只支持jpg、jpeg、webp所以需要判断一下我这里压缩到Q.

2020-12-29 10:59:14 1219

原创论请假理由的多样性

收藏一下这么多年的请假

2020-12-24 17:32:28 195 2

原创 angular7 service存储组件间的传值取值的时候获取不到的问题

在service中放存取的方法：存储的属性：personalInfo public personalInfo: any = { applicationNum: '', status: 0, name: '' }; constructor(private http: HttpClient, private router: Router) { super(); } setPersonalInfo(value: any) { this.personalInfo

2020-11-26 18:06:24 559

原创 canvas基础学习笔记

1、绘制基础、直线  <canvas id="canvas" width='1024' height="768" style="border: 1px solid;margin:100px auto;"> 当前浏览器不支持Canvas,请更换浏览器再试 </canvas> <script&gt

2020-11-18 10:45:13 197

原创 JavaScript设计模式--状态模式（TypeScript）学习

状态模式：本文纯属自学阶段笔记：学习自各大网站状态模式隶属于行为模式模型：环境类（原始对象），状态类，无数子类将具体执行逻辑放于子类中，主要不变的方法放在环境类中，状态类单纯用来管理状态优点：避免使用多重条件判断扩展性良好缺点：如果状态太多，会造成类太多，也会造成逻辑分散在各个类中，过于复杂用途：在 TypeScript 语言中，状态模式通常被用于将基于 switch语句的大型状态机转换为对象。核心：让你能在一个对象的内部状态变化时改变其行为，使其看上去就像改变了自身所

2020-11-04 16:26:07 236

原创 angular7 文件下载/导出功能二进制流数据处理/Blob

话不多说，先上代码// 导出 exportData() { // const curDate: any = new Date(); this.visualSplineService.exportLoanDetailLst(this.businessList, 'exportDistributorBusiness') .pipe(finalize(() => this.loading = false)) .subscribe((response: any)

2020-11-02 12:12:11 1589 1

渐变强的小刘