vue.js
关注
分享
扫一扫
vue.js操作项目过程中的问题
2025专业AI写手!
世上无难事，只要肯攀登 ---教员
“AI赋能探索者”
展开
-
vue3实现文本超出鼠标移入的时候文本滚动
鼠标移入的时候判断，此处使用了tailwindcss，注意一下要设置文本不换行。原创 2023-10-07 17:12:55 · 653 阅读 · 0 评论 -
Vue UI组件库表格单元格合并实践
【代码】Vue UI组件库表格单元格合并实践。原创 2022-11-23 14:25:01 · 428 阅读 · 0 评论 -
javascript每日一题:找出数组中出现次数最多的元素
javascript算法题原创 2022-07-20 09:46:12 · 2730 阅读 · 0 评论 -
vue/javascript删除对象属性
javascript&&vue删除对象中的属性.原创 2022-07-11 15:33:21 · 486 阅读 · 0 评论 -
【vue】去掉地址栏上的参数
this.$router.push({ query: {} })原创 2021-12-17 14:03:53 · 1645 阅读 · 0 评论 -
【VUE】利用正则表达式给特定的文本添加颜色
<div v-html="filterWord(activity.optdesc)" ></div> filterWord (text) { if (text) { return text.replace(new RegExp('(点击查看子流程工单;)', 'g'), '<font color=#f89407>$1</font>') } },原创 2021-12-14 09:36:33 · 1075 阅读 · 0 评论 -
Vue3中的Composition-Api
本文将介绍Vue3中的新增杀器 —— Composition API : 一组低侵入式的、函数式的 API，它使我们能够更灵活地「组合」组件的逻辑。如上图，在较大组件的编写中， Composition-Api 可以把复杂组件的逻辑抽地更紧凑，而且可以将公共逻辑进行抽取。 setup 它为基于 Composition API 的新特性提供了统一的入口。Composition-Api1.reactive()reactive() 函数接收一个普通的对象，返回出一个响应式对象。在Vue2.x的版本中原创 2021-10-21 17:31:45 · 333 阅读 · 0 评论 -
Vue3实践（3）：使用vue-cli创建Vue3.0项目
使用CDN还是有很多不方便的，比如要使用到组件等等...所以我们还是使用vue-cli来创建Vue3.0的项目使用脚手架命令创建项目 vue create vue3_test过程中如果报错，且报错如下：No matching version found for @vue/cli-plugin-babel@~5.0.0.升级vue-cli可解决 npm i -g @vue/cli@next 后面还有一步 是否选择 vue3.0的操作 记得选 (忘记截图了)然后就是等待 --------原创 2021-10-20 10:41:14 · 510 阅读 · 0 评论 -
Vue3实践（2）：setup函数
setup() 函数是Vue3.0中，专门为组件提供的新属性。它为基于Composition API 的新特性提供了统一的入口。在Vue3中，定义methods、watch、computed、data数据都放在了setup()函数中1.执行时间setup函数会在生命周期的beforeCreate之前执行代码验证 Vue.createApp({ beforeCreate () { console.log('beforeCreat原创 2021-10-20 09:50:53 · 530 阅读 · 0 评论 -
vue3实践(1):学习模板
刚学习的话建议从cdn上手了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-10-20 08:54:16 · 194 阅读 · 0 评论 -
已解决：cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本
以管理员身份运行power shell输入set-ExecutionPolicy RemoteSigned输入A 回车ok原创 2021-08-27 18:44:12 · 533 阅读 · 0 评论 -
【VUE】获取iframe中的img元素，并设置宽高
iframe<iframe id="preview" @load="deliverToken" :src="imgrc" frameborder="0"></iframe>jsdeliverToken(obj) { this.$nextTick(() => { let obj = document.getElementById('preview').contentWindow obj.document.getElementsB原创 2021-08-13 17:22:39 · 3066 阅读 · 0 评论 -
【VUE】i18n实现全局化的一些思路
项目中频繁用到中英文切换 导致一个全局的 控制中英文的 中心化操作显得非常紧要，但是由于不确定因素导致迟迟未能去开始这一切，接下来我将对这些因素逐个分析，并且实现中心控制中英文...使用 localstorage 全局储存中英文如何在页面不需要的时候 将语言设置为中文哪些操作需要进行语言的清除呢…1.从用户的角度来看，我从登录到下线…都只会用一种语言那么我们要确保的是这种语言 “不间断” … 就是说 我切换页面等…不会影响语言的视觉感官.所以我们可以在 “登录” 时选择将语言 “原创 2021-08-10 11:03:50 · 986 阅读 · 0 评论 -
【VUE】监听地址栏的变化
watch:{ $route(to,from){ console.log(to); }},原创 2021-08-10 09:29:24 · 877 阅读 · 0 评论 -
【VUE】使用swiper时轮播失效的BUG-已解决
场景使用swiper每次到最后一张就停止轮播了 设置的 loop: true 仿佛没有效果原因在vue的v-for中时，异步加载的数据都还没有返回时，就先加载了Swiper组件并复制了sliper解决确保异步数据获取完 再显示swiper 用v-if判断. <swiper ref="mySwiper" :options="swiperOptions" style="height: 360px" v-if="lunbo.length"> </swiper>原创 2021-08-09 10:05:59 · 1170 阅读 · 0 评论 -
【vue系列】高度宽度不等的图片列表自适应
效果图html<div class="goods-img-box"> <img class="goods-img" :src="goodData.goods_imgs[imgindex]" /> </div>javascript.goods-img-box { width: 418px; height: 418px; display: table-cell; vertical-align: middle; t原创 2021-07-20 19:48:13 · 581 阅读 · 0 评论 -
【vue】ELEMENT el-upload删除图片 对应提交数据同步删除的问题
用于解决 展示图片列表 跟提交数据 使用数据不一样的问题 handlexxRemove(file, fileList) { //删除 let url = file.response.url; let idx = this.ruleForm.brand_body_img.findIndex(e=>e==url); //获取删除元素的下标 this.ruleForm.list.splice(idx,1) //执行删除操作 console.原创 2021-07-08 11:03:46 · 687 阅读 · 0 评论 -
【vue】点击使用新标签打开页面（跳转）
这是我封装的函数 可以使用 也可以改进 goBrandDetail(id) { let routeUrl = this.$router.resolve({ path: "/brand", query: { brand_id: id }, }); window.open(routeUrl.href, "_blank"); },原创 2021-07-07 15:24:56 · 2039 阅读 · 0 评论 -
【vue系列】判断对象中是否存在属性
实例 判断 obj 中是否含有 a 属性obj.a !== undefinedtrue 存在false 不存在原创 2021-07-07 11:41:07 · 5817 阅读 · 0 评论 -
【VUE】VUE+ELEMENT运用el-upload结合vod-js-sdk-v6实现腾讯云点播视频上传-2021
为什么强调2021 因为以前的API很多都改了。踩了不少坑。 前人栽树 后人乘凉 ------------npm install vod-js-sdk-v6 安装点播vue组件 upio.vue<template> <div> <input :id="id" type="file" style="display: none" name="single" mul原创 2021-06-23 11:36:27 · 807 阅读 · 0 评论 -
【vue系列】i18n监听中英文变化
watch: { '$i18n.locale'(newValue) { console.log('zha') if (this.$i18n.locale === 'zh-CN') { console.log('zh') } else if (this.$i18n.locale === 'en-US') { console.log('eh') } } },原创 2021-06-19 09:56:17 · 1388 阅读 · 2 评论 -
【Vue系列】Element Radio组件label绑定的值不显示
<el-radio v-model="radio" label="1"></el-radio>会出现如图这种效果这时候我们就想把“1”隐藏 ，这时候怎么做呢，可以用下面这种方法 <el-radio v-model="radio" label="1">{{''}}</el-radio>原创 2021-06-08 15:46:18 · 2103 阅读 · 0 评论 -
【正则表达式】验证国内外邮箱可用
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/原创 2021-06-08 14:58:54 · 2662 阅读 · 1 评论 -
【VUE】现在有一个text文本框，当点击一下按钮，让内容加1，请用vue写
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title></title> </head> <body> <div id="app"> <!-- 现在有一个text文本框原创 2021-06-04 10:28:37 · 1069 阅读 · 1 评论 -
【VUE系列】实现随机换一换功能
如图所示，需要实现点击换一换,随机切换列表实现定义 showActive:[0,1,2,3], //储存需要渲染的索引 list:[], //后台返回的数据列表JSreplace(){ var a = []; var j= 0; while(j<4){ var b = Math.floor((Math.random()*this.showData.activity_list.length));原创 2021-06-03 15:15:15 · 869 阅读 · 0 评论 -
【VUE系列】获取元素宽度高度等
获取元素宽度给元素绑定个 ref 如<div ref="divWidth">测试</div>使用函数获取//可以输出如下对象，查找到宽度clientWidth 高度 clientHightthis.$refs.divWidth//分割this.$refs.divWidth.clientWidth; //宽度this.$refs.divWidth.clientHight; //高度...原创 2021-05-25 19:55:39 · 1014 阅读 · 0 评论 -
【js】带[的字符串如何转成数组“[1,2]“
今天碰到一个问题 后台返回给我的数据是 “[1,2]” 这种格式的数据…但是放在插件显示不了，需要数组类型的数组才能显示刚开始我还以为要用正则匹配…后面问了技术群 才知道可以用JSON.parse下面是示例 (在chome里面调试的)let arr = "[1,2]"//undefinedJSON.parse(arr)// [1, 2]下次要好好研究一下JSON这个api了...原创 2021-05-20 19:36:19 · 8708 阅读 · 1 评论 -
【JS】两个数组对比，去掉其中一个数组中没有的元素
情景 A B两个数组 A = [1,2,3,4] B = [4,,5] 需求 B去掉A中没有的元素实现代码B=b.filter((item) => A.includes(item));原创 2021-05-20 17:21:23 · 2583 阅读 · 0 评论 -
【vue系列】修改滚动条样式
记录，用时摘取::-webkit-scrollbar { width: 5px; height: 1px;}::-webkit-scrollbar-thumb { //滑块部分 border-radius: 5px; background-color: rgb(175, 74, 240);}::-webkit-scrollbar-track { //轨道部分 box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #ed原创 2021-05-18 11:29:50 · 344 阅读 · 0 评论 -
【vue系列】动画数字自加载实现方案
方案采用 animate-number 插件效果使用npm install vue-animate-number <animate-number from="1" to="10" duration="1000" easing="easeOutQuad" :formatter="formatter" ></animate-number>formatter 用来处理最后显示的数据(官方文原创 2021-05-15 18:10:46 · 558 阅读 · 0 评论 -
【vue系列】巨坑-element-ui报错 custom validator check failed for prop “percentage“
浪费了我一堆时间搜索了很久 尝试了许多方法 …基本上都是说加个 v-if …写这篇文章是希望能帮到更多的人 少走一些弯路吧…percentage 只能是 0-100 超出100就不行了 需要对percentage进行控制转化...原创 2021-05-15 09:42:52 · 911 阅读 · 1 评论 -
【VUE系列】antv组件Chart等动态更新视图不更新
以下是我调用antv的组件，这个sale_list会动态更新（切换项目）,但是数据更新之后视图并没有更新，是因为sale_list一直存在，所以图表不会重新画，想要更新图表，就得让这个图表重新画 <SaleChannel v-if="projectData.sale_list" :data="projectData.sale_list" />采用方案 that.projectData.sale_list =原创 2021-05-14 09:58:03 · 1661 阅读 · 0 评论 -
【vue系列】ELEMENT :before-upload 阻止上传PDF等文件
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"&原创 2021-05-13 17:14:30 · 1915 阅读 · 1 评论 -
【已解决】swiper拖动过后轮播停止 --- 2021最新可用
autoplayDisableOnInteraction 是不可用的查看官方文档 可以发现 有专门针对这种情况的一个功能，如图所示而下面也有他的用法直通车>>>>在网上搜了一堆 发现大部分都是抄写互抄 根本就没实践过的…因此浪费了不少时间…建议大家有问题优先查看文档好一点....原创 2021-05-07 10:13:29 · 646 阅读 · 0 评论 -
【vue系列】vue创建项目报错 ERROR ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode
C盘的用户文件夹里面找到 .vuere 文件删除就行了至于具体哪个文件 要看你怎么分区了 有的人 就是 用户 有的人是 Administrator 找一下就行了原创 2021-04-14 17:17:12 · 574 阅读 · 0 评论 -
【vue系列】 vue add 和 npm install 的区别
使用vue add 的时候会提示意思就是可能会改变项目结构而 npm install 则不会改变现有项目结构可以先使用npm 安装原创 2021-04-14 15:38:10 · 727 阅读 · 0 评论 -
【vue系列】2021新建vue项目
vue create hello-world回车等待 - - - -原创 2021-04-14 14:54:02 · 396 阅读 · 0 评论 -
【vue系列】空格失效使用占用符
有以下各种占位符 本人用  解决了需求问题 如有需要需要多做尝试  == 普通的英文半角空格  == ==   == no-break space （普通的英文半角空格但不换行）　 == 中文全角空格 （一个中文宽度）  ==   == en空格 （半个中文宽度）  ==   == em空格 （一原创 2021-04-07 13:54:09 · 1687 阅读 · 0 评论 -
【vue系列】动态绑定背景图片-本地图片线上图片
本地图片示范:style="{'background-image': 'url('+bgImg+')','background-repeat': 'no-repeat','background-size': 'cover'}"js bgImg:require('../../assets/newlogimg.png'),ps：线上图片可以去掉 require原创 2021-04-06 11:43:05 · 1024 阅读 · 0 评论 -
【vue系列】在router.beforeEach中跳转
我目前项目基于element-ui+vue+router架构的平台，我会每天总结一点遇到的坑和解决方案，以备后续查阅解决。需求描述用户跳转到固定页面时，判断用户是否登录，未登录使用element的 $confirm弹窗跳转登录。无法使用router.push。。等。解决方法 Vue.prototype.$confirm('请先登录获取查看权限', '提示', { confirmButtonText: '前往登录', showCancelButton:false,原创 2021-04-01 11:06:56 · 1601 阅读 · 1 评论