vue
关注
分享
扫一扫
lamCCH
自学成才
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
企业微信自建应用开发流程
企业微信应用开发原创 2023-09-06 11:13:57 · 3834 阅读 · 0 评论 -
map循环调用接口并发问题
项目中有个需求是从本地数据库查询数据，数据可能有多条且是重复的，然后再循环调用后端接口，理想的状态是第一次请求成功之后 再进行第二次请求。forEach、map这样的高级循环遍历函数，在循环的同时，是不能更改内部item对象的（await是异步转同步的写法，但并不会阻塞主线程的同步进行的代码，只会阻塞异步代码。代码中使用了`async/await`关键字，但是并没有起作用。map更改后，返回的是新数组，forEach是原数组被更改。），所以在map使用await不起作用。原创 2022-12-14 11:47:45 · 1022 阅读 · 1 评论 -
ElementUI的switch组件文字显示在按钮上
我们想让switch开关打开的时候只显示未过期。只要修改它的样式就可以达到我们要的效果。其实原创 2022-11-15 09:18:15 · 1570 阅读 · 0 评论 -
elementUI的表单给把select选择器的验证bug
select组件明明触发了change事件，验证不通过原创 2022-11-14 15:56:05 · 964 阅读 · 0 评论 -
vue项目中绑定内联样式
vue项目中绑定动态内联样式，如果想用三元表达式要用中括号原创 2022-10-13 14:56:12 · 428 阅读 · 0 评论 -
Element级联选择器自定义value label
实际项目中后端返回的数据属性可能不是以`label/value`等命名的，这时候数据就渲染不上去。我们需要利用`props`指定选项的值为选项对象的某个属性值。原创 2022-08-25 14:20:52 · 2099 阅读 · 0 评论 -
nginx本地代理，解决请求跨域
nginx解决跨域问题原创 2022-06-10 16:06:17 · 4152 阅读 · 0 评论 -
vue项目多个文件上传和下载
vue项目中多文件的上传和下载进度监测原创 2022-06-02 15:38:08 · 3003 阅读 · 0 评论 -
Element表格高度根据浏览器窗口大小动态改变
`el-table`默认展示20条数据时，表格高度可能会超出当前页面的高度，此时页面会出现滚动条，我们往下拖动的时候表格下方的数据是可以呈现出来，但表头可能就被页面遮挡住了。那往下拖动时怎么固定住表头呢？Element文档里说了，可以加`height`属性。比如：<el-table :data="tbData" stripe border height="500"></el-table>给`height`一个高度，这样是可以解决表头固定的问题。但是又会出现一.原创 2022-03-10 18:54:22 · 3933 阅读 · 1 评论 -
给Element表格添加滚动条并修改滚动条样式
需求如题，添加CSS样式：::v-deep .el-table__body-wrapper { height: 500px !important; /*给一个固定高度*/ overflow-y: auto; /*y轴溢出显示滚动条*/ &::-webkit-scrollbar { width: 4px; /* y轴滚动条宽度 */ height:4px; /* x轴滚动条宽度 */ background-color: #f5f5f5; /*滚动条背景*原创 2022-02-23 14:42:54 · 2686 阅读 · 0 评论 -
同一行的图片和文字垂直居中对齐
项目中经常会有图片和文字同行的情况，而且默认文字和图片底部对齐，影响美观，怎么垂直居中对齐呢，其实很简单：给当前图片和文字分别加上以下CSS样式就可以了。vertical-align:middle原创 2022-02-23 09:12:32 · 1390 阅读 · 0 评论 -
怎么将前端项目打成war包
前言我们前端开发人员打包一般指在前台打包，比如一个vue项目，运行打包命令npm run build。这个是基于Node.js来打包运行的。项目线上环境是没有node的，所以为了配合后端有时要将项目打成后台需要的war包。步骤1、还是先运行npm run build,生成dist文件夹2、新建一个tomcat项目，并安装maven,创建过程可网上搜索3、项目创建好后，找到src/main/webapp文件夹，将之前前台打包后生产的dist文件夹内的文件复制到这里。4、用idea软件打开新建的t原创 2021-07-28 15:19:16 · 7074 阅读 · 1 评论 -
element动态树表结构
<!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" /> <title>D...原创 2021-07-14 14:17:53 · 312 阅读 · 0 评论 -
前后台IP地址不同，跨域请求解决方法
跨域在开发中经常会碰到，解决方法也很多。今天来记录一下实际项目中遇到的跨域问题及解决方法。项目初始功能开发完毕后，准备线上布署。后台布署好后，访问出错。登录成功好再去请求别的接口，直接返回登录页面。（此时页面并没有报跨域的错，不知道为啥）但是在本地环境正常。经过排查，发现线上环境有两个ip地址和端口。比如前端项目地址是192.168.10.01:8080，后端接口地址是192.168.10.02:8081。随即在本地测了一下，前端地址是localhost:8080，后台地址改为本机ip地址：192.16原创 2021-07-13 16:32:51 · 7292 阅读 · 0 评论 -
vue-cli2配置多环境打包
目前vue-cli2上原配置是只有开发环境dev和线上环境prod的配置，但是我们实际场景上还有很多需要一个测试环境test,下面就是对测试环境的配置，将测试环境和线上环境的打包代码分开就不需要切来切去了。1.找到项目根目录下的build文件夹里的build.js文件，然后复制一份出来将文件名修改为build-test.js。内容修改为如下图（修改三个地方）：2.复制一份build/webpack.prod.conf.js文件命名为build/webpack.test.conf.js 主要修改这一处地原创 2021-05-21 14:49:28 · 1341 阅读 · 0 评论 -
vue实现伪登录（单点登录 登录白名单设置）
实现伪登录（登录白名单设置）原创 2020-05-08 09:49:36 · 5152 阅读 · 0 评论 -
不使用keep-alive，记住列表的滚动位置（scrollTop的正确使用方式）
需求如图，首页日常任务模块—>日常任务列表（父组件）–>任务列表（子组件）–>详情页（孙组件）。就是从首页进入功能列表页父组件，滚动一段距离点击自立项目进入到任务子组件，再滚动一段距离点击第一条带日期的那一项进入任务详情，然后返回时要返回到刚才滚动的位置，而不是从列表第一条开始。项目使用的vue框架和vant组件，我按照vue官方文档里介绍说把<router-view>用<keep-alive>包裹起来就可以实现，各组件内也定义了name属性，然而并没有卵用，.原创 2020-12-18 16:18:45 · 1369 阅读 · 1 评论 -
jsp项目如何引入vue
如题，背景就不介绍了，项目是前后端不分离的，这让我一个转行前端对JSP语法不熟的人来说写起来着实难受。后来加了个考试的新功能，果断引入vue和element，还有polyfill.js，因为要兼容IE9。刚开始写的时候vue和elememt都是引的cdn上的资源，但是我们项目只能使用内网，所以需要将vue和element下载到本地。从线上转到本地的过程中，遇到了一些坑，下面就来说一下。cdn引用方式//在head头部引入elementUI样式<link rel="stylesheet" hre原创 2020-11-11 20:18:31 · 25089 阅读 · 10 评论 -
用calc()函数使页面高度在不同分辨率下自适应
市面上电脑种类很多，每个人的电脑屏幕分辨率又不一样，这就造成了同一个页面在不同的电脑上显示的不一样。这对前端来说是比较头疼的。那怎么让页面根据屏幕分辨率自适应呢？首先我们不能给要处理的容器设置固定高度，其次借助视口（viewport）和calc()函数来设置高度。视口通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。整个视口的高和宽是 100vh、100vw1vh = 1% * 视口高度，1vw = 1% * 视口宽度vh、vw就是相对视口的长度单位，它是相对原创 2021-04-15 20:17:15 · 2845 阅读 · 0 评论 -
在echaerts饼图（环形图）内部自定义文字
需求是利用echarts的饼图之环形图在内部自定义文字。如下图： const option = { title: [ { // 第一个圆环标题 text: '省市公司', // 主标题 textStyle: { // 主标题样式 color: '#333', fontWeight: 'bold', fontSize: 14原创 2021-04-13 23:14:40 · 16031 阅读 · 0 评论 -
vscode Vue格式化HTML标签属性换行
打开vscode设置，在上方输入框搜索settings，进入到settings.json文件。添加以下属性：注: // - auto: 仅在超出行长度时才对属性进行换行。 // - force: 对除第一个属性外的其他每个属性进行换行。 // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。 // - force-expand-multiline: 对每个属性进行换行。 // - aligned-multiple: 当超出折行长度时，原创 2021-03-30 10:08:57 · 4944 阅读 · 0 评论 -
Vue3有哪些改变
v-model新语法糖默认使用modelValue传递值。<ChildComponent v-model="pageTitle" /><!-- would be shorthand for: --><ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>也支持绑定不同的属性，有点像是v-model和sync的结合体。<ChildCom原创 2020-12-31 14:25:32 · 783 阅读 · 0 评论 -
阿里图标的引入方式
平时做项目肯定少不了图标，一些组件自带一些图标，但是可能没有我们需要的，这时候就要借助于强大的阿里图标了。怎么使用呢？一、font-class方式1.输入想要搜索的图标名搜索(要先登录账号)2.将图标加入购物车3.点击购物车，将图标加入项目，可以新建项目，也可以选择原有的项目4.加入到项目后，会自动跳转到项目里，展示此项目里所有的图标5.选择Font class,然后点击更新代码6.代码更新完毕后会生成一个链接，将链接复制到浏览器地址栏，复制所有代码7.在项目src/assets下新建一个原创 2020-08-13 09:34:12 · 1330 阅读 · 0 评论 -
axios在vue中的封装，可直接复用
/** axios封装* 请求拦截、响应拦截、错误统一处理*/import axios from 'axios'import QS from 'qs'import {Toast} from 'vant'import {clearUserToken} from '../utils/cache'// 请求拦截器axios.interceptors.request.use( config => { // 此请求头以普通表单的形式（键值对）发送数据，不适用于上传文件 ...原创 2020-08-12 15:09:48 · 471 阅读 · 0 评论 -
vue中使用ref引用子组件方法报错的问题
项目中，父组件使用了 ref 属性调用子组件的方法突然报错了，代码和报错如下：解决方法：把 mounted 里的调用放到一个定时器里就可以了我的理解是因为 ref 属性初始渲染时，子组件还没挂载好，所以这个方法还不存在，所以不能访问。加个定时器延时执行。但是其他使用 ref 属性调用的方法又没有报错，百思不得其解。知道的可以回答下。setTimeout(() =&g...原创 2020-03-25 16:32:41 · 7406 阅读 · 0 评论