vue
vue知识
小仙女de成长
啊麻利麻利哄
展开
-
vue粒子特效
vue粒子特效转载 2023-02-17 09:08:00 · 640 阅读 · 0 评论 -
vue中实现a标签下载本地文件的功能
思路就是创建a标签,去实现下载原创 2023-02-15 14:51:07 · 1114 阅读 · 0 评论 -
axios上传二进制文件源码
axios上传二进制文件源码原创 2023-02-15 09:34:45 · 585 阅读 · 0 评论 -
解决:ERESOLVE unable to resolve dependency tree
在安装项目依赖时,很大可能会遇到安装不成功的问题,其中有一个很大的原因,可能就是因为你的npm版本导致的。转载 2023-02-13 10:39:26 · 293 阅读 · 0 评论 -
新增一级菜单和子菜单
新建主菜单+子菜单转载 2023-01-31 16:46:43 · 322 阅读 · 0 评论 -
vue使用diff-match-patch和codemirror实现文本对比
vue使用diff-match-patch和codemirror实现文本对比转载 2023-01-30 17:18:29 · 2191 阅读 · 3 评论 -
echarts在vue中的应用
echarts在vue中的应用转载 2023-01-30 09:39:38 · 166 阅读 · 0 评论 -
vue中禁止页面滚动/滚动事件穿透
vue中禁止页面滚动/滚动事件穿透转载 2022-08-19 10:04:33 · 756 阅读 · 0 评论 -
JS模块化
用export导出,用import引入原创 2022-07-26 21:01:00 · 203 阅读 · 0 评论 -
Uncaught (in promise)的解决方法,可能原因
Uncaught (in promise)的解决方法,可能原因转载 2022-06-27 09:54:07 · 15279 阅读 · 0 评论 -
vue的for循环如何动态添加input框demo
vue的for循环如何添加input框原创 2022-06-27 09:43:04 · 1443 阅读 · 0 评论 -
富文本图片太大溢出以及富文本显示问题
优化之前,图片太大解决方法:1、在common 目录下新建 index.js:/*graceUI rich-text 加强工具link : graceui.hcoder.netauthor : 5213606@qq.com 深海*/ // 正则变量var graceRichTextReg; // 批量替换的样式 [ 根据项目需求自行设置 ]var GRT = [ // div 样式 ['div', "line-height:2em;"], // h1 样式.转载 2022-05-25 10:41:02 · 1724 阅读 · 11 评论 -
v-for生成<el-input赋值的问题
如果copywrite是数组值为:['方案1','方案2','方案3'],然后我通过copywrite的个数生成<el-input,el-input的值就是数组每个值,这时应该怎么给每个<el-input赋值<el-input v-for="(item,index) in copywrite" :key="index"></el-input>回答:<el-input v-for="(item,index) in copywrite"转载 2022-05-16 13:03:53 · 1524 阅读 · 0 评论 -
Vue中input被赋值后,无法再修改编辑的问题及解决
https://www.jb51.net/article/245758.htm项目场景:前端实现查看编辑功能的时候会出现, input框赋值后input框不能进行编辑,编辑之后自动取消,验证无法进行取消https://www.jb51.net/article/245758.htm问题描述:数据代码:<el-textarea v-model="drawerForm.msg" placeholder="请输入功能描述转载 2022-04-27 13:16:23 · 1475 阅读 · 0 评论 -
后端返回的文件流,前端如何下载
首先配置axios// 下载公用方法const reqDown = (method, url, params) => { return axios({ method: method, url: process.env.URLPATH + url, responseType: 'blob', data: params }).then(res => res.data);};然后在调用接口后 let blob = new原创 2022-04-25 14:24:53 · 4267 阅读 · 0 评论 -
VUE项目(单页面)问题之:从详情页返回列表页时返回到上次滚动位置,并还原列表页所有点击、搜索等状态
用 keep-alive 及 scrollBehavior 完美解决。第一,在 App.vue文件中,给路由加上 keep-alive第二,在 路由文件中 :router/index.js,给被要被缓存的页面设置 meta 属性(这里就是列表页),不需要缓存的视图,不用添加第三,在详情页里面设置 beforeRouteLeave设置完这些,点击浏览器后退按钮,页面返回列表页,但没有之前的位置,下拉滚动条,发现所有的状态已经被保留了最后一步, 实现...转载 2022-03-25 16:42:49 · 697 阅读 · 1 评论 -
JS导出网页所有内容为excel
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> table { border-collaps.转载 2022-02-17 14:23:48 · 257 阅读 · 2 评论 -
vue-cli 3 跑项目时卡在 ‘98%’ after emitting CopyPlugin
前言: 今天跑项目中突然发现这个问题,卡在这里,也不报错,就是服务不运行,重置命令这些都不么用出,最后找到问题了,记录下;症状:转载 2022-02-17 13:23:47 · 967 阅读 · 0 评论 -
Vue解惑——axios中this的指向问题
Vue解惑——axios中this的指向问题转载 2021-12-08 17:02:22 · 814 阅读 · 0 评论 -
怎么监听路由上的参数变化刷新页面
watch: { $route: { handler: function(val, oldVal){ console.log(val); } }}原创 2021-09-09 14:15:09 · 276 阅读 · 3 评论 -
axios解决高并发的方法:axios.all()、axios.spread()
前言: 很多时候,我们可能需要同时调用多个后台接口,就会高并发的问题,一般解决这个问题方法:axios.all 和 axios.spread***注意这里的$get是封装的axios方法,有兴趣的朋友请参考另一篇//方法一:searchTopic() { return this.$axios({ url:'地址1', method:'方式',//get/post/patch/put/deleted ...转载 2021-08-18 14:56:06 · 582 阅读 · 0 评论 -
vue promise封装axios
index.vue中引用调用<template> <div class="index-wrap"> <button type="button" @click="ajax_click">调用封装的请求</button> </div> </div></template> <script> import slideShow from '../components/slide...转载 2021-08-18 13:53:59 · 295 阅读 · 0 评论 -
vuejs中拖动改变元素宽度实现宽度自适应大小
<template><div> <ul class="box" ref="box"> <li class="left" ref="left">西瓜</li> <li class="resize" ref="resize"></li> <li class="mid" ref="mid">备注2</li> <li class="resize2" ref="...转载 2021-07-13 16:58:15 · 558 阅读 · 0 评论 -
Vue使用watch监听一个对象中的属性
问题描述Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发响应的办法:比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], },现在我需要监听这个queryData,我可以这样做:watch: { queryData: { handler: function() { //do som转载 2021-07-07 13:44:22 · 202 阅读 · 0 评论 -
vue项目实现文字转换成语音播放功能
一、Web Speech APIWeb Speech API使您能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分:SpeechSynthesis语音合成 (文本到语音 TTS)和 SpeechRecognition 语音识别(异步语音识别)。我们今天主要了解语音合成,将文字转换成语音播放二、语音合成SpeechSynthesis:语音合成服务的控制器接口,可用于获取设备上可用的合成语音,开始、暂停以及其它相关命令的信息。SpeechSynthesisU...转载 2021-06-28 15:19:00 · 985 阅读 · 7 评论 -
vue实现用户长时间不操作,自动退出登录
一、需求说明昨天后端开发人员让我实现一个网页锁屏,当时我一头雾水,问他为啥搞的跟安卓系统一样。他的回复是"看起来帅点"。首先我们梳理下逻辑,先来个简化版的,用户长时间未操作时,返回登录页二、思路使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出登陆,清除token,返回登录页三、实现【1】在util文件夹下创建一个storage.js封装localStorage方法export default { .转载 2021-06-26 11:00:12 · 859 阅读 · 0 评论 -
Vue插槽slot的使用
vue官方文档中关于slot插槽的说明很简短,语言又写的很凝练,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了vue的说明文档。一、slot的作用Q: 假如父组件需要在子组件内放一些DOM元素,那么这些DOM是显示呢还是不显示呢?默认情况下是不会显示的,如下图所示,页面并没有显示父组件增加的我是魔鬼 元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢?这就用到了slot插槽,使用slot这个标签可以将父组件放在子组...转载 2021-06-26 09:41:48 · 3263 阅读 · 0 评论 -
Vue — 详解mixins混入使用
前言当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch、mounted等),如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性一、什么是Mixins?mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、component转载 2021-06-25 16:41:45 · 625 阅读 · 0 评论 -
vue父组件获取子组件的属性或方法
父组件代码片段:2 <v-autoTextarea ref="autotext" :value="d_value"></v-autoTextarea>这里要用到 vue的 ref,在父组件中的子组件加上ref,然后在submit方法中 submit ($event) { alert(this.$refs.autotext.temp_value)}...转载 2021-06-23 13:54:07 · 391 阅读 · 0 评论 -
Vue 实现请求转发【Vue小技巧】
在vue.config.js里面配置这个代理(找到config/index.js 配置文件)module.exports = { derServer:{ proxy:{ '/api':{ target:'http://localhost:3000' } } }}然后就可以axios.get('/api').then(res=> {})...原创 2021-06-21 20:39:20 · 1625 阅读 · 0 评论 -
为什么要使用路由懒加载
原因为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。定义懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。使用常用的懒加载方式有两种:即使用vue异步组件和ES中的import1、未用懒加载,vue中路由代码如下import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Rout..转载 2021-06-21 16:24:15 · 532 阅读 · 0 评论 -
简单易懂的this.$nextTick
<template> <div class="next-click"> <ul ref="ulRef"> <li v-for="(item,index) in items" :key="index"> {{item}} </li> </ul> <button @click="add"&g.原创 2021-06-21 09:50:00 · 261 阅读 · 0 评论 -
vue中setInterval的清除
两种清除setInterval的方式:方案一:data() { return { timer: null // 定时器名称 } },mouted() { this.timer = (() => { // 某些操作 }, 1000)},beforeDestroy() { clearInterval(thi转载 2021-06-18 14:03:12 · 190 阅读 · 0 评论 -
vue 使用 setInterval()方法
mounted() { this.getElevatorList();// 要先这样执行一遍 setInterval(this.getElevatorList, 15000); // 然后下面的再执行一遍}转载 2021-06-18 11:15:55 · 495 阅读 · 0 评论 -
基于Vue的 点击按钮 添加一个input框
通过点击一个按钮添加一个input输入框值绑定到 items中,每一个输入框对应一个item<template> <div> <input type="text" v-for="(item,i) of items" v-model="items[i]" :key="i"> <button @click="onAdd">添加</button> </div></template><scr转载 2021-06-17 15:52:55 · 4733 阅读 · 4 评论 -
可拖拽排序的vue组件
安装npm install awe-dnd --save使用在main.js中,通过Vue.use引入转载 2021-06-01 15:55:24 · 179 阅读 · 0 评论 -
npm install 停在下载某个包的地方不动
在码云上clone一个项目下来,执行npm install命令安装依赖,同事电脑安装一切正常,但是我本地一致停在下载某个包的地方不动,类似extract:core-js: sill extract source-map@0.5.7这样或者 unexpected end of file 解决办法: 首先通过npm config list查看包的下载源是否是国内的淘宝镜像,这样的话就不会存在因为网络问题导致的下载缓慢的问题。 如果方法一没有解决该问题,可以尝试使用npm cac...原创 2021-05-21 14:02:41 · 893 阅读 · 2 评论 -
没有网情况下,如何部署前端
需要部署前端,客户那边只有内网。内网就是无网络状态,但是我们项目启动要有全局的webpack啊!,这可咋办啊,平时我们都联网npm install webpack -g完事,潇洒!没办法,硬着头皮百度了一下,发现还真的可以离线下载包,首先执行命令npm root -g然后会出来这么个路径,去自己电脑上找,但是坑爹的是,AppData这个路径系统有可能默认是隐藏文件夹,你得通过查看文件夹,让他显示出来就行了没错,就是这个路径,把你项目中本地的node_modules里的包转载 2021-05-17 08:48:01 · 676 阅读 · 0 评论 -
vue - 减少打包后的体积
路径:/config/index.js是否产生map文件,置为false.转载 2021-04-26 14:15:22 · 142 阅读 · 0 评论 -
Vue.js 判断当前是开发环境还是生产环境
1,判断样例(1)有时我们需要在代码中判断目前项目是处于开发环境、还是生产环境,然后根据不同环境执行不同的逻辑代码。下面是一个简单的样例:2,判断原理(1)在项目的 config 文件夹下有 dev.env.js 和 prod.env.js 两个文件,它们分别配置开发环境的变量和生产环境的变量。(2)打开 dev.env.js 文件,可以看到 NODE_ENV 变量值为 development。'use strict'const merge = require('webpac转载 2021-04-01 09:05:04 · 2696 阅读 · 2 评论