摘要:
当我们设计界面时,在以下情况会需要阻止元素/组件内的事件阻断,不被上层触发: 弹出提示框,期望点击框外空白区域可以关闭弹框、点击框内不关闭弹框 组件设计时,期望点击全局/点击指定元素时,显示不一样的交互。 网上搜到三种答案: ev.preventDefault() ev.stopPropagatio 阅读全文
摘要:
官网:https://ant.design/components/date-picker-cn/ 如果要显示中文,官网是这么指导的: 但是,设置后并没有生效!原因是默认的中文local文件并没有月份的format格式: 解决: 根据官网local的格式,添加本地local对象即可 1 import 阅读全文
摘要:
官网文档:https://echarts.apache.org/zh/option.html#series-pie.type 使用案例指导:https://echarts.apache.org/zh/tutorial.html#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE 阅读全文
摘要:
react异常警告:Each child in a list should have a unique “key” prop 原因:Dom在渲染数组时,需要一个key,不然嵌套数组时会引起歧义 解决: 1 <div className="classlist-contaier"> 2 {this.st 阅读全文
摘要:
当我们添加一张svg图片显示时,react提示找不到文件。 我们可以在全局文件global.d.ts内,添加图片类型的声明: 详见《TypeScript 引用资源文件后提示找不到的错误处理方案》 声明之后,引用不报错了。然后我们看看svg图片,里面有颜色及其它设置: 1 <?xml version= 阅读全文
摘要:
上一篇 前端 浏览器所在客户端信息,有浏览器信息后,以下是区分手机的详细类型 虽然没难度,但是记录下来,方便后续无脑复制: 苹果APP类型 1 // iOS 2 isIPhone = (userAgent: string) => /iphone/i.test(userAgent); 3 isIPod 阅读全文
摘要:
在开发App端的网页时,要适配iphone、ipad、ipod、安卓等各种机型,一般是直接使用em、px转em、界面缩放。 本章是通过将界面缩放,等比例显示在各机型上。过程中遇到了些问题和大坑~ 然后下面是具体的自适应尝试~ 方案一 设置tranform/scale 首先设置内容固定宽度、自动高度( 阅读全文
摘要:
如果是在线查询,可以在点击https://www.bejson.com/httputil/clientinfo/ 查看详细浏览器信息 js获取浏览器所在客户端信息:window.clientInformation.appVersion 如果是服务端渲染,在Node端初始化时获取不了window对象, 阅读全文
摘要:
如何通过js往剪贴板中,添加一段文本 1 var oInput = document.createElement('input'); 2 oInput.setAttribute('value', this.downloadUrl); 3 document.body.appendChild(oInpu 阅读全文
摘要:
监听标签的触摸/鼠标滑动事件,添加元素的切换动画,效果如下: 事件监听 鼠标事件和触摸事件监听: 1 componentDidMount() { 2 var teachingReportDiv = document.getElementById("teachingReport") as HTMLEl 阅读全文
摘要:
请求Node端中转接口时,遇到以下异常: Request_fileSize_limit Request_fields_limit Request_fieldSize_limit 遇到以上异常时,调试信息里会报错:Payload Too Large、异常code413。 解决: 在config.def 阅读全文
摘要:
通过img.src添加图片 添加一个img元素,设置content,会发现在IE、safari等浏览器内显示为空白。 一般我们使用img,是通过src来设置的,可以通过react的import图片添加。 <img className="headerMenuEntryImg" src={MenuEnt 阅读全文
摘要:
页面滚动时,添加平滑特效 1.在页面入口处,添加css 1 html { 2 scroll-behavior: smooth; 3 } 添加全局css之后,直接使用window.scroll(0,0)就可以平滑滚动到顶部了。 注:兼容性很差,仅支持火狐、chrome高级版本 2.指定滚动操作,使用平 阅读全文
摘要:
每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数 以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部。 添加初始数据,默认透明度0、左右分别移动100px。 1 //左侧容器 2 .item-leftContainer { 3 opacity: 0; 4 transform: 阅读全文
摘要:
以下是常见的监听滚动以及相应的操作 窗口滚动事件 当页面滚动时,如何动态切换布局/样式 1. 添加滚动事件的监听/注销 1 //在componentDidMount,进行scroll事件的注册,绑定一个函数,让这个函数进行监听处理 2 componentDidMount() { 3 window.a 阅读全文