Nighsloth的博客

vue 渲染 富文本

vscode快速配置vue空白模版

vue2,登录注册&路由守卫记录

vue3 router.push 传ref参数

vant3引入bug记录

vue3,css中使用变量动态修改样式

报错1 vue报错之Duplicate keys detected: ‘0’. This may cause an update error. – v-for循环的时候 没有绑定唯一的key值，循环的时候 key值是一样的，报错 报错2 end value has mixed support, consider using flex-end instead –解决方法 参考链接：https://stackoverflow.com/questions/70509055/postcss-preset-en

背景：请求接口后端返回的是url链接，这个链接双击打开是PDF文件， –原本用的iframe可以将文件显示到页面上，但iframe预览框不好设置样式。使用embed标签显示文档不能去掉黑边，所以用vue-pdf插件来显示PDF文件 –后端返回的接口数据类似如下 问题 –由于文件是后端存放在阿里云OSS上的，使用vue-pdf插件直接使用会报错跨域 –在控制台网络那里，这样发现问题的 –用了vue-pdf插件后，网络那里会有请求PDF文件，这里原本的样子是这样 –网上看了很多信息，说可能需要后端配..

实现效果 代码 1.template <template v-if="list.length != 0"> <tr style="text-align: center" v-for="(listData, index) in list" :key="index" > <td>{{ listData.settle_date .

背景 需求内有个扫码功能，后端会吧链接从接口返回给我，我把收到的链接转换成二维码显示到页面上 步骤 – step1.安装 npm install qrcodejs2 --save – step2. 引入 –1.可以在main.js 中全局引用（这种方式我会报错） –2.在使用的页面上局部应用 import QRCode from "qrcodejs2"; –step3.页面上写代码 <template> <div> <div> &l..

背景 需求需要表单提交的时候校验有效的邮箱，身份证信息等，把这些用到了的验证规则收集下来 代码 我实在data中写规则的，完全参照饿了么官网写的 //========自定义表单校验规则========== //邮箱验证 var checkEmail = (rule, value, callback) => { const regEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"..

官网效果 一般标题是默认居中的 –我要的效果 不默认居中 能够自己设置宽度 修改方法 –自己尝试了 !important和 不要scope样式，都失败了，而且为了避免样式污染，也不打算去掉局部样式 可以参考下图 参考链接1，这个写得超级好！！ –成功方法 方法一：style 穿透 //1 style穿透 测试 成功 // <style scoped lang="scss"> // .page-wrap { // position: relative; // heig.

想要的效果 做成这种可以滚动选择的效果 html代码 <!-- 标题 --> <div class="choose-title">选择路线</div> <!-- 集货道名称 --> <div class="track-group"> <div class="track-item" v-for="(item, index) in tr..

背景 有两个input框，v-model使用的相同数据，但是我的第二个input框需要它不能编辑，当然input框的值也不能修改，所以我打算用placeholder来显示input的数据 –效果 –代码 将v-model改成了 v-bind:placeholder=“holder” –js代码 ...

背景：用vue 脚手架新建了个项目，打算用scss写样式，第一次用，就一直报错一直报错。 快捷通道 如果不想看多个报错原因的，可以直接卸载安装好的node-sass和sass-loader,然后安装 “node-sass”: “^4.14.1”, “sass-loader”: “^7.3.1”,运行项目试试。 报错1:Failed to resolve loader: sass-loader –意思是项目没有安装sass-loader插件 –按以下图片方法直接安装，运行报错 报错2:Synt.

看了很多文章，发现是失败后再次点击上传，获取到的文件地址相同 -上传方法失败后的回调函数要清空 –完整代码 //上传文件 upfile(type, dom_id) { ............... //发起post请求 post(url, formData).then( (response) => { ........... setTimeout(() => { $(".show-result1").css("opacity", 0); .

背景 一个vue页面中，引用了两个对话框组件，只想对一个对话框进行样式设置（中间内容默认不居中，想让它居中），不影响另外一个，就不能用常规方法来设置 通用修改样式方法 比如这种 参考链接https://blog.youkuaiyun.com/HH18700418030/article/details/100124773?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai&a.

情况：确定数组是被修改了的，但页面上绑定数组的table页面第二次触发更新的时候没有效果 原因：可能是因为我用数组下标进行赋值，代码写得太乱排查不出来 解决方案：$nextTick() 参考链接 https://blog.youkuaiyun.com/rudy_zhou/article/details/107636944 ...

情况：vscode不正常退出，然后开项目node就打不开了 报错信息 解决方案 如图：我是9060端口被占用 第一行弄错了，从9060开始

感觉vue面试经常会问这个问题 官网解释 虽然v-if与v-show都是展示视图的效果，但是对于性能的优化来说，二者还是有区别的。 因为v-if只有条件为真的时候才会创建组件或者元素，而一旦为假，就会销毁该元素或者组件， 如果一开的时候条件为假，那么这个元素或者组件就不会被创建出来，而v-show则是不一样，就算一开的时候条件为假，也会被创建出来，之后就是用display none与display block进行简单的切换。 如果一个组件或者元素需要频繁的切换，就用v-show，如果在运行的时候很少改变.

背景：从仓库拉vue项目，切到分支上，一直打不开项目显示编译失败 报错信息 尝试解决 之前一直尝试删掉，重新到仓库拉项目，来回弄了两次一直都是这个问题，同事的电脑上就可以运行 解决方法 -1.百度很多，发现这个比较靠谱，可能是node版本太高，导致打不开项目 先放在着 白天尝试 参考链接：https://blog.youkuaiyun.com/weixin_43487782/article/details/106902721 -2.eslint辅助检查js代码 ...

背景：练习vue路由传参，发现多次点击相同路由控制台会报错 NavigationDuplicated: Avoided redundant navigation to current location: “/home”. 解决方法，在router文件夹下的index.js进行配置 / 解决点击相同路由报错 NavigationDuplicated: Avoided redundant navigation to current location: "/home". // 尝试了在main.js 中写 p.

上班第一天，发的Mac，配置环境 安装node 官网下载 node 查看版本号是否安装成功 npm -v node -v 安装vue sudo npm i -g vue 安装脚手架 sudo npm install -g @vue/cli －－其他部分vue指令参考－－ 查看版本号 vue -V 创建项目 vue create 项目名称 引入element-ui npm i element-ui -S 引入axios npm install axios -S ..

后台白名单 app.all("*",function(req,res,next){ //设置允许跨域的域名，代表允许任意域名跨域 res.header(“Access-Control-Allow-Origin”,""); //允许的header类型 res.header(“Access-Control-Allow-Headers”,“content-type”); //跨域允许的请求方式 res.header(“Access-Control-Allow-Methods”,“DELETE,PUT,POST,G

问题描述：想在Vue项目的页面中实现分页功能 代码 -页面上table组件 -页面上分页组件 -js的data的return中 -我套用的是elementUI中完整的展示方法 要在methods中声明两个函数方法 用的这个分页组件 在methods中声明方法 最终，table中的数据能够和分页组件绑定成功 ...

问题描述：elementui中tabs选项卡组件，点击不同的选项卡时触发的事件 使用官网中组件自带的方法 在 el-tab上绑定事件，注意，是el-tab上，不是el-tab-pane上绑定 在js中，fn1中传参，任意变量，打印台中打印出来，在打出来的Vue对象中有个index属性，就可以获取到点击每个不同的tab时，会拿到不同的index,第一个el-tab-pane的index就是0，第二个el-tab-pane的index就是1，以此类推。 此外，elementUI中的tab..

elementui中table组件只有横向的样式，如果需要纵向效果只能自己写 我的代码效果 写成了两个表，代码如下 第一张表做纵向表头 第二张表做内容 js代码 最终实现最上图的纵向table效果图

我们能够直接在elementui官网的api中找到table组件，常规样式如下 自定义表头 添加slot=header 代码 效果