chendf_-CSDN博客

定义import { createVNode, h, markRaw, reactive, resolveComponent, SetupContext, VNode } from 'vue'// px 方法用来增加 px 使用的interface StyleItemPropType { label: string className?: string contentClassName?: string isLine?: boolean}export const

2022-01-13 19:43:07 1373

原创如何使用Ts泛型写一个通用的遍历数组和对象的方法

如何使用Ts泛型写一个通用的遍历数组和对象的方法，支持异步，倒序遍历

2021-12-25 23:33:12 2756

原创一个基于vue3的通过函数式调用的弹框组件

因项目需求需要一个弹框提示，之前是使用elemne-plus，但是因为项目调整不使用第三方ui库了，所以简单实现下element-plus的elMessage（ps：只做了单弹框提示，并没有做多个。动画也没有～，感兴趣的小伙伴可以自己添加哦）处理svg的vite插件，并且全局注册使用message.vue<template> <div v-show="visible" class="r

2021-11-18 11:31:32 2872 4

原创记录下 typescript 使用 typeof 和 keyof 将一个对象所有的key定义为一个类型

typeofconst obj = { name: '测试', id: 1, children: { name: '测试-子', id: 2 }}// 定义类型type ObjType = typeof obj// 这个时候的 ObjType 的类型为 {name: string, id: number, children: {name: string, id: number}}keyofinterface Type1 {

2021-11-15 14:48:56 9158

原创如何编写一个vite处理svg的插件

