quill 编辑器图像处理 如何找到对应位置的源码。 目前我是无法直接找到的，我是通过搜索网上的答案或者 debugger 才能够对应源码，我做不到短时间内了解一个库的完全流程，所以看我文章的人也不必焦虑。慢慢debugger了解部分源码就行 quill 为什么粘贴图片时为base64 项目使用的版本是1.3.7 quilljs/quillat 1.3.7 (github.com) https://github.com/quilljs/quill/blob/0148738cb22d52808f35873adb620ca56b1ae061/modules/clipboard.js#L60 1this.quill.root.addEventListener('paste', this.onPaste.bind(this)); https://github.com/quilljs/quill/blob/0148738cb22d52808f35873adb620ca56b1ae061/modules/clipboard.js#L108 123onPaste(e ...

react 项目部署github生成page点击setting 里面的 setting 页面，复制箭头的网址 项目下载gh-pages1yarn add gh-pages -D 在package.json 的 scripts 里面加上下面的一句话， dist是你编译后的文件夹名字（相对目录）， 以及添加一个homepage字段，就是刚刚复制的网址 1"scripts": {"deploy": "gh-pages -d dist"} 编译注意， 这里打包的相对路径要改一下，默认是’/‘, 要改成’./’,以vite打包工具为例 12export default defineConfig({ plugins: [react()], base: './'}) 运行 yarn build 进行编译， 默认是打包到dist文件夹，如果你修改了打包位置， 上面的deploy命令最后一个参数也要随着修改 提交运行 yarn deploy, gh-p ...

ts is 类型保护1234567function isString(test: any): test is string{ return typeof test === "string";}function example(foo: any){ if(isString(foo)){ console.log("it is a string" + foo); console.log(foo.length); // string function // 如下代码编译时会出错，运行时也会出错，因为 foo 是 string 不存在toExponential方法 console.log(foo.toExponential(2)); } // 编译不会出错，但是运行时出错 console.log(foo.toExponential(2));}example("hello world"); h ...

ts 将某个类型转为可选的1234export interface ClientModel { idCardFront: string;}export interface NewInter extends Omit<ClientModel, 'idCardFront'> { idCardFront?: string;}

vue 权限控制的思考我们的项目一般来说分为三个部分 - 路由控制 - 组件控制 - 接口控制 但是公司的后端是只处理了接口。针对接口进行控制。 在这样的前提下， 对权限控制进行一下梳理 路由控制一般来说在 route 的 mate 里面添加权限。 然后 beforeEach的时候对权限进行判断。没有对应的权限就跳到404页面 组件控制在网络中搜索，一般都是用自定义指令进行处理。 但是这样有一个问题。他需要挂载后然后移除子元素 我认为可以用 v-if 来省略这个问题 伪代码 123456789101112131415161718192021222324<template> <template v-if="hasPermission"> <slot></slot> </template></template><script lang="ts">export default { prop: { perm ...

vue3 延迟显示 loading仓库地址 https://github.com/abigmiu/vue-delay-loading 用途： 在 x 秒后显示 loading 比如 x = 300 现在请求一个接口。 用时500ms 就会在 300 - 500 这个时间段显示 loading 如果用时 200ms， 就不会显示 loading 用法： 123456789101112<script setup lang="ts">import { ref } from 'vue'const loading = ref(true)setTimeout(() => { loading.value = false}, 5000);</script><template> <div> <div v-loading:2000="loading"></div> </div></tem ...

webpack5 多页面打包配置确定页面结构123456├── package-lock.json├── package.json├── postcss.config.js├── src 代码├── tsconfig.json└── webpack.config.js webpack配置文件 12345src├── assets 静态资源├── models ts 定义├── pages 页面└── scripts 一些工具函数 123456789src/pages├── course│ ├── index.html│ ├── index.ts│ └── style.scss├── course-intro│ ├── index.html│ ├── index.ts│ └── style.scss 步骤1. 安装 webpack1npm install webpack webpack-cli -D 配置package.json. - ...

webstorm使用live-server最近从vscode切换到了webstorm，但是苦于webstorm没有live-server插件不太方便，下面说一说webstorm怎么使用live-server，主要原理就是下载live-server这个npm包 玩过前端开发的都应该知道有局部安装和全局安装两种方式吧。你可以自由选择 安装live-server很简单，我是用yarn全局安装yarn global add live-server 使用live-server如果你是全局安装的l， 然后直接在终端输入live-server显示命令行无效，那么就是没有添加到环境变量， 自行搜索npm 全局安装包在那，yarn的全局安装包位置是bin文件夹，也有可能你自定义了名字。哎呀，怎么都是自行搜索呢？🙃 因为我懒啊 使用npm脚本运行也是很简单，在package.json 里面自行添加一个scripts就行 1{ "scripts": { "dev": "live-server" },&# ...

一次 vue 跨组件通信方法的选择 需求分析这是一个对话框页面。分为 对话列表 对话输入 角色选择 三个组件 对话列表（1）依赖对话输入（2）和角色选择（3）两个模块的内容。 在对话列表里面点击编辑的时候。 2 和 3 的内容也需要对应改变。 这样就形成了相互依赖 第一次尝试 - props使用 props 传值。1 是父组件，2和3是子组件。设计一个 editId用来表示是否在编辑某段话。如果editId为0就表示新增。看起来挺简单也是挺符合要求的，但是写着写着，要处理的边界条件太多。props一大堆。加上所有的状态都保存在1里面。导致代码十分长。不易于分辨。遂放弃这种方式 第二次尝试 - eventBus由于没有事先在脑海里理清哪里需要传值。一上来就写代码。导致后面越来越多的 on 和emit。无法辨别值究竟是从哪里传过来的。又又放弃。 最后一次 - pinia也就是用仓库的方式进行数据渲染。把状态， 事件什么的全丢 store里面去。 这样方便管理多了。 1234567891011121314151617181920212223242526272829import { ...