vue
fk129
这个作者很懒,什么都没留下…
展开
-
基于vue3实现无缝滚动 vue3-seamless-scroll
拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果。singleHeight and singleWidth 是否开启 rem 度量。通过v-model控制动画滚动与停止,默认开始滚动。开启滚动的数据量,只有列表长度大于等于该值才会滚动。在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启。无缝滚动列表数据,组件内部使用列表长度。动画效果,可以传入贝塞尔曲线数值。动画循环次数,默认无限循环。控制滚动方向,可选值。原创 2023-07-17 14:45:23 · 760 阅读 · 0 评论 -
创建vue项目 vite+typescript+vue
教你如何创建一个vite+typescript+vue项目原创 2023-02-03 09:13:44 · 116 阅读 · 0 评论 -
WebSocket connection to ‘ws://localhost:8080/api/handler‘ failed: Invalid frame header
proxy:{ '/api/handler':{ target: { protocol: 'wss:', host: '172.31.4.248', }, ws: true, changeOrigin: true, secure: false, }}如上项目中websocket配置的代理;初始建立连接没有问题,能连接成功;但是一会就报错(Invalid f..原创 2021-11-26 14:29:55 · 17731 阅读 · 6 评论 -
vue图片预览缩放 - v-viewer
v-viewer:https://github.com/mirari/v-viewer在实际项目应用中,我们是有出现图片原始宽高很大,所以在页面不好展示,只好同比例缩小图片尺寸显示在列表、详情等地方,这样图片的展示效果不好。那我们的解决方法就是可以点击预览原尺寸图片,当然如果有放大、缩小、移动等效果就更好了。v-viewer就解决了我们的问题安装npm install v-viewer --save引入import Vue from 'vue'import Viewer from原创 2021-09-22 16:25:35 · 465 阅读 · 0 评论 -
vue $forceUpdate强制刷新
$forceUpdate强制更新视图渲染。由于vue数据双向绑定的原理,在使用vue的时候一些简单的数据更新,触发视图渲染的行为直接完成。但是也有复杂数据(深结构数据)的时候,如对象里面的数组更新或增加对象长度(添加对象新属性值),就无法触发视图渲染更新了vue不能监听已有对象的属性添加和删除,我们可以创建一个新对象包含原对象和新增对象属性this.obj = Object.assign({}, this.obj, { a: 1, e: 2 })这里也可以用 $forceUpdat原创 2021-07-14 16:41:10 · 263 阅读 · 0 评论 -
vue 使用 v-if 控制组件显示,组件注册监听事件多次执行
在项目中遇到过这样的情况,组件里面注册了window监听事件,组件加载用v-if控制,第一遍加载操作是没有问题,但是在第二遍及之后的加载操作有点问题。window监听事件会触发多次经过检查后发现,当操作完成组件用v-if控制不显示,但是window监听事件还存在并没有被注销,所以导致后面加载的组件操作会显示触发多次监听事件。解决方法:在组件销毁的时候移除当前不需要的window监听事件添加事件监听:window.addEventListener(event, function, tr.原创 2021-04-26 17:08:38 · 1491 阅读 · 0 评论 -
vue 多环境配置
实际情况下我们用vue-cli脚手架生成的项目,可能部署在不同环境下运行,如开发环境、测试环境、生产环境;那接口地址等可能有所改变,我们不能每次手动修改文件里的地址。那么可以配置多环境1. package.json添加test打包命令"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "uni原创 2020-08-24 14:33:03 · 333 阅读 · 0 评论 -
在vue项目中使用echarts
项目中我们想要数据可视化处理,并且简单明了多元化的展示统计数据。这种情况下,数据图表展示成为了一种选择。那么图表展示工具Echarts、Highcharts也就呈现在我们眼前。官方文档:Echarts:https://www.echartsjs.com/zh/index.htmlHighcharts:https://www.highcharts.com.cn/在html中使用图表我们查看...原创 2020-04-29 09:56:03 · 233 阅读 · 0 评论 -
vue 路由前进刷新,后退不刷新
做项目的过程中,会遇到这种情况,如商城类显示,点击商品列表中的某一个商品进入到商品详情页面,我返回的时候希望的是商品列表呈现之前的页面状态,不重新加载商品列表改写router-view<div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-v...原创 2020-03-17 15:47:46 · 245 阅读 · 0 评论 -
vue axios请求头携带信息(token)
vue项目使用axios请求,其中部分接口需要token值;但是开发阶段前后端分离项目设计跨域问题,设置cookie请求头不携带;解决:用axios拦截器设置请求头携带信息axios.interceptors.request.use(config => { var userInfo = sessionStorage.getItem("userInfo"); if (use...原创 2019-12-06 11:29:14 · 3587 阅读 · 1 评论 -
vue父子组件传值,子组件改变值后父组件的值也变了
问题复述父组件给子组件传值,子组件改变值,父组件的值也相应的跟着变化,但有时并不想父组件的值改变问题原因双向绑定解决办法最简单有效的方法是JSON.parse(JSON.stringify(data ))参考https://blog.csdn.net/weixin_43254676/article/details/91361532深入理解javascript的浅拷贝和深拷贝ht...原创 2019-11-28 16:46:18 · 618 阅读 · 0 评论 -
webpack地址代理
项目开发阶段前后端分离模式,这就涉及到了开发地址和部署地址不一样,如果前端把地址写死的话,那样每次部署都要修改地址,这样可能会导致有时候修改遗漏等问题那么考虑下,我们在开发阶段是不是可以通过地址代理来解决前端地址写死的问题vue2.0的webpack提供了这个功能比如一个完整的请求地址是 http://172.31.4.247/sc1902/login/oauth/tokenwebpac...原创 2019-11-28 10:23:10 · 724 阅读 · 0 评论 -
vue axios以formData方法上传文件
let formData = new FormData();formData.append('albumIds', this.addItem.type);formData.append('albumType', this.addItem.type);formData.append('file', this.addItem.file);formData.append('jobName', t...原创 2019-11-14 18:55:57 · 622 阅读 · 0 评论 -
vue子父组件通信和函数调用
父组件传递数据给子组件1.父组件要传递的数据当成有个属性绑定在 组件 上,如下:<alarm-popup :data="detail.data" ></alarm-popup>2.子组件用props接收父组件的传值,如下:props:['data']props接收值还有验证形式props: { // 基础的类型检查 (`null` 和 `und...原创 2019-10-23 15:53:48 · 150 阅读 · 0 评论 -
vue运行报错FATAL ERROR: NewSpace::Rebalance Allocation failed - process out of memory(内存溢出)
问题:在添加一些项目文件时,用npm run dev运行项目,项目运行报错如下图:原因:项目运行内存溢出解决:找到node_modules>.bin>webpack-dev-server.cmd文件,进行配置修改,增加 --max-old-space-size=8192原文件:@IF EXIST "%~dp0\node.exe" ( "%~dp0\node.ex...原创 2019-10-23 14:51:00 · 8303 阅读 · 1 评论 -
初学vue项目搭建 常用命令
安装node.js https://nodejs.org/en/download/ 查看版本信息 node -v npm -v安装淘宝镜像 npm install -g cnpm --registry=http://registry.npm.taobao.org安装脚手架 npm install -g vue-cli选择新建项目路径 cd desktop...原创 2019-04-08 16:34:25 · 185 阅读 · 0 评论 -
vue 数据更新但视图不更新
问题:Vue改变数据,但没有触发视图更新:原因:可能数据类型为数组,如btnShow=[false,false,false];更新数据值的写法是btnShow[1]=true;解决:更新数据值的写法this.$set(this.btnShow,1,true)...原创 2019-04-08 16:40:04 · 464 阅读 · 0 评论 -
vue 根据变量值来判断显示class
<div :class="['bottom-btn',{'face-btn':type=='face'}]"></div>原创 2019-07-30 14:55:12 · 5961 阅读 · 0 评论 -
zTree 关键词过滤
引入下面的zTree文件:ztree/css/zTreeStyle/zTreeStyle.css;ztree/js/jquery.ztree.core.jsztree/js/jquery.ztree.exhide.min.jshtml<div class="search-input"> <Input type="text" style="height:45px" v...原创 2019-09-05 15:47:50 · 757 阅读 · 0 评论 -
vue学习——数据的添加加载
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:原创 2019-02-25 10:29:57 · 586 阅读 · 0 评论