手动实现一个vite自动处理svg的插件vite插件APIlimport { IndexHtmlTransformResult, Plugin } from 'vite'import { Dirent, readdirSync, readFileSync } from 'fs'import { join } from 'path'class SvgPlugin implements Plugin { private readonly _path: string[] | string

2021-09-28 17:18:37 693 4

原创 vue3 + elementPlus 自定义指令实现自动聚焦自动选中整数/小数点限制

定义指令/* * @Description: 自定义指令 * @version: 1.0 * @Author: chendf * @Date: 2021-04-12 14:03:32 * @LastEditors: chendf * @LastEditTime: 2021-04-22 15:38:44 */import { App, nextTick } from 'vue'// 根据el获取inputconst getInput = (el: HTMLElement): HTMLI

2021-07-19 19:17:07 1373 1

原创在vite项目中使用elementPlus在打包后设置语言报错

elemet-plus版本：1.0.2-beta.55按照官网文档进行配置import { createApp } from 'vue'import { ElButton, locale } from 'element-plus'import lang from 'element-plus/lib/locale/lang/zh-cn'import 'dayjs/locale/zh-cn'locale(lang)createApp(App).component(ElButton.name, E

2021-07-19 12:53:10 2373

原创手写vuex4.x持久化插件

vuex4.x持久化插件，将vuex缓存到sessionStorage中vuex插件定义插件useInitProvide.tsimport { Store, MutationPayload } from 'vuex'import {StateProps} from './index'// 这个是我自己存储的vuex的类型import ComponentService from '@componentService/index'// Nullable 为定义的一个全局类型 type Null

2021-06-11 10:12:28 591 2

原创在vue3中简单实现事件监听与分发(EventBus)

vue3 中简单实现事件监听与分发因为 vue3 不能通过创建实例新建事件总线，vue 3.0 移除了 on，on，on，off 和 once方法，once 方法，once方法，emit 仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序也可以使用第三方库比如 mitt，我这个只是简单处理事件创建 eventBus.ts 文件用于处理事件interface EventType { [key: string]: any}export default c

2021-06-03 14:53:47 3616

原创模拟拖拽控件到指定区域

需求：从左侧面板中拖拽控件到右侧画布区域，然后生成一个拖拽控件类型控件，需要修改拖拽时的样式因为没有找到合适的方式去修改拖拽中的样式和拖拽到非画布区域返回动画，所以手写了个utilsps: 改utils是ts版本的，如果需要js版本的，可以手动编译为js/** * 使用原生鼠标移动事件模拟拖拽 */type Nullable<T> = T | null | undefined// 监听的事件类型type WatchEvent = 'before' | 'start' | 'm

2021-05-14 18:34:45 587 1

原创记录下 typescript 中使用 removeEventListener 时无法去除事件句柄，导致 removeEventListener 失效

之前在写utils的时候遇到个问题，在ts中定义一个类里面使用 addEventListener 添加事件句柄，但是 removeEventListener的时候失效了。无法移出事件句柄，所以记录下解决办法interface Position {x: number, y: number}class Test { private position: Position = {x: 0, y: 0} constructor () { this._init() } // 初始化移动事件 priv

2021-05-14 11:38:06 961

原创 js实现元素拖拽功能

让元素实现拖动某个部位实现拖拽功能tips: 如果项目版本过低，不支持 ?? 或者 ?. 语法的，可以自行替换（将?删除使用&&判断，将??替换为｜｜）代码部分（如果有什么地方写的不好欢迎大家指正）const isDom = obj => { if (!obj) return false return typeof obj === 'object' ? obj instanceof HTMLElement : false}/* * options: { *

2021-04-29 16:39:12 973

原创 webpack打包关于插件的坑

compression-webpack-plugin插件文档安装使用 compression-webpack-plugin 插件对文件进行压缩npm i compression-webpack-plugin使用const CompressionPlugin = require('compression-webpack-plugin')// ...module.exports = { // ... configureWebpack: config => { config.

2021-04-25 14:13:45 745

原创解决编辑器无法识别webpack别名路径

解决在vue项目中，编辑器无法识别别名，导致没有路径提示，也无法通过路径点击进去改文件中jsconfig.json配置文档在项目根目录中添加 jsconfig.jsong 文件touch jsconfig.json配置 jsconfig.json 文件{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@utils/*": ["src/utils/*"],

2021-04-20 15:10:30 980

原创 vite根据环境变量配置代理

vite中根据环境变量配置代理地址安装需要装的包当前使用的的是 cross-env 来跨平台设置环境变量# 安装cross-envnpm i cross-env -D安装 dotenv 来加载环境变量文件。dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中npm i dotenv -D创建环境变量文件暂时我添加 dev 环境与 test 环境touch .env.dev .env.test修改 .env.dev 文件(代理

2021-04-13 20:02:12 10838 2

原创 vite批量导入文件，并且注册全局控件

记录下vite中如何批量导入文件在webpack中批量导入文件const modulesFiles = require.context('./modules', true, /\.vue$/)我使用的是vite+ts+vue3vite中导入批量文件，新建文件 glot.tsimport { App, Component } from 'vue'interface GolbComponentType { name: string, component: Component}

2021-04-13 16:32:16 4198 4

原创 vue3+ts中定义ref变量，设置变量类型

给定义的 ref 的值设置类型<template> <el-input ref="input"></el-input></template>//....import {Ref, ref} from 'vue'const input: Ref<HTMLElement> = ref(null)这样写之后会导致编译报错（vuetur报错）Type 'Ref<null>' is not assignable to type

2021-04-12 15:29:24 22081 8

原创 vue3踩坑之-Suspense

vue3 Suspensevue3新增了异步组件，和一堆api。。文档最近使用vue3开发中，需要在setup中使用async获取接口数据// ...async setup () { await $http.getUserInfo().then((res: any) => { //... 处理数据 }) await $http.getApplicationInfo().then((res: any) => {// ...}) return { //.... }}运

2021-04-09 11:39:58 13729

原创 vite+ts vscode无法识别别名路径

在vite+ts项目中，在vite.config.ts中配置了别名，在其他文件中使用别名，vscode会报错说找不到这个模块vite.config.ts配置// ...resolve: { // 配置别名 alias: { '@': path.join(__dirname, './src'), '@components': path.join(__dirname, './src/components'), '@utils': path.join(__

2021-04-08 12:20:58 13454 13

原创在vite中配置scss预处理遇到的坑

vite运行报错vite.config.ts配置css: { // css预处理器 preprocessorOptions: { scss: { // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了 additionalData: '@import "./src/assets/scss/var.scss"' } } }helloWorld.vue<style lang="s

2021-04-08 09:53:12 19129 3

原创配置vite.confgi.ts无法使用require

在配置 vite.config.ts 中无法使用 require在ts文件中使用require报错找不到 ”require“如果你只有一个使用require的文件，或者你这样做是为了演示，你可以在TypeScript文件的顶部定义require。declare var require: any如果使用的是 typeScript2.x 那么只需要安装以下包即可npm install @types/node --save-dev...

2021-04-07 15:20:20 10782

原创学习下Vuex

Vuex安装与使用使用核心概念StatemapState 辅助函数GettersmapGetters 辅助函数MutationsmapMutations 辅助函数ActionsmapActions 辅助函数Modules命名空间官网地址Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化修改状态的唯一途径就是显示的提交(commit) mutation。这样状态的变化才是可控的安装与使用安装通过 n

2021-03-09 12:59:44 243

原创记录下vue的$attrs和$listeners

文章目录$attrs$listeners如果设置了 $attrs 父组件某个参数，祖先组件也传递一样的参数，那么孙组件接受到的是谁的参数？$attrs官网上的类型是{ [key: string]: string }，但是我试了下，如果传递是的是个对象也是可以接受到的。所以我认为这个value应该为 any 类型类型：{ [key: string]: any } //{ [key: string]: string }只读详细包含了父作用域中不作为 prop 被识别 (且获取) 的 attr

2021-03-05 18:01:28 274

原创记录下JavaScript 的几种继承方式的理解

JavaScript的几种继承方式原型链继承原型式继承构造函数继承组合继承拷贝继承因为最近看到了js的几种继承方式，根据自己理解记录下来了原型链继承原型链继承就是将父元素的实例绑定到子元素的原型链上。这样子元素就继承了父元素和父元素原型链上的属性。function Parent () { this.a = 'a' this.fn = function () { console.log('fn') }}Parent.prototype.arr = [1, 2,

2021-03-03 16:26:02 396 8

原创记录下常用工具方法

常用工具方法

2021-03-02 16:21:22 255

空空如也

空空如也