![](https://img-blog.csdnimg.cn/20210902091912194.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue
Hello攻城狮
当你想要放弃的时候,想想当初为什么坚持到这里。
展开
-
vue2.x集成jest
vue2.x集成jest,步骤及问题解析原创 2023-01-06 15:58:06 · 820 阅读 · 2 评论 -
vue2.x和vue3.x 环境相关配置
vue配置多环境,vue2和vue3根据环境加载js文件原创 2022-12-01 14:45:20 · 676 阅读 · 0 评论 -
vue路由history模式404问题
1.vue路由使用history部署到服务器后发现回车或者刷新网页404解决方法:nginx配置文件加入 try_files $uri $uri/ /index.html last;如:原创 2021-12-21 16:38:05 · 235 阅读 · 0 评论 -
vue 首次进入首页加载缓慢解决方案
1.使用路由懒加载方式有很多种,我采用如下:注:webpackChunkName表示将打包后的放到一个模块中,使用后会减少生成的js个数2.使用cdn在打包后发现vendor.js 文件占用内存特别大,这里面主要是使用的一些第三方库,例如 vuex,vue-router,axios,elementUI 等文件我们除了在使用过程中单个组件引用,还可以使用CDN 加载。通过在index.html 中直接引入第三方资源来缓解我们服务器的压力,其原理是将我们的压力分给了其他服务器站点。3.将打包后比原创 2021-10-24 17:44:14 · 1729 阅读 · 0 评论 -
quill实现上传文件
1.首先工具栏配置加上upload,如图:这时会发现上传图片没有显示出来,需要自定义一个上传的图标,在阿里云矢量图标库下载一个就可以了2.图标样式修改/deep/.ql-upload{ background: url("./../../assets/img/upload.svg") !important; background-size: 20px 20px !important; background-position: center center !important; back原创 2021-10-20 14:46:41 · 2968 阅读 · 4 评论 -
vue 断开发送的请求,解决接口重复请求数据错误问题
1.问题描述,进入页面时第一个接口还在请求,立即切换tab请求第二个接口。但是第二个接口响应比第一个接口响应快,页面展示的时第一个接口的数据,如图:解决方法,判断如果是相同的接口,中断上一个接口,数据就永远是最新的接口返回的, 代码:let pending = [] //声明一个数组用于存储每个请求的取消函数和请求标识let cancelToken = axios.CancelTokenlet removePending = (ever) => { for (let p in pendi原创 2021-09-30 16:05:39 · 1183 阅读 · 0 评论 -
vue路由传参-使用encodeURI加密参数
在路由切换时页面需要使用地址栏传参,但地址栏会暴露参数的值,然后想到了encodeURI加密参数比如参数是一个对象objobj:{ id: 1, name: 'Tom'}那么需要将参数转换为JSON字符串,在使用encodeURI加密,需要注意的是通过路由跳转的时候会自动解密一次,所以需要加两次密 let param = { id: 1, name: 'Tom' } param = encodeURI(JSON.stringify(param))原创 2021-09-07 10:43:30 · 6468 阅读 · 0 评论 -
vue中使用tailwindcss
1.根据官方文档引入最新的tailwindcssnpm install tailwindcss@latest postcss@latest autoprefixer@latest遗憾的是现在不支持最新的 postcss8卸载8安装7卸载:npm uninstall tailwindcss postcss autoprefixer安装7:npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-co原创 2021-08-27 15:07:57 · 1382 阅读 · 2 评论 -
ant design vue 实现table组件合计栏
在table底部需要显示合计栏,主要实现方式:使用table底部插槽。实现效果:出现滚动条后,合计栏跟随table滚动css样式修改: table和合计栏数据对其,合计栏隐藏滚动条 /deep/ .ant-table-footer { padding: 0; } /deep/ .ant-table-footer .ant-table-body { overflow: hidden !important; } /deep/ .ant-table-footer原创 2021-07-23 16:18:24 · 4841 阅读 · 34 评论 -
解决ant design vue 在table中异步显示图片问题
遇到的问题是,table列表中有图片,但后端只给了id,而且图片预览有权限认证,所以直接把图片路劲放入src行不通,只能异步去拿,首先我想到的办法是,在插槽中去调用图片预览的方法:就像这种<--! htm --> <div class="custom-table-column-icon"> <span v-if="scope.headImgUrl" ><img heig原创 2021-07-19 10:15:07 · 1248 阅读 · 1 评论 -
前端将后端返回的文件流显示为图片
后端返回的文件流,前端怎么显示出来呢?1.多年前端开发经验的我目前用的最多的是:直接将请求地址写在src里面,如:<img src="/file/preview/picture.png" alt="图片">或者:<img src="/file/preview/picture2.png?token=eyJqdGkiOiIxIiwiaXNzIjoibHZqdW4iLCJpYXQiOjE2MjU3MDcxODAsInN alt="图片">",这样即直接又简单。2.但是由于后台加上鉴权后原创 2021-07-08 14:41:59 · 15194 阅读 · 2 评论 -
二次封装element table组件
element的table组件其实已经很完善了,不过调用的时候需要些很多重复的标签比较臃肿,所以我打算封装一个通用tabel的组件。首先是页面: <div class="table-container"> <el-table fit :height="config.height" :size="config.size" ref="tableList" tooltip-effect="light"原创 2021-06-15 15:24:44 · 302 阅读 · 0 评论 -
element树形组件tree节点增删改操作
1.目的:使用element树形组件tree懒加载方式显示数据,对数据进行增加、删除、修改,效果如下图:2.使用tree懒加载方式,对数据操作,最重要的就是记住当前操作的节点,如果是新增、修改则刷新当前节点,如果是删除则是刷新父级节点3.上代码,tree页面代码<el-container v-loading="loading" class="area-manage page-container"> <el-aside width="250px"> <e原创 2021-01-06 11:42:25 · 5944 阅读 · 4 评论 -
vue 使用scroll实现锚点
1.最近出来一个新需求,要求滚动分组时右边出现导航栏,可以通过导航栏跳转到相应分组,最开始毫无头绪,万万没想到,最后还是实现了,实现效果如下:2.首先监听滚动@scroll="scrollEvent",滚动方法实现如下:// 监听滚动 scrollEvent (e) { this.showMao = true // 显示导航栏 let scrollItems = document.querySelectorAll('.temp-items') for (let原创 2020-12-14 12:00:07 · 1061 阅读 · 0 评论 -
vue 两种拖拽插件及实现
vuedraggablevuedraggable 是标准的组件式封装,并且将可拖动元素放进了 transition-group 上面,过渡动画都比较好。vuedraggable 拖动后可以在updated中监听vuedraggable 的拖动规则是:拖动元素后到新位置,后面元素依次退一个位置,如:安装 vuedraggable :npm install vuedraggable --save在页面引用import vuedraggable from 'vuedraggable'; c原创 2020-09-15 14:56:26 · 5617 阅读 · 5 评论 -
vue按需引入vant
1.首先下载vantnpm install vant save2.新建vant.js,在里面引入需要的组件:例如import Vue from 'vue'import { Button, NavBar, Dialog, Toast, Row, Col, Cell, CellGroup, Icon, Field, Loading, Form, Tabbar, Tab, Tabs, List, TabbarItem, PullRe原创 2020-08-25 11:29:52 · 542 阅读 · 0 评论 -
解决el-radio-group页面不刷新问题
问题:使用v-show后el-radio-group点击后页面不刷新了,但值是改变了的。如下图所示:解决办法:在el-radio-group加一个@change事件如: <el-form-item label-width="30px" v-if="!edit"> <el-radio-group @change="checkAddType" v-model="formData.resource"> <el-radio label="on原创 2020-08-19 10:39:42 · 2584 阅读 · 3 评论 -
vue使用jquery
1.引入npm install jquery -s2.在vue.config.js加入configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ]原创 2020-07-24 10:32:10 · 204 阅读 · 0 评论 -
element Tree 树形控件 收缩全部节点
1.为了实现点击节点后自动收缩全部节点,找了一大堆文章看都没有实现,还是自己一层一层的去qio才找到的。效果图如下:2.最关键代码如下:this.$refs.treeAdd.$children[0].node.parent.childNodes[0].expanded = false;如果不行就自己一层一层的剥开它的心,你会发现,你会讶异,原来藏得这么深。...原创 2019-10-08 16:07:21 · 3210 阅读 · 2 评论 -
vue 导航守卫
一、什么是导航守卫导航就是我们说的路由,当路由发生变化的时候,我们想要做的事情,导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。二、使用导航守卫控制登录权限访问(未登录不允许访问)1.在main.js引入路由文件index.js2.登录成功后再vuex中存用户信息,store.js如下import Vue from ...原创 2019-09-09 15:38:36 · 91 阅读 · 0 评论 -
vue cli3封装路由,配置多个路由页面文件
1.创建vue3项目,过程省略。2.删除自动生成的router.js,创建新的router文件夹。3.在router文件夹中创建index.js,routes2.js,routes3.js(1)index.jsimport VueRouter from 'vue-router';import Vue from 'vue';import routes1 from './routes1...原创 2019-08-20 15:17:54 · 3380 阅读 · 0 评论 -
vue cli3封装axios
1.创建vue3项目,过程省略2.创建axios文件api.js,3.在api.js封装get,post请求。import axios from 'axios'const service = axios.create({ baseURL: 'https://www.apiopen.top/', // api的base_url timeout: 500000 // 请求超时...原创 2019-08-20 14:52:51 · 4073 阅读 · 4 评论