
vue
文章平均质量分 56
lalaladamowang
lalala
展开
-
vue项目中node_modules体积变大及webpack-CompressionWebpackPlugin
针对CompressionWebpackPlugin插件可以自行百度,是一个gzip压缩的插件,目的是提高http访问速度,前端打包时开启,并且配置nginx即可。原因在于在vue.config.js中配置了CompressionWebpackPlugin,并且此插件默认开启cache缓存。在前端vue项目中,每启动一次项目,node_modules的体积就会变大,基本上半个月就可以达到100G左右。在vue.config.js中关闭此插件的cache就不会出现node_modules体积变大的问题。原创 2023-07-29 11:13:18 · 1917 阅读 · 0 评论 -
利用contenteditable实现textarea即支持tags标签也支持文本的实现方式
最近接到了一个新的需求,需要做一个textarea的文本框,即支持tags标签的输入,也要支持普通文本的输入原创 2023-06-19 17:39:41 · 2487 阅读 · 3 评论 -
npm包管理项目改为pnpm包管理以及碰到的问题
npm项目转为pnpm项目以及一些问题的解决方案原创 2023-04-13 17:13:22 · 3527 阅读 · 0 评论 -
【uniapp-H5配置打包文件抽离出config.js进行线上可修改接口】
uniapp-H5配置打包文件抽离出config.js进行线上可修改接口一、项目背景二、uniapp中h5的使用1.vuecli和uniapp的区别2.static中创建config.js3.template.h5.html一、项目背景开发的过程中,会有测试和正式两个环境,尤其是在线上调试的接口会出现多样性,比如我们在git中提交的代码会部署到线上服务器和测试服务器,但是打包的时候需要固定接口地址,通常解决这类问题的方法就是使用location拿到当前域名来做接口地址,或者是单独配置一个config.j原创 2022-03-29 09:30:51 · 3492 阅读 · 1 评论 -
js中await和async的理解以及使用场景---怎么在等待一个方法或者一个字段赋值后进行之后的操作呢
js中await和async的理解js的同步和异步二级目录三级目录js的同步和异步首先js不同于其他的语言,它是一个单线程的语言,所有的任务都会在主线程中进行执行,同步任务就是在主线程中按次序执行的任务,异步任务就是可以改变主线程中次序的任务,在js中有一个"任务队列"专门存放异步任务,当主线程的任务没了的时候再去访问"任务队列"中成功回调的方法,进行执行。二级目录三级目录...原创 2022-02-14 17:36:41 · 1511 阅读 · 1 评论 -
vue对excel表格的前端处理上传表格解析
vue对excel表格的前端处理上传表格解析需求代码anythingelse需求需求是在需要上传excel表格进行解析,然后获取其中的数据,刚开始想的是后端来处理数据,后来发现了xlsx这个插件,综合了一下前端实现了。代码HTML: <el-upload class="upload-demo" ref="upload" action="" :auto-upload="false" :file-list原创 2021-10-11 15:06:45 · 775 阅读 · 2 评论 -
vue.js判断滚动条滚动到底部后(防抖节流)进行数据的分页请求
vue.js判断滚动条滚动到底部后(防抖节流)进行数据的分页请求整体思路监听代码防抖节流整体思路VUE2.0其实有很多的插件来,而且功能很强大,还提供很多的插槽来,之前跟着师父做的项目里直接用了vue-infinite-loading,功能也很强大,点击这里可以直接看我之前写的博客。vue-infinite-loading: 链接.今天主要介绍一下原生的JS怎么去做判断主要用3个属性,scrollTop,scrollHeight,clientHeightscrollTop:鼠标滚动Y轴的距离s原创 2021-09-22 11:09:34 · 2459 阅读 · 2 评论 -
vuecli配置proxy跨域
vuecli 配置 proxy跨域配置配置在vuecli3根目录下新建一个vue.config.jsmodule.exports = { devServer: { proxy:{ '/':{ target:'https://read.hyzj.lslive.club', changeOrigin:true, secure:false, // pathRewrite:{原创 2021-09-18 15:28:41 · 333 阅读 · 0 评论 -
Vue使用formdata向后台传递参数
Vue使用formdata向后台传递参数修改请求头headers直接new formdata修改请求头headers我们可以在传递接口的时候修改headers,{‘Content-Type’: ‘application/json’}直接new formdata我两个都用了,最后还是用的直接new formdata实例来传递 multSumbit() { this.$toast.loading({ duration: 0, message: '加载中原创 2021-09-18 15:23:14 · 1666 阅读 · 1 评论 -
vant-tabbar 点击后icon未变色,重复点击才变色
vant-tabbar 点击后icon未变色,重复点击才变色原因上代码原因我是在各个页面中引入的vant-tabbar,点击的时候虽然跳转了,但是双向绑定的v-model="activeName"的activeName并没有改变,所以只要改变activeName即可。上代码van-tabbar v-model="activeName"> <van-tabbar-item icon="home-o" replace to="/">首页</van-tabbar-item&原创 2021-09-18 15:12:49 · 3594 阅读 · 3 评论 -
vue虚拟列表-vue-virtual-scroll-list
vue虚拟列表-vue-virtual-scroll-listvue虚拟列表-vue-virtual-scroll-listvue虚拟列表-vue-virtual-scroll-list使用场景安装使用使用场景因为公司做了类似于百度网盘的竞品,所以用户如果上传了很多的文件,就会造成页面DOM元素的过多,然后因为需要操作DOM元素,所以页面会变得很卡。所以用虚拟列表来解决。安装安装的话这个插件有2个版本的,一个是1版本,目前更新到2版本了,二版本功能更加的强大。这里使用了1版本,通俗易懂一点。n原创 2021-08-13 09:26:35 · 5540 阅读 · 3 评论 -
video.js实现鼠标移入播放及根据鼠标移动位置播放对应帧及进度条显示
这里写目录标题video.js安装及使用鼠标移入播放移出停止播放根据鼠标移动位置播放对应帧及进度条显示这段时间都是自主学习,有些无聊了,在我的强烈要求下我师父让我做一个类似于B站视频预览的效果,效果如下图,然后让我看video.js的文档来实现,现在做一个总结。video.js安装及使用npm install video.js//在main.js中引入import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.pr原创 2021-06-23 00:01:29 · 5261 阅读 · 10 评论 -
Vue Promise封装接口get和post
Vue Promise封装接口因为实际开发的时候要和别人对接口,有时候不仅是和一个java对接口,要和很多人对,这个时候页面在请求数据的时候就比较烦了,如果不对接口做封装的话,后面切换的时候每个页面都要改地址,然后还有就是Promise,我看了我师父的代码,如下图是我的一些理解不知道对不对。Vue.prototype.$http = http;Vue.prototype.$post = function(url, data) { return new Promise((resolve, rej原创 2021-06-03 15:40:31 · 1157 阅读 · 2 评论 -
query和params的区别
query和params的区别queryparams这两个都是跳转url的时候传递参数。query可以用name和path来传递,但是params只能用name来传递,query是直接在url中,页面刷新后url传递的参数依旧在,params在刷新跳转页面的时候就没有了,下面实现一下具体的代码。这个是在router注册的代码点击传递input的内容query可以看到path和name都是可以的http://localhost:8080/#/loginsuccess?loginname=原创 2021-06-03 15:19:11 · 6972 阅读 · 0 评论 -
el-select下拉框自定义内容添加多选框以及图片等
el-select下拉框自定义内容添加多选框以及图片等。需求介绍在下拉框中添加多选的按钮以及头像等等。// An highlighted block<template> <div class="selectCheckbox"> <div @click="selectNone" class="select-header"> 识人 <div class="select-box" v-show="selectboxIsshow原创 2021-05-31 15:18:36 · 6204 阅读 · 3 评论 -
vue-infinite-loading的使用方法
vue-infinite-loading在项目中有的时候会使用分页,有的时候会使用下拉加载数据,分页就用element ui的分页就可以了,下拉加载就可以用vue-infinite-loading。import InfiniteLoading from "vue-infinite-loading";components: { InfiniteLoading, fileUpload, discernItem, discernSubtitle }, <!-- 下拉加载开始 -->原创 2021-06-16 14:05:49 · 4590 阅读 · 0 评论 -
Vue中el-dialog弹窗的父子组件传值
Vue弹窗的父子组件传值父传子子传父父传子父传值就直接在引用的组件中通过props传递就可以了,这里传递手机号码和控制弹窗的dialogVisble。父组件代码引入组件及点击按钮传递visble子组件代码只要在props中接受就可以使用了效果图:这里是传递了控制弹窗的visble和手机号码,在关闭弹窗的时候子组件要把visble重新传递给父组件。子传父子传父用的是自定义点击事件父组件代码: <test-dialog :dialogVisble="Visble" @c原创 2021-06-16 13:25:44 · 12902 阅读 · 0 评论