Rkatsiteli-CSDN博客

原创【React】export ‘makeObservable‘ (imported as ‘makeObservable‘) was not found in ‘mobx‘

问题描述：WARNING in ./node_modules/mobx-utils/mobx-utils.module.js 629:8-22export 'makeObservable' (imported as 'makeObservable') was not found in 'mobx' 解决方案：降级 mobx-utils 为 5.6.2，如下：npm i mobx-utils@5.6.2 --force

2022-05-07 14:43:21 709

原创 Vue 父组件更改子组件样式

Vue 父组件更改子组件样式<style lang="css" scoped> //TODO </style>中 scoped 是受保护的，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装固更改子组件的style时是失效的解决方案：1、去除scoped （不推荐）<style lang="css"> .test{ background-color

2022-05-05 14:24:18 2899

原创 Chrome Color 如何实现颜色采集器

看代码：const eyeDropper = new (window as any).EyeDropper();eyeDropper.open().then((eyeDropperResult: { sRGBHex: string;}) => { console.log(eyeDropperResult.sRGBHex)});官网地址：在这里，可根据浏览器支持度，判断是否支持，可直接使用，拿走不谢！目前浏览器支持度如下：...

2022-05-03 15:01:12 1216

原创 Input[type=‘range’] 标签去除内置阴影

Input[type=‘range’] 标签去除内置阴影

2022-04-24 17:54:21 581

原创 Input[type=‘color’] 标签去除内置阴影

