canvas绘制
摘要：canvas <canvas id="canvas" ref="Canvas" /> 绘制画布 const canvas = ref<any | null>(null); const draw = (value: string) => { // 创建 context 对象 const ctx = c
阅读全文
posted @
2022-03-23 09:37
blue_hl
阅读(57)
推荐(0) 编辑
VUE3的学习和使用（四）用viewerjs插件实现图片预览
摘要：用viewerjs插件实现图片预览 // 安装依赖 "viewerjs": "^1.9.0" 在template里展示图片并设置点击事件 <template> <ul id="img-area"> <li v-for="(item,index) in imgList" :key="item.id">
阅读全文
posted @
2022-03-22 10:44
blue_hl
阅读(2122)
推荐(0) 编辑
VUE3的学习和使用（三）用execCommand实现文本复制
摘要：利用execCommand复制文本 <template> <button @click="copyText">复制</button> <section id="copy-text"> ... </section> </template> // 复制监测详情内容 const copyText = ()
阅读全文
posted @
2022-03-21 10:52
blue_hl
阅读(480)
推荐(0) 编辑
react 文件下载
摘要：如果想通过纯前端技术实现文件下载，直接把a标签的href属性设置为文件路径即可 //downloadSrc即为接口的地址即可 <a href={downloadSrc}> <Button>Download</Button> </a> 但是后端传的是文件流，这样下载的是markDown文件，如果想转换
阅读全文
posted @
2021-05-13 10:25
blue_hl
阅读(1494)
推荐(0) 编辑
react 页面嵌入代码端—codemirror
摘要：介绍：CodeMirror是一个代码编译器。特点：CodeMirror可以直接嵌入Web页面，提供在线代码编辑器的特性页面实现： package.json中添加相关依赖 "codemirror": "^5.60.0", "react-codemirror2": "^7.2.1", 引入CodeMir
阅读全文
posted @
2021-04-15 16:12
blue_hl
阅读(468)
推荐(0) 编辑
react 图片上传问题
摘要：react 图片上传实例 1.通过上传组件实现图片上传 实现效果： 技术： TS+React，Ant Design的Avatar 头像组件，Upload组件 栅格布局，左侧是头像图片，右侧是上传按钮和提示语 <Row> <Col span={6}> //头像部分，没有照片显示默认图标 {imageU
阅读全文
posted @
2021-03-29 16:21
blue_hl
阅读(636)
推荐(0) 编辑
常用的CSS样式整理【持续更新中】
摘要：更新 参考：https://www.cnblogs.com/coco1s/p/14439760.html object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接
阅读全文
posted @
2021-02-03 16:36
blue_hl
阅读(124)
推荐(0) 编辑
react-pdf插件实现pdf预览功能
摘要：安装react-pdf插件 npm install react-pdf 引入依赖包 import { Document, Page, pdfjs } from 'react-pdf' 依赖包下载下来默认是不展示电子签章， 引用一个静态的pdf.worker.js，注释里面隐藏的电子签章功能 pdfj
阅读全文
posted @
2021-01-14 15:45
blue_hl
阅读(5735)
推荐(0) 编辑
react 实现复制copy文本内容
摘要：思路： 选中想要复制的元素对象 创建range对象，把选中的元素对象放进去 讲range对象添加到selection对象，执行copy命令 代码： //按钮绑定事件 <Button onClick={copyOrderNumber} className='order-num-operate'> Co
阅读全文
posted @
2021-01-07 14:59
blue_hl
阅读(1477)
推荐(1) 编辑
react 移动端签名实现
摘要：绘图签名实现 导入插件 import CanvasDraw from 'react-canvas-draw' 使用组件 const signCanvas = React.createRef() 清空画布 const clear = () => { signCanvas.current.clear()
阅读全文
posted @
2021-01-07 14:49
blue_hl
阅读(798)
推荐(0) 编辑
css样式污染
摘要：框架虽好，但需求千奇百怪，有时候框架的样式远远不满足需求，我们就需要大量的通过css来完成。 但是，css一个写不好，污染全局，可就出大事了。 定义css的样式时，尽量少用不用标签选择器 css类命名要语义化，个性化。 比如一个add按钮，通过个性化的定义，可以更好的区分元素，也方便修改查看时定位
阅读全文
posted @
2020-12-21 20:24
blue_hl
阅读(1574)
推荐(0) 编辑
Echarts 饼状图
摘要：Echarts 饼状图代码解析： 在当前页面，需要为ECharts 准备一个具备高宽的 DOM 容器 <div className='pie-chart'> <div id='pieChart' /> </div> </div> 然后需要设置配置信息，ECharts 库使用 json 格式来配置 c
阅读全文
posted @
2020-12-09 17:09
blue_hl
阅读(460)
推荐(0) 编辑
radio,checkbox选中样式优化
摘要：问题：radio,checkbox默认的样式不满足需求，需要修改选中的样式 思路： 利用label的特点：点击label，浏览器会自动将焦点转移到其附加的表单控件 隐藏radio(checkbox),设置未选中label样式，设置选中时label的样式. 注意： 1.当两个radio都可以选中，而你
阅读全文
posted @
2020-12-08 20:39
blue_hl
阅读(859)
推荐(0) 编辑
css使用总结
摘要：最近一直在做项目的页面样式，做了一些总结 （***：常用，**：一般 ，^：较少) 首先从基础的开始， 文本： *** text-align：文本对齐。（left/right/center) ^ text-transform:lowercase。文本转换属性是用来指定在一个文本中的大写和小写字母。可
阅读全文
posted @
2020-11-12 10:18
blue_hl
阅读(90)
推荐(0) 编辑
IE浏览器兼容之URL编码
摘要：问题场景：文件上传，在谷歌里可以正常操作，IE浏览器操作出错，服务请求报错。HTTP 400 错误 - 请求无效 (Bad request) 问题分析：对比两个请求可以发现，二者的请求URL不一致。jsp通过url请求传递参数给后端，但是url的格式不对会造成请求失败。这种url的问题常发生在在IE
阅读全文
posted @
2020-08-18 19:29
blue_hl
阅读(1327)
推荐(0) 编辑
