随笔分类 -  vue3

摘要:1.依赖插件等无需每次打包都重新打包 vite.config.js文件中配置 export default () => { return { build: { sourcemap: false, manifest: true, rollupOptions: { output: { manualChu 阅读全文
posted @ 2024-03-10 22:06 月下云生 阅读(19) 评论(0) 推荐(0) 编辑
摘要:1.引入插件,js中修改css,安装vueUse npm i @vueuse/core (vueuse/core,VueUse是一款基于组合式API的函数集合,https://vueusejs.com/guide/) 2.定义全局css变量,在app.vue中 :root { --size: 14p 阅读全文
posted @ 2024-01-18 00:44 月下云生 阅读(1035) 评论(0) 推荐(0) 编辑
摘要:1.需求 在后台请求中有一些请求数据量比较大无法一下返回,需要增加loading动画,为了方便控制想在请求的时候增加一个参数isLoading,默认关闭,传真值时开启动画。这便需要拓展axios中增加个性化参数配置。但是如何进行类型的定义呢? 2.操作 如上,在做左边增加了isLoading参数,代 阅读全文
posted @ 2023-10-10 18:07 月下云生 阅读(819) 评论(0) 推荐(0) 编辑
摘要:在vue中引入图片等静态资源,由于部署的时候需要打包,打包后文件名字路径不一致,导致显示不了。以下为解决的几种方式: 1.样式直接引入: <div class="imgItem"> <div class="imgLogo"></div> </div> .imgLogo { width: 100px; 阅读全文
posted @ 2023-09-04 14:08 月下云生 阅读(64) 评论(0) 推荐(0) 编辑
摘要:vue3中ref,reactive等api和自定义组件等每个页面都要引入很麻烦,偷懒是人的天性,故引入自动导入插件,以此记录: 1.vue3的api自动导入 使用前: <script setup lang="ts"> import { ref, onMounted } from 'vue' cons 阅读全文
posted @ 2023-08-25 18:13 月下云生 阅读(161) 评论(0) 推荐(0) 编辑
摘要:在开源项目中发现canvas实现签名功能以此记录:http://www.youlai.tech/pages/52d5c3/ HTML: <div class="canvas-dom"> <el-button plain type="text" style="margin-left:20px;marg 阅读全文
posted @ 2023-08-22 13:54 月下云生 阅读(61) 评论(0) 推荐(0) 编辑
摘要:学习新的浏览器api:showOpenFilePicker,showDirectoryPicker,getDirectoryHandle,getFileHandle,removeEntry 之前文件上传使用的是: <input type="file"> 今天看到直接使用浏览器api即可实现文件读取, 阅读全文
posted @ 2023-04-10 19:03 月下云生 阅读(463) 评论(0) 推荐(0) 编辑
摘要:1.适用到自定义指令的场景 防抖、图片懒加载、一键 Copy的功能、拖拽、页面水印、权限校验、输入框自动聚焦、相对时间转换、下拉菜单 2.个人需求:在后台系统中,有很多表单提交组件,其中很多限制数字且限制条件不同。最初使用 oninput="value=value.replace(/[^\d]/g, 阅读全文
posted @ 2023-04-10 14:33 月下云生 阅读(4073) 评论(0) 推荐(0) 编辑
摘要:碰到运营提出需求,提供了一个.txt文件,要求输入框校验文件提供的敏感词汇,故以此记录: 上传文件: <input @change="uploadFile" type="file"> 操作函数: const fileContent = ref(''); const uploadFile = asyn 阅读全文
posted @ 2023-03-29 11:35 月下云生 阅读(1950) 评论(0) 推荐(1) 编辑
摘要:tesseract官网地址:https://tesseract.projectnaptha.com/ github:https://github.com/naptha/tesseract.js#tesseractjs npm安装依赖: npm install tesseract.js 页面引入: i 阅读全文
posted @ 2023-03-06 20:49 月下云生 阅读(3774) 评论(0) 推荐(0) 编辑
摘要:背景 做后台项目时避免不了excel文件上传,有的还要求对文件内容做校验,或者把文件内容转成数据上传保存. 操作 1.引入xlsx插件,最好安装指定版本,否则会报错 npm i xlsx@0.16.0 -save 2.页面引入 import XLSX from 'xlsx' 3.页面触发 <el-u 阅读全文
posted @ 2023-03-03 20:49 月下云生 阅读(3457) 评论(0) 推荐(0) 编辑
摘要:1.产品拿来淘宝后台页面,希望我们的快递发货也用这一套 长这样: 2.后端说提供的数据是树形结构,大区id不要传,传省的id,勾选哪个传哪个 3.element ui的树形插件和级联选择器在数据上是可以实现的,但是ui应该不行,最后决定用checkbox 多选框自己写一个 4.el-checkbox 阅读全文
posted @ 2022-12-21 18:11 月下云生 阅读(2000) 评论(0) 推荐(0) 编辑
摘要:在上一次创建vue3项目在tsconfig.json中配置了文件别名以后,格式校验提示 es3什么鬼,便去看了一下tsconfig.json的配置,以此学习 { "compilerOptions": { "sourceMap": false, // 生成目标文件的sourseMap文件 "stric 阅读全文
posted @ 2022-12-16 19:09 月下云生 阅读(1545) 评论(0) 推荐(0) 编辑
摘要:1.安装 vuedraggable npm i -S vuedraggable 2.在使用的组件,引入sortablejs包含在vuedraggable import Sortable from "sortablejs" 3.row-key 必须设置 <div class="list"> <div 阅读全文
posted @ 2022-12-07 10:45 月下云生 阅读(4810) 评论(0) 推荐(0) 编辑
摘要:在实际项目中遇到很多枚举的常量值,需要统一管理,在表格中需要把对应的值格式化成名称,以此记录: 1.在utils文件夹新建globalData.ts文件,用于存放全局的常量: const gobalData = { gradeList: [{ value: 1, name: '一等奖' }, { v 阅读全文
posted @ 2022-11-04 17:01 月下云生 阅读(45) 评论(0) 推荐(0) 编辑
摘要:在中后台页面的开发中少不了excel表格导出功能,以此做个记录: 1.后端返回下载地址: 直接:window.open("文件地址") 或者:window.location.href = "文件地址" 或者 :<a href="文件地址">导出</a> 2.后端返回列表数据(只能下载返回的数据) 安 阅读全文
posted @ 2022-10-08 00:27 月下云生 阅读(900) 评论(0) 推荐(0) 编辑
摘要:今天刚上班没多久碰到如下错误 好几个菜单点击都是报这个错误,点了加载不出来,然后报错。最初开始怀疑是不是路由改到了,查询了一遍没有问题。百度了一下,有说地址写错的,不能用 component: () => import('/@/views/ContentManage/Carousel.vue'),这 阅读全文
posted @ 2022-08-25 14:41 月下云生 阅读(14496) 评论(1) 推荐(1) 编辑
摘要:1.父组件 <Son v-model:dialogVisiblec="dialogTableVisible" :title="title" @callBack="callBack" /> 2.子组件 <script lang="ts" setup> import { ref, watch } fro 阅读全文
posted @ 2022-07-15 18:16 月下云生 阅读(661) 评论(0) 推荐(0) 编辑
摘要:// "vite": "^2.6.4", import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; // https://vitejs.dev/config/ 阅读全文
posted @ 2022-03-04 10:33 月下云生 阅读(940) 评论(0) 推荐(0) 编辑
摘要:听说pinia与vue3更配,便开启了vue3的学习之路(本文只适合vue3) pinia特点: 1.完整的 typescript 的支持 2.足够轻量,压缩后的体积只有1.6kb 3.去除 mutations,只有 state,getters,actions(这是我最喜欢的一个特点) 4.acti 阅读全文
posted @ 2022-02-10 16:07 月下云生 阅读(612) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示