H5 Input[type='color’] 标签去除内置阴影，如下图所示：解决如下：<input type="color" value="#ff0000"><style> input[type="color"] { -webkit-appearance: none; border: none; padding: 0; border-radius: 2px; } input[type="color"]::-webkit-color

2022-04-21 18:14:45 955

原创 Vue3 [@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.

问题：解决：去掉defineProps, defineEmits导入，直接使用，详见官网：defineprops-和-defineemits使用// 去掉主动导入import { defineProps, defineEmits } from 'vue'; 结果：<script setup>// 去掉主动导入，直接使用 definePropsconst props = defineProps({ foo: String})const emit = defineE

2022-04-21 10:17:04 10826

原创三种方式：object、embed、mask引用 Svg 并更改样式

方式1：使用Object、embed标签引入html<div class="item"> <object data="test.svg" type="image/svg+xml"></object> <embed src="test.svg" type="image/svg+xml" /></div>更改颜色，大小可通过css处理.item { overflow: hidden; object,embed { c

2022-04-20 19:17:13 3173

原创 webpack 压缩 styled-components失效

问题描述：通过webpack5.x js压缩中发现，使用styled-components插件并不能够完全压缩，如下图：解决方案：修改.babelrc.jsmodule.exports = { "presets": [ ... ], "plugins": [ ["babel-plugin-styled-components", { "ssr": false }] ]};参考资料：https://pretagteam.com/question

2022-01-12 13:57:56 569 2

原创【腾讯云前端性能优化大赛】如何使用React 技术栈从 3000ms 到 400ms 过程

腾讯云前端性能优化大赛

2022-01-01 15:38:22 478

原创 Wacom 驱动安装或者失败重装

1、安装下载Wacom官网驱动地址：官网地址按照数位板型号进行下载（我选择的版本：Driver 6.3.44-1 (macOS 10.13 - 11)，macOS系统是：11.5.2 (20G95)）将数位板连接电脑，安装下载好的数位板驱动，进行操作安装按照安装步骤，打开下载驱动，双击 “Wacom Tablet.dmg” 安装程序遵循安装向导步骤重启电脑2、失败后重装或者二次/多次安装安装不起作用或二次安装操作（历史安装过得驱动，需要先卸载，安装步骤）打开“控制面板—程序和

2021-09-09 15:16:15 16298

原创 Vue3.x Error：vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock

Vue3.x错误：vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock见错误信息：index.vue:2 Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock) is not a function at Proxy.render (index.vue:2) at $n (vue.global.js:2422) at vue.glob

2021-09-02 19:29:56 2516

原创 CSS记录 - 2021-08-10

CSS记录background-image: linear-gradient( -45deg , rgba(34, 34, 34, 0.2) 12.5%, #0000 12.5%, #0000 50%, rgba(34, 34, 34, 0.2) 50%, rgba(34, 34, 34, 0.2) 62.5%, #0000 62.5%, #0000 100% ); background-size: 8px 8px;效果背景图：

2021-08-10 19:07:22 162

原创 Vue 3.0 遇到的问题

Vue3.0 安装npm i vue@next vue-loader@nextnpm install vue-router@nextnpm i webpack webpack-cli webpack-dev-server --save-devtypescript安装依赖npm install ts-loader --save-devnpm install typescript --save-devnpm install @vue/babel-plugin-jsx -Dnpm i @babe

2020-11-19 18:11:20 6452 16

原创 webpack5.x 遇到的问题

更新问题1异常：Compiling RuleSet failed: Exclamation mark separated loader lists has been removed in favor of the ‘use’ property with arrays (at clonedRuleSet-2[0].rules[0].loader: style-loader!css-loader!less-loader如下图所示解决：webpack 使用如下{ test: /\.(css|

2020-11-19 11:42:19 2640

原创 echarts 特殊柱状图

特殊规则柱状图如下代码实现：option = { "backgroundColor": "#171A2A", "tooltip": { "trigger": "axis", "axisPointer": { "show": true, "type": "shadow", "lineStyle": { "type": "shadow" }, "z": 0, "label": { "show": true, "color": "#ff

2020-08-14 21:20:36 607

原创 echarts 饼图悬浮背景透明

实现：1、可通过echat.dispatchAction默认悬浮展示浮层2、可调节radius进行文案居中展示效果如下图所示：可通过配置查看：echartsPieoption = { "backgroundColor": "#171A2A", "grid": { "top": 0, "left": "0%", "right": "0%", "bottom": "10%", "containLabel": true }, "tooltip": { "trig

2020-08-14 20:21:01 3243

原创 H5 页面布局 - 滚动条限制

描述：当一个H5页面有头部与尾部的时候，在滑动页面的时候，滚动条会盖在上面，覆盖页面上的所有元素，不大美观，如何做到跟真机一样的效果，直接在指定区域呢？如下：<template> <div class="Index"> <header>标题</header> <section class="content"> <router-link to="/index2"> <button&

2020-08-14 15:23:37 1068

原创百度、Google 埋点统计（Vue篇）

参考资料：资料一、Vue 使用百度统计在Vue单页面开发中接入百度统计代码时，如果直接按照官网的走会出现错误，就是_hmt找不到，这是因为在一个js文件里声明的变量在另一个js文件里是找不到的，所以需要把_hmt挂载到window对象下,这样_hmt成为了全局变量，就可以在任何地方访问了。1、在index.html下百度统计代码添加var _hmt = _hmt || [];window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到 (function () {

2020-07-23 17:48:52 2426

原创 Uncaught TypeError：Cannot read property 'call' of underfined

如图所示错误解决方案：npm i webpack@4.29.6 webpack-cli@3.1.2 --save-dev

2019-12-03 10:59:27 358

原创 nginx 去除井号操作 2

三步走vue-Router 路由配置const env = (process.env.NODE_ENV &amp;amp;&amp;amp; process.env.NODE_ENV.trim() === 'production');//页面导航export const router = new VueRouter({ //mode: &quot;hash&quot;, mode: env ? 'history' :...

2018-10-18 17:48:18 2530

原创 vue-loader@15.x VueLoaderPlugin 记录一下

报错：==vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.==目前，//两个方式都可以的，随便用一个const VueLoaderPlugin = require('vue-loader/lib/plug...

2018-08-25 15:42:37 3738

原创 H5 处理服务器返回的 excel 二进制流

当服务器计算excel ，返回数据超级慢的情况下，需要加入 loadding 显示，采用 xhr.responseType = 'arraybuffer' 设置类型，进行发送请求，回调回来的数据为二进制流，设置 window.navigator.msSaveOrOpenBlob 支持 ie10+，搜狗浏览器兼容模式场景！H5 处理服务器返回的 excel 二进制流加入 loadding...

2018-07-16 15:33:30 1376 2

原创 nginx 去除井号操作

Vue、React、Argular 路由去除井号操作寻找框架对应的路由中配置例如 Vue-Router配置：1、首先将路由的 mode 设置为 historyimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ mode: ...

2018-07-15 15:58:53 8394 2

原创 H5 Http请求403 - Referrer Policy

403错误    表示资源不可用。服务器理解客户的请求，但拒绝处理它，通常由于服务器上文件或目录的权限设置导致的WEB访问错误。遇到的情况：当访问 CDN 或者第三方资源的时候，经常会出现 403，例如：解决方案：<meta name="referrer" content="no-referrer" />&nb...

2018-05-17 20:23:12 7307

转载 Vue2.x 将页面中表格数据导出excel

Vue2.x 将页面中表格数据导出excel第一步：安装依赖npm install -S file-saver xlsxnpm install -D script-loader二、项目中新建一个文件夹：（excel—名字任取）里面放置两个文件Blob.js和 Export2Excel.js，文件在这里。三、在.vue文件中，写这两个方法：其中list是表格的...

2018-05-17 19:11:51 1769

原创 Webpack 3.X - 4.X 升级记录

Webpack 3.X - 4.X 升级记录先升级 webpack-cli首先：执行命令npm install webpack-cli -D或者npm install -g yarnyarn add webpack-cli -D启动服务出现的问题问题1：compilation.mainTemplate.applyPluginsWaterfall is not a ...

2018-02-28 18:29:33 25504 3

原创 Vue 实现6位数密码（iOS WebView卡顿优化）

在ios系统，原生 webview 嵌套H5页面使用时，编写完成的6位数输入密码，输入密码卡顿问题的解决方案：如下图：原因是因为，CSS 这块造成的。简单来说，style left 为负数的时候出现的，android 目测不会出现此问题input[type=tel] { opacity: 0; z-index: -1; position: absolu...

2018-02-25 18:10:13 1750

原创 Vue 记录 Cannot read property '_withTask' of undefined

如果在Vue使用中报这个错，那一定是你的引用找不到才会导致，比如说，你的@click事件，如下：<button @click="AAA" />其实，你的 AAA 方法并不存在，编译一开始没啥毛病，等你执行数据的时候，各种问题，如果页面数据量过大的时候，问题很难定位到哪里！解决方法：先写方法，后调用！...

2018-02-08 22:11:13 23825 2

原创 H5 Mock Server 汇总

什么是Mock Server数据？简单来讲，就是API （也就是服务器接口）没有写好前提下，前端无法进行调试，Mock Server 就是用来模拟Api接口返回JSON数据的服务！下面介绍 3 种 mock处理，同时也有很多第三方的，比如（jsonServer + mockJS、webpack + lorem-ipsum等等）：1、MockJSmockJS官网或者 Mo

2018-01-09 18:42:43 877

原创 Web markdown 使用

本想学习下 markdown 使用及其编写，可能是关键字查找不对，费劲半天没怎么查到结果也有很多 markdown 使用工具，但不是特别合适，下面介绍两个觉得不错的 web markdown 编写工具：1、https://stackedit.io/editor2、http://pandao.github.io/editor.md

2017-12-27 16:46:00 538

原创 Vue 组件与组件间的交互

父组件更改子组件的状态；子组件更改父组件的状态一开始使用的是 JS 的引用类型进行子父组件进行交互，比如：示例1：let str = { name:"张三"}console.log(str);str.name = "李四";console.log(str);示例2：父组件与子组件互通（使用 JS 引用类型，修改同一块内存地址，子父组件同时变化）<template>

2017-12-09 21:48:00 1885 1

原创 H5 图像识别

识别对比1、百度识别发现百度的图片搜索识别率不是特别，下面为测试图片跟测试后的结果：测试图片：下面为测试后的结果：2、采用 tesseract.js 后结果H5 图像识别（采用Tesseract.js 进行识别）简单的文案之类的，识别的还算可以，但是稍微复杂点的，准确率就不是那么好了，在学习中。。。安装<script src='https://cdn.rawgit.com/naptha/tess

2017-12-02 22:26:31 9075 4

原创 H5 语音合成播报功能

采用的 SpeechSynthesisUtterance实现语音播报功能，参考资料： ONE、TWO实现效果图：语法介绍1、speechSynthesis.getVoices()getVoices()的方法SpeechSynthesis接口返回的列表SpeechSynthesisVoice对象代表当前设备上所有可用的声音。2、speechSynthesis.cancel()cancel()的方法Sp

2017-11-27 20:18:57 17379 36

原创 window 下 bat 多条件判断

==多条件判断：（1）==chcp 65001@echo off choice /C dme /M "defrag,mem,end"if errorlevel 3 goto endif errorlevel 2 goto mem if errotlevel 1 goto defrag:defrag echo AAApausegoto end:mem echo BBBpausego

2017-11-19 16:35:37 33371 2

翻译性能优化 - 查看 webpack 打包后所有的依赖关系（webpack 可视化工具）

查看 webpack 打包后所有组件与组件间的依赖关系，针对多余的包文件过大，剔除首次影响加载的效率问题进行剔除修改，本次采用的是 ==webpack-bundle-analyzer==（可视化视图查看器）== 介绍1：webpack-bundle-analyzer（可视化）==将捆绑内容表示为方便的交互式可缩放树形图如下效果图：模块功能：意识到你的文件打包压缩后中真正的内容找出哪些模块组成最大

2017-11-16 15:28:24 38092

原创实战：Webpack 的 require 动态变量

1、问题描述：完全使用变量 let test = './less/Test.css'require(test);//报错 Uncaught Error: Cannot find module "."let test2 = 'Test'require("./less/"+test2 + ".css");//报错 Uncaught Error: Cannot find module "./le

2017-11-09 17:55:38 11281 2

转载动态调试JS脚本文件：（JS源映射 - sourceURL）与 debugger

问题描述：当你以动态的方式加载 JS 文件的时候（就是动态加载JS脚本），你就会发现，调试这个加载后的动态JS太过于费劲了，很难调试，那么，以下方案帮你搞定！解决方式1：sourceURL（源映射）—> //@ sourceURL=b.js 关键代码： //@ sourceURL=b.js (要调试当前文件的全名)PS：@符号和 sourceURL间必须有空格，否则达不到效果。例如：

2017-10-25 21:06:06 9843 3

原创外部访问 Vue 中的 methods方法及其属性

根据你未实现的功能，选择合适的例子。外部访问Vue的 methods 如下：例如1：var vm = new Vue({ el: '#app', data: { medd: 2, index: 1 }, methods: { add: function() { return vm.medd + v

2017-10-20 18:13:48 9107

翻译 Html页面与页面间的交互

HTML 页面与页面间的交互分别为：window.parent 与 window.opener两者简单介绍：1、window.opener 是 window.open 打开的子页面调用父页面对象window.opener 只是对弹出窗口的母窗口的一个引用。比如：a.html中，通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中，就可以通过window.opene

2017-10-19 15:05:58 6642

原创 webpack3.x文件配置

webpack3.x 配置webpack3.x 主配置webpack.config.js文件，每个模块的详细信息都有一定的注释，如果有不对的地方，还请指教！大纲： 1、创建package.json文件 2、创建.babelrc文件 3、创建webpack.config文件目前3个文件即可,下面具体介绍：一、基础配置1、首先全局安装webpack 的基础配置， npm i

2017-10-18 20:51:48 4958