FE-阿阳-CSDN博客

原创 border-radius 失效

其实就是父级设置圆角属性失效，父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的overflow:hidden会失效。设置了border-radius，也设置了overflow:hidden，预览也没事，就是真机不行。border-radius 失效问题，部分机型的兼容性，实测：ios 14，低版本安卓机型上复现；在父级，就是设置了radius属性的class上加上这两条css就可以了。

2023-05-30 10:40:35 2606

原创部分文字高亮方案

部分文字高亮

2022-10-18 21:38:15 363 1

原创活动数据分析术语

活动数据分析术语

2022-08-19 10:07:47 299

原创 ‘View‘ cannot be used as a JSX component

'View' cannot be used as a JSX component。

2022-08-17 13:58:40 2828

原创 taro 打包编译报错

TypeError: Cannot destructure property 'importFrameworkStatement' of 'options.loaderMeta' as it is undefined.

2022-07-29 11:47:52 1880

原创商业化销售术语

商业化销售术语

2022-06-10 15:47:44 259

原创微信小程序 ios 13.6 版本 scroll-view 无法滑动

问题描述在 ios 13.6 版本中，页面有个 scroll-view 无法滚动，找了很长时间的问题，前提是确保 scroll-view 元素高度正常，设置了可滑动的方向，在其他手机上没问题，以下只是个人遇到的场景，并不一定通用问题原因本人遇到的问题原因是：页面有个全局的弹窗，定位为 fixed 布局，为了做动画效果，使用 transform: scale(0) => transform: scale(1); 的过渡，但是在 ios 13.6 版本中 transform: scale(0) 有

2022-05-25 11:09:52 2112

原创 sass for循环转换为 less

