1佳佳佳佳-优快云博客

原创 Vue Test Utils前端单元测试

Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具。可见无论是受欢迎度和写法上，Jest 都有很大的优势，因此推荐使用开箱即用的 Jest。Jest 默认支持断言，同时默认支持覆盖率测试。

2023-05-11 18:33:24 1511

原创 elementUI中textarea组件无法autoSize问题记录

问题：使用饿了么框架中的文本域组件，配置autoSize，使其自适应高度。在输入的过程中，可以正常达到自适应的效果。但预览时，即value有默认值时，autoSize失效。

2023-04-11 14:29:04 4081

原创父子组件，父孙组件之间的通信 provide与inject

一、概念这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。 inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。二、场景当子组件或孙组件想要使用父组件的变量或需要变更父组件的变量值时，通常使用props和$emit进行实现。父子组件之间的交互还较为方便，但一旦子组件的

2022-03-08 18:31:16 628 1

原创 react使用less

1、安装依赖 npm i less less-loader -D 2、暴露配置文件使用create-react-app 创建的项目默认是看不到webpack配置文件的，需要先暴露出来，然后才能修改里面的配置信息。 npm run eject 3、配置less 打开webpack.config.js，搜索oneOf，并在数组中添加以下配置 { test: /\.less$/, use: [{ loader: 'style-loader', }, { loader: 'css

2021-12-30 17:04:59 620

原创 react配置路由

1、安装依赖 npm i react-router react-dom react-router-dom react-router-config -S 2、配置路由：routes.tsx import Index from '../views/index'; import PLP from '../views/plp'; import PDP from '../views/pdp'; import Login from '../views/login'; import My from '../views/

2021-12-24 10:20:30 409

原创 safari对100vh的兼容问题

需求：在以下的布局要求下，利用flex布局来实现，但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度很自然的利用100vh来控制最外层的高度，但测试过程中，发现safari浏览器中，页面的高度出现了偏差，比屏幕的高度还要高出一部分，出现了双层滚动条。经研究，发现safari的100vh是包含地址栏和功能列的，而其它浏览器100vh才是用户浏览器真正的可见区域(见下图) 解决方案通过innerHeight重新定义一个变量代替vh safariHacks() { let win

2021-09-26 17:10:13 2200

原创 ios Safari 无法禁止缩放的问题

通常，我们会通过meta标签来实现禁止页面缩放的效果 <meta id="meta-viewport" name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 但在实际开发过程中，发现部分safari浏览器下，仍可以进行缩放，即meta设置在 Safari 内无效了一下代码都在vue的index.h

2021-09-26 16:56:31 659

原创 safari对z-index的兼容性

iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效可以用transform: translateZ来实现 z-index: 20; transform: translateZ(20px); // safari中z-index

2021-09-24 18:05:57 541

原创 vue，env多环境切换

生产项目通常有多个环境，本地开发时就需要我们区分不同的环境进行联调或修复缺陷。可通过env进行不同环境的配置，并结合代理，达到本地开发，不同环境调用相应接口地址及资源的效果。实现命令行： npm run serve --env=ft1 vue.config.js console.log(process.env.npm_config_env) const env = process.env.npm_config_env let api = 'https://apift2-xxx' // 默认的接口路径

2021-09-15 17:30:43 971

原创 css实现高斯模糊

想要实现的效果图思路：图片与遮罩层相对定位，将遮罩层的背景图也设置为该图片，再利用高斯模糊，将背景图模糊处理，图片本身的层级高于遮罩层，达到这样的效果 <div class="box"> <img src="../../assets/img/test.png" alt="" class="img"> <div class="mh"></div> </div> .box { width: 100px; height: 10

2021-09-03 15:08:39 646

原创 vue3封装axios+Promise及代理配置

axios安装 npm install axios 新建一个util文件夹，用于存放工具类新建http.js，用于封装axios请求 import axios from 'axios' const httpUtil = axios.create({ baseURL: '/api', timeout: 100000 }) httpUtil.ajax = (options) => { return new Promise((resolve, reject) => { h

2021-09-03 10:10:09 1214

原创在vuecli4.x下，实现移动端适配

参照vant官网的Rem 布局适配 https://youzan.github.io/vant/#/zh-CN/advanced-usage postcss-pxtorem对移动端进行适配——可在编译过程中将px转化为rem lib-flexible——用于设置 rem 基准值安装： npm install postcss postcss-pxtorem --save-dev npm i -S amfe-flexible 配置可在vue.config.js或postcss.config.js进行配置，

2021-08-26 18:20:02 325

原创 vue脚手架vue-cli4.x安装vue3项目

关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 Node 版本要求 Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。安装vue-cli4.x

2021-08-26 14:39:30 290

原创 JS实现一键复制的功能

实现 document.execCommand(‘copy’) 语法 bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 参数 aCommandName: 命令名字,copy,cut等 aShowDefaultUI:一个 Boolean，是否展示用户界面，一般为 false。 aValueArgument:一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url

2021-05-07 14:42:08 816

原创 vue-父子组件之间的参数传递

父组件向子组件传递：父组件中： <template> <div id="app"> <child :logo11="logoMag"></child> </div> </template> <script> //引用子组件 import child from "@/components/Test

2021-02-19 10:44:14 165

原创 windows安装nvm的一些注意点

nvm node.js version management node版本管理器。当发现多个项目使用的node版本不一致时，node的版本管理就需要用到nvm。安装 https://github.com/coreybutler/nvm-windows/releases 这里是将nvm安装到了D盘的tool文件夹下（需要注意的是nvm的安装路径不可以携带中文，会导致安装完成后无法正常找到nvm）选择node安装路径。（若在安装nvm之前安装过node，建议将之前的node卸载，没有卸载遇到了nvm无法

2021-02-18 15:58:20 298

原创 vue注入组件时报错：did you register the component correctly? For recursive components......

报错信息： vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option. 找原因：查了很多，大多数都是说components拼写错误，或者写了两个components。这个也需要检查一下，但是我这边是没有这样的问题的，再

2020-10-22 15:30:50 55911 16

ch_jia_jia的博客