随笔分类 - vue
前端框架
摘要：1、问题：vue里面使用js引入本地图片会出现引入路径不对的情况 2、原因：在vue的js里面引入本地图片的路径会被webpack等打包工具识别为字符串处理而找不到 3、解决、使用require let img = new Image(); img.src = require("./assets/0
阅读全文
摘要：1、需求：项目需要saas化，多个客户配置到不同的服务器需要重新配置接口的域名，比较麻烦，所以要求根据当前域名来自动获取域名 2、思路：根据process.env.NODE_ENV属性判断环境，然后用window.location.hostname获取域名 3、实现： vue中的process.en
阅读全文
摘要：在vue里面$mount方法是挂载的方法 this.$mount().$el就是把当前组件挂载在页面然后获取当前页面dom const node = this.$mount().$el
阅读全文
摘要：如果想在vite中批量导入某些文件，实现项目的模块化，vite提供的import.meta.glob函数就很好用 比如用在路由模块化： 1、需求：不想把路由文件全部放在一个文件里面，找的时候要拖动很麻烦，就想着把每一个模块的路由按功能分成单个的文件 2、思路：在routers文件夹内新增一个modu
阅读全文
摘要：1、问题：接手一个之前的项目，要重新调整一下样式，在main.js引入.scss文件时报错了，看了package.json，里面node-sass、sass-loader都安装过，.vue里面也可以使用scss 2、原因： 他这个项目用了webpack，在webpack.base.conf.js里面
阅读全文
摘要：tinymce相比wangEditor是一个功能多一点的富文本。 在vue中引入文件，也可以直接去官网下载，下载文件网址是 https://www.tiny.cloud/get-tiny/self-hosted/ npm install tinymce -S npm install @tinymce
阅读全文
摘要：1、在vue中正常来说父子组件传值一般用props属性单向传值，发现有更简洁的方式，就记录一下 2、原理：利用this.$emit("update:xx",value)和xx.sync 3、实现： 在父组件中 <component v-for="(item, index) in formItemLi
阅读全文
摘要：1、需求：有些展示的数据是静态的，没有那么美观，就想着加点增长特效 2、思路：处理成一个组件，往里面传值的时候，会根据特效时长，特效间隔等逻辑处理并返回值 3、实现 <template> <span>{{ carrier }}</span> </template> <script> export d
阅读全文
摘要：1、问题：重新安装volar后，打开vsCode看.vue无高亮 2、思路：之前有过一次vetur的经验，这次刷刷刷就解决，应该就是vsCode重复安装插件导致插件某些配置出问题，直接到vsCode放插件的文件夹，删除volar文件，重新安装，简单粗暴。 3、操作： 到vsCode插件文件夹删除插件
阅读全文
摘要：1、需求：用户需要在两个缓存的页面切换查看数据，但是在keep-alive里面的element的滚动条会自动置顶。 2、思路：利用自定义指令给element的表格绑定，监听滚动条变化并记录，同时设置一个变量记录页面并在路由切换时刷新，当页面滚动时记录页面和页面table的位置，当路由切换时就把当前记
阅读全文
摘要：1、需求：要在小程序中展示新手指引富文本，某位吃饱没事做的后端拉着我要弄一个pc端编辑富文本的页面。 2、思路：pc端wangEditor怼上去就好，比较注意的就是自定义的视频上传，小程序端要注意的就是视频不能用微信自带的rich-text去展示 3、实现 视频自定义上传 .vue createWa
阅读全文
摘要：1、vue3有一个开箱即用的功能Fragment，什么是Fragment呢？就是可以在template里面内嵌多个dom节点的功能，在写组件时候可以不用再创建不必要的节点。 2、不过这是vue3的，还有很多项目目前都是vue2的，想在vue2里用Fragment怎么办呢，可以用vue-fragmen
阅读全文
摘要：1、简介：项目需求要弄一个数据录入表格，数据比较多并且是可编辑，按键切换输入框，左侧固定列等等，一开始表格是直接用的element，用着用着已经不满足需求，编辑数据多的时候慢的不行编辑还卡顿。 2、解决经历：一开始是打算用patch-package修改element源码的，然后发现引入的elemen
阅读全文
摘要：1、简介：jsPlumb是一个用于画流程图线的一个开源库。 2、体验： 2-1、引入jsPlumb npm install jsPlumb --save 2-2、在文件里引入 import { jsPlumb } from 'jsplumb' 2-3、连接两个div let _this = this
阅读全文
摘要：1、思路：通过设置html的data-theme属性来设置主题，利用css属性选择器判断识别，设置不同主题的sass变量，再利用sass的混和指令和样式来设置不同主题的主题色。 2、实现： 2-1、先在html上绑定data-theme属性，设置默认主题 <html lang="" data-the
阅读全文
摘要：1、需求：当用户打开多个页面的时候，tab还要手动一个个点击删除就很麻烦，就需要一个批量删除的功能，比如右击弹出一个菜单进行批量删除 2、思路： 2-1、先弄一个全局定位的菜单模块，隐藏掉 2-2、给tabs绑定一个虚拟dom，获取它里面的子dom列表，因为游览器右击会有默认菜单，所以需要对子dom
阅读全文
摘要：问题：赋给在data中对象新的值时，不更新 分析：由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。 解决： 1、初始化属性的时候给根属性初始化一个空值就可以了 2、使用 Vue.set(
阅读全文
摘要：问题：在表格里需要先判断是否有值再进行过滤，而直接在三元运算里写 data | functionName会报错 解决： <el-table-column width="140" prop="completeTime" :label="$t('orderList.completeTime')"> <t
阅读全文
摘要：简介：提交表单时经常用到枚举，获取数据类表时也要用枚举分解状态 思路： 1、请求后台接口获取枚举，保存进localStorage和vueX，每次进入时从localStorage获取枚举保存进vueX，不用反复请求 2、从Store获取枚举设置方法分解枚举，通常用于表格状态 3、利用mixin把枚举混
阅读全文
摘要：vue里有两种调用组件的slot信息的方法 第一种 <template slot-scope="scope"> 第二种 <template v-slot="scope"> 而第二种可以解构 <template v-slot="{ row, $index }">
阅读全文
