工作沉淀
工作中遇到的小问题记录
MissXu666
转行学习的前端小菜鸡一枚,工作两年,成长中,共勉
展开
-
工作问题记录React(持续更新中)
keyframes定义了一个动画,从0%到100%的动画过程中,背景的位置从0%平移到100%,即从左到右移动一个完整背景的长度。rgba(190, 190, 190, 0.2) 63%: 在63%的位置,再次变为浅灰色,透明度为20%。这使得背景图像是元素宽度的4倍,为动画提供了足够的空间。rgba(129, 129, 129, 0.24) 37%: 在37%的位置,颜色为深灰色,透明度为24%。rgba(190, 190, 190, 0.2) 25%: 在25%的位置,颜色为浅灰色,透明度为20%。原创 2024-04-30 14:10:48 · 430 阅读 · 0 评论 -
前端开发vscode 常用插件记录
二、css peek 它的主要作用是帮助开发人员更轻松地查找和导航CSS样式表中的类、ID、选择器和样式定义(鼠标移动到css样式名即可查看样式,点击直接跳转对应文件)十、GitLens 提供了对 Git 版本控制系统的全面支持,包括代码历史记录、代码比较、代码注释、代码作者等功能。一、Vetur 提供了对 Vue.js 项目的全面支持,包括语法高亮、智能提示、代码片段、错误检查、格式化等功能。三、Vue Peek 插件用来拓展 Vue 代码编辑的体验,可以让我们快速跳转到组件、模块定义的文件。原创 2024-01-10 19:01:10 · 533 阅读 · 0 评论 -
less 里面的calc 和 运算符有什么区别 ?
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。在大多数情况下这是没有意义的,一个长度乘以一个长度就得到一个区域,而 CSS 是不支持指定区域的。Less 会按照数字的原样进行操作,并将明确声明的单位类型分配给结果。// 结果是#223355。//结果是#101010。// 结果是#112244。// 结果是 15%// 数字转换为相同的单位。原创 2023-09-18 16:29:39 · 302 阅读 · 0 评论 -
移动端h5项目的兼容和适配问题
推测可能是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体,所以解决这个问题就要在font-family里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。单位面积内的像素越多,图像的效果就越好。原创 2023-08-29 17:03:18 · 3358 阅读 · 0 评论 -
前端操作cookie
文章分享原创 2023-07-21 15:05:12 · 59 阅读 · 0 评论 -
移动端使用new Date踩坑记录
【代码】移动端使用new Date踩坑记录。原创 2023-05-25 17:02:49 · 116 阅读 · 0 评论 -
移动端事件
移动端事件主要有触摸、滑动、点击、拖拽、双击、旋转、放大缩小,下面主要会介绍前三种事件。原创 2023-07-21 11:13:26 · 234 阅读 · 0 评论 -
前端JS实现路由跳转页面的方式有哪些?
方式四:// window.history.back() window.history.go(-1);方式一: window.location.href = ‘http://www.baidu.com’;方式五:window.location.replace(“http://www.baidu.com”)方式二:window.location.reload( ) 刷新当前页面。方式六:winodw.location.assign(“URL”)方式七:window.navigate(‘URL’)原创 2023-07-21 10:31:57 · 427 阅读 · 0 评论 -
前端灰度发布是什么
1、对于服务端渲染的应用:用户首先发起请求后,服务器并不会直接组装静态资源,而是先去灰度规则里获取名单,然后将灰度名单拿到进行判断处理来决定渲染那一套模板资源给到客户端,最终给处于灰度名单里的用户展示新版本页面,而非名单内的用户继续使用旧版本的页面内容,如需要放量时,直接在灰度规则里进行修改即可。当用户的请求被接收到后,先通过getRule获取灰度规则来确定给当前用户展示哪一个版本号的资源,然后返回带着资源版本的模板内容,客户端接收到该模板之后,再加载对应的版本号资源,从而达到灰度要求。原创 2023-07-21 10:10:44 · 197 阅读 · 0 评论 -
前端实现文件上传的方式
测试一下这种实现方式返回的都是什么东西;原创 2023-07-21 10:05:08 · 260 阅读 · 0 评论 -
应用和迭代(名词解释)
需求上线时间为0530,则可建迭代“xx-0530”, 或按上线节点来 “530”● 一个迭代对应一个代码分支, 分支名可以以迭代名称为标准,如 “xx-530”● 一个完整的前端应用,一般用应用脚手架创建,包含路由,页面,状态等。如果一个迭代涉及多人开发,可先在个人分支开发,发布前合并到迭代分支。● 迭代流程包含多个发布阶段,默认为“测试”,“预发”,“生产”● 应用的分组(业务中心,数据中台等)只用于逻辑分类,便于管理。● 用于应用相关需求的发布,管理应用的上线生命周期。● 一个应用对应一个代码仓库。原创 2023-03-01 10:52:34 · 397 阅读 · 0 评论 -
yarn 更新依赖包命令
2、根据第一步观察修改package.json里面的中间版本 保存文件。6、再来一次 yarn outdated 观察只有大版本。4、再来一次yarn outdated 观察有小版本。1、yarn outdated 检查过时的依赖包。5、直接yarn upgrade 升级依赖包。3、执行 yarn install。原创 2023-03-01 10:23:46 · 7008 阅读 · 0 评论 -
window.open 打开新页面失效
原因:浏览器出于安全的考虑,会拦截掉非用户操作打开的新页面;实际上,在异步的方法中以及非用户操作打开的新页面都会被拦截(不同浏览器不同版本表现不同,不是所有情况都会被拦截,但是任然需要做兼容处理)在开发h5项目的时候 经常需要使用window.open 来打开新页面,但有时会出现失效的情况。在接口请求完成后,根据返回的结果调用window.open 失效。交互上的小修改,这样写需要用户手动确定才会跳转。2、 使用a标签进行跳转。原创 2023-02-25 13:18:10 · 8261 阅读 · 0 评论 -
常用vscdoe插件?
vs code 实用插件原创 2023-01-17 12:29:58 · 126 阅读 · 0 评论 -
安装yarn之后查看版本报错
安装在这里插入代码片npm install --global yarn安装成功,检查版本yarn --version出现报错:yarn : 无法加载文件 C:\Users\小斌\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ yarn -v+ ~~~原创 2022-03-29 23:24:54 · 1252 阅读 · 0 评论 -
如何在项目中使用iconfont
实用iconfont原创 2023-01-17 12:49:11 · 1995 阅读 · 0 评论 -
使用UC 开发者调试工具?
使用UC 开发者调试工具?原创 2023-01-17 12:46:03 · 2755 阅读 · 1 评论 -
前端入职环境搭建
环境搭建原创 2023-01-17 12:40:20 · 136 阅读 · 0 评论 -
深拷贝的应用
业务场景: 需要获取到详情页的数据,在编辑页展示.如果直接this.detail = this.edit 那么在修改编辑页的数据的时候会把详情页的数据也改掉.解决办法:把detail 的数据深拷贝过来写法 this.edit = this.deepCopy(this.detail)对象深拷贝:方法一:deepCopy (obj) { var result = Array.isArray(obj) ? [] : {} for (var key in obj) { if (obj原创 2021-10-29 16:37:58 · 184 阅读 · 0 评论 -
使用elelment-ui表单校验切换就自动开启了所有的校验
今天在做需求的时候遇到一个问题输入完第一个表单,后面所有的表单就自动校验了表单校验有一个validate-on-rule-change属性,默认是true,我们设置为false就可以了!原创 2021-10-28 17:32:06 · 1361 阅读 · 1 评论 -
element-ui安装与使用
element-ui整个引入的使用方法第一步:在编辑器中打开终端,进入项目安装npm i element-ui -S第二步:在main.js中引入,记得加上Vue.use(ElementUI);import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI)原创 2021-06-13 15:48:46 · 421 阅读 · 0 评论 -
在通过git bash 创建vue项目时无法手动选择选项,上下键无法选择
在通过git bash 创建vue项目时无法手动选择选项,上下键无法选择原因:在windows上通过minTTY使用git bash 交互提示符并不工作解决办法:winpty vue.cmd create hello-world通过这个指令创建项目原创 2021-06-14 11:30:03 · 1125 阅读 · 0 评论 -
Element ui 按需导入报错
#标题:Element ui 按需导入报错:mian.js不是有效插件#今天按照官网方法使用element ui按需导入的时候报错,提示大概是mian.js不是有效插件,但是全部导入的时候就没有这个问题,在终端提示的错误如下:解决办法如下:第一步:安装npm install babel-plugin-component -D第二步:找到.babelrc文件,在plugins数组中添加第三步:.在src中创建文件夹 element-ui 在文件夹中新建 index.js 在js文件中引入所需的组原创 2021-04-16 20:18:18 · 773 阅读 · 0 评论 -
Vue-vant的使用
Vant 是赞前端团队维护的移动端组件库,提供了一整套 UI 基础组件和业务组件。可以快速搭建电商网站,一下是使用方法:第一步:通过npm安装npm i vant -S第二步:安装babel插件npm i babel-plugin-import -D第三步:在babel.config.js文件中添加如下设置plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', sty原创 2021-04-17 13:38:30 · 334 阅读 · 0 评论 -
MintUi踩坑记录
在使用MintUi的时候,其用法和ElementUi类似,但是在按需使用MintUi按照官网的步骤无法正常运行,以下是注意点:第一个注意点:在按需导入MintUi时,还是需要完整导入MintUi,即需要在mian.js中添加:import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)第二个注意点:在mian.js中不能使用useVue.use(Button)而应该使用:Vue.component(Bu原创 2021-04-17 12:30:18 · 154 阅读 · 0 评论 -
常见的表单校验规则
1.身份证校验:rules="[ { required: true, message: '请填写身份证号' }, { validator: isCardNo, message: '请输入正确身份证号码' } ]"这里的validator对应校验的方法,可以放到utils上统一管理export function isCardNo(card: string) { // 身份证号码为15位或者18位,15位时全原创 2021-10-28 13:55:31 · 555 阅读 · 0 评论 -
前端怎么做数据的脱敏
需求:后端返回完整字段,要求前端做脱敏处理sensitiveField(field, before, after ) { if (!field) { return ''; } field = String(field); // 匹配中文、英文、数字 const regItem = '[\u4e00-\u9fa5a-zA-Z0-9]'; const regExp = `(${regItem}{${before}})${原创 2021-10-28 17:11:29 · 1796 阅读 · 0 评论 -
element文件上传功能的实现
这是使用element的文件上传组件 <el-upload size="small" class="upload-demo" drag :on-change="handleChange" :file-list="fileList" action='' :auto-upload='false' >原创 2021-10-28 16:06:08 · 3277 阅读 · 0 评论