问题描述‘抄’组件库的代码时，可能会遇到需要将 sass 代码转换成 less 代码；sass 支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持，但是 less 可以使用函数递归的方式模拟 for 循环解决方案sass代码$component-prefix: 'taroify-';$hd:1;@for $i from 1 through 24 { .#{$component-prefix}flex-item-#{$i} { flex: 0 0 $i

2022-03-12 21:40:08 1079

原创 git 回滚代码的方案；

问题描述上线经常会有合并冲突出问题，需要回滚代码的场景，以下提供两种方案；背景就是：feature 分支合并了 master 代码，但是冲突解决失误，然后把 feature 合入了 master，这时候，master 和 feature 都是不干净的。解决方案...

2022-03-08 11:15:27 352

原创 css3 sticky不生效的原因？

问题描述布局时设置了 position: sticky ；发现没有生效，于是找了一下问题的原因；解决方案sticky不生效原因有：父元素设置了overflow:hidden或者overflow:auto未指定top、right、bottom、left4个值中的任意一个父元素高度小于sticky定位的元素高度所以：sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定

2022-03-03 11:10:18 1272

原创 npm 包增加发布权限

问题描述协同开发公共的 npm 包，经常需要给其他同事增加发布权限，这里做个记录解决方案// npm owner add xxx(name) xxx(包名) ; 示例如下npm owner add ayang @homed/mortise-icons

2022-02-17 17:00:05 2524

原创小程序 ios 上 TextArea 取消内边距

问题描述微信小程序中使用 TextArea 是很常见的场景，但是设置了 padding: 0， ios 还是有默认的内边距，ios 上需要额外的属性来设置解决方案<textarea placeholder-class="textarea-placeholder" disable-default-padding="true" placeholder="请输入"/>我们将disable-default-padding设置为true就会去掉 iOS 下的默认内边距：disab

2021-12-07 19:11:36 2889

原创 taro 版本升级提示 getSystemInfoSync 不存在

问题描述taro 相关的包升级版本，升级之后，报错提示：解决方案打开 package.json 检查一下是否所有@tarojs/xxx的库（不包括 @tarojs/plugin-xxx）都是同一个版本，如果有不同的版本就统一成同一个版本，删掉node_modules，重新安装一下依赖，问题解决。...

2021-11-24 19:18:12 821

原创 TS 中的一些高阶技巧

1. keyof 和 in1.1 keyofkeyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键interface Point { x: number; y: number;}// type keys = "x" | "y"type keys = keyof Point; 假设有一个 object 如下所示，我们需要使用 typescript 实现一个 get 函数来获取它的属性值const data = { a: 3,

2021-11-11 15:51:16 3345

原创取消 input 的浏览器文本框的自动提示

问题描述项目中需要取消 input 自动带出的浏览器文本框的自动提示，如下图解决方案给 input 设置 autoComplete=‘off’，可以取消自动提示<Input placeholder="请输入类目名称" autoComplete={'off'} maxLength={500} />...

2021-10-19 19:21:35 3440

原创 antd input 只允许输入数字和小数点

问题描述项目中需要限制 input 只能输入数字和小数点，并且限制到小数点后2位问题结果使用 Form.Item 中的 getValueFromEvent 属性，代码如下：<Form.Item getValueFromEvent={(e: any) => { const { value } = e.target; const tempArr = value.split('.'); if (tempArr[1]?.length) { retu

2021-09-16 21:13:11 2396 1

原创 antd Form 中 Form.Item里含有自己封装的组件，赋值和取值的问题

问题描述antd Form 中 Form.Item 有时会使用自己封装的组件，然后发现 Form 的 initialValues 不起作用，以及 onValuesChange 不会触发，获取不到值；解决方案封装的子组件中需要手动设置赋值和调用传值，代码如下：import { memo } from 'react';import { Select } from '@homed/mortise-ui';import { SquareMini16pt } from '@homed/mortise-i

2021-09-06 14:37:07 5965

原创 ref 和 forwardRef

ref 和 forwardRef问题描述在开发react组件时，遇到以下报错：解决方案用 forwardRef 包装一层，如下：const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button>));// 你可以直接获取 DOM button 的 ref：const

2021-08-24 15:06:44 334

原创本地调试 npm 包方案

本地调试 npm 包方案自营后台进入开发之后，需要抽离组件和物料到 mortise-UI 和物料库，本着‘工欲善其事必先利其器’的工作方式，先解决下本地调试 npm 包的方案。以下是几种方案：方案一：在 mortise-ui 项目中修改，在文档中查看修改效果，调试完成之后，再引入项目中调试；进入到 mortise-ui 目录下；执行 npm run start（dumi 的开发模式 dumi dev），注意： node 版本不高于14，一般12或者14都可以，亲测 16报错。第一次启动需要在根

2021-08-18 18:31:12 1553 2

原创 umi 中引入 npm 包 less 变量

umi 中引入 npm 包 less 变量问题描述最近开发组件库，组件库中有色彩系统，需要在项目中引用，此处记录解决方案解决方案方案一：在 less 中引入，如下：需要每个 less 文件中引用，所以舍弃@import "~@homed/mortise-ui/es/components/style/themes-override/color.less"; // 引入 mortise 色彩体系方式二：将 less 转换为 js 文件，通过修改 umi 的配置 theme 字段实现，

2021-08-17 11:02:20 1757

转载截取网页完整的长截图

直达链接通过截取几个页面发现，这种浏览器的行为只能截取 body 的内容高度，所以如果有些页面控制了 body 标签 height: 100% 的情况，需要从 body 一层层找一下，取消掉这些限制高度的 css 属性才可以...

2021-08-09 15:02:55 171

原创 nvm 命令

nvm 命令命令作用nvm --help展示帮助nvm --version已安装的nvm版本nvm install version下载对应的 node 版本(version)nvm install --reinstall-packages-from=重新安装对应的 node 版本nvm install --lts仅从LTS版本中选择安装nvm install --lts=仅从特定LTS系列的版本中选择nvm install --skip-d...

2021-08-06 16:49:44 1769

原创 antd 中 Table 使用问题总结

antd 中 Table 使用问题总结问题描述最近经常遇到 table 的宽度问题，UI 有各种列宽度的需求，这里记录总结下问题结果如果只给某些列设置 width 值，则设置 width 值的列表会有固定宽度，其他列根据内容自适应分配剩余宽度如果给所有列设置 width 值，则所有列根据 width 的比列分配总体宽度如果想达到一列宽度固定，其他列平分布局，可以巧用 fixed 属性，比如最后一列设置 fixed: ‘right’ 属性，给 Table 设置 scroll={{ x: 1200

2021-08-04 16:01:58 825

原创 antd 中 Tooltip 组件设置偏移量

antd 中 Tooltip 组件设置偏移量问题描述后台的平台用到 antd 的比较多，Tooltip 也是比较常用的组件之一，Tooltip 的 placement 属性支持设置提示的位置，但是有时候 UI 那关还是过不去，想要增加一点偏移量，就需要折腾一番。解决方案由于 Tootip 是动态设置的位置，所以设置的 ‘transform: translate’ 偏移量不起作用，这时候需要用到 align 属性，align 属性官网没做详细链接，只是提示参考 https://github.com/r

2021-07-26 14:53:21 4264 1

原创下载图片按钮的实现

下载图片按钮的实现问题描述业务需求：点击按钮下载图片到本地解决方案方案一：直接使用 a 标签，利用 download 属性；<a href='https://xxxxx.png' download='download'><a/>download 属性指的是支持下载，赋值为下载名，但是这个方法只支持同源下的图片，遇到跨域的图片，会进行跳转；方案二：巧用 a 标签，用 js 实现，关键代码如下：<li onClick={downloadFile} classN

2021-07-14 16:31:48 393

原创 TS 报错 “umi“没有导出的成员‘xxx‘

TS 报错 "umi"没有导出的成员'xxx'问题描述umi 项目中有 ts 文件报错："umi"没有导出的成员’xxx’问题结果主要是 ts 对 umi 的识别问题；查看下 tsconfig.json 文件的配置"paths": { "@/*": ["src/*"], "@@/*": ["./src/.umi/*"] // 解决 umi 找不到部分模块的问题},这时候如果还报错，是需要重启 TS 服务方法一：关了 vscode 重启；方法二：command + p =>

2021-06-25 20:25:50 11746 3

原创手写 Promise

2021-06-23 23:59:02 72

原创函数柯里化

柯里化（currying）是什么？当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不会变）；然后返回一个新的函数接收剩余的参数，返回结果// 柯里化演示function checkAge (age) { let min = 18 return age >= min}// 普通的纯函数function checkAge (min, age) { return age >= min}// 函数的柯里化function checkAg

2021-06-08 23:50:51 85

原创高阶函数是什么

高阶函数（higher-order function）是什么？可以把函数作为参数传递给另一个函数// 高阶函数-函数作为参数function forEach (array, fn) { for (let i = 0; i < array.length; i++) { fn(array[i]) }}// 测试// let arr = [1, 3, 4, 7, 8]// forEach(arr, function (item) {// console.log(i

2021-06-07 23:55:12 205

原创 flexible.px2rem

需求场景：现在大部分M站的页面布局都是通过 flexible 的方案解决，flexible.js 里面提供了 px2rem 的函数方法，有些页面需要 js 中动态转换 px 为 rem 给元素设置样式，这时候就有两种方案：自己写一个函数方法，使用 flexible 提供的 px2rem；本着图省事的方案，采用直接找 flexible 的方法。但是竟然在 window 下没找到。问题排查过程：第一步，在 index.ejs 中找到了 flexible 的初始化代码，并且把 flexible

2021-06-06 17:04:19 320

原创 TypeScript（TS）基础学习

TS 基础 // 布尔值 let isDone: boolean = false; let createdByNewBoolean: Boolean = new Boolean(1); let createdByBoolean: boolean = Boolean(1); console.log(isDone) console.log(createdByNewBoolean) console.log(createdByBoolean) // 数值

2021-06-06 10:42:47 292

原创 ant Design 中使用 :globa

ant Design 中使用 :global问题描述接触 antd 项目，发现样式里面有 :global 写法，研究一下问题结果less 文件中的写法如下：.houseInfoCard { margin-bottom: 20px; :global { .ant-form-item { margin-bottom: 10px; } }}这里这么写主要是为了覆盖 antd 的样式；有两点需要注意：引入的 antd 组件类名没有被 CSS Modu

2021-05-20 17:53:30 1626

原创 macOs 安装 nvm 的步骤

macOs 安装 nvm 的步骤：第一步：安装 git （本地有git，跳过）方式一：直接去 git 官网安装找教程，可以移驾 https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git 。本人机器不知为啥，直接通过提示安装 git 安装不上，用以下方法安装；方式二：通过 brew install git 来进行安装，如果提示：brew: command not found,则表示本地没有 homebrew，则先

2021-04-26 22:13:17 1898 1

空空如也

空空如也