Vue
言_青
JS 从入门到放弃~
展开
-
Vue+Less 动态更改主题色(动态参数改变,主题色随之改变)
vue less根据动态参数,修改主题色原创 2022-05-28 17:19:25 · 1886 阅读 · 2 评论 -
解决:Vant[v2.8.3] NoticeBar 只滚动一次
场景: 使用Vant插件的NoticeBar组件,在浏览器中正常,但在ios微信上只滚动一次。解决: 更新Vant包。经过官网查看源码:最新版本[v2.12.3]的滚动结束事件中,重新开始命令的注释中解释: // using nextTick won’t work in iOS14而我用的版本中,用的就是$nextTick监听的,测试的系统为ios14。后将Vant包更新成了最新版本后解决。...原创 2021-01-13 11:12:50 · 1182 阅读 · 0 评论 -
Element-ui之table封装
二次封装el-table组件,以便使用。包含三个部分:使用说明、创建、引用。前沿:1. 包含:表格展示、分页、数据字典转换展示、时间格式转换展示、数组转换成逗号分割字符串展示、表格内按钮、表格内switch按钮、单选、多选等众多功能。2. 这里设置从父组件中传输过来的对象和数组都用JSON串接收,目的是为了方便监听数值变化。3. 代码为手写,已检查,但不保证没有单词写错,如报错,请检查一...原创 2020-01-20 17:14:33 · 1489 阅读 · 1 评论 -
Element-ui之upload封装
二次封装el-upload组件,以便使用。包含两个部分:创建、引用。说明:1. 包含:组件本身有的各种属性控制、是否拖拽、扩展按钮、上传前的各种校验(图片的话需要压缩)、预览附件(这里支持pdf和图片预览,支持Excel下载,word没写,原理应该和Excel一样,其余的暂不支持)等。2. 这里设置从父组件中传输过来的对象和数组都用JSON串接收,目的是为了方便监听数值变化。3. 代码为...原创 2020-01-08 10:34:33 · 2353 阅读 · 2 评论 -
Vue + pdfJs 预览PDF
简介: vue项目中结合el-dialog组件,以全屏的形式将pdf流通过pdfJs展示出来(如果是本地的pdf文件,则直接拿到本地的pdf文件转化成url嵌入iframe即可,无需pdfJs插件)。原理: 将获取到的pdf文件流文件通过window的createObjectURL方法转换成url,和pdfJs的目录路径拼接成链接,用iframe嵌入的方式展现。步骤:一、创建预览文件。1....原创 2020-01-03 14:24:12 · 1838 阅读 · 0 评论 -
Element-ui之radio封装
对el-radio和el-radio-group进行二次封装,以便使用。分两步:创建、引用。说明 :1. 可选项一般是请求数据字典的值以供勾选,假设数据字典的接口为’/getDictionary’,请求参数为code,数据字典中的展示值字段为’label’,选中所传值字段为’value’。2. 也有特定接口请求可选项的,需要指定特定的请求接口url、参数和展示的value和label值。...原创 2019-12-31 18:41:35 · 1898 阅读 · 0 评论 -
Element-ui之select封装
二次封装el-select组件,以便使用。包含两个部分:创建、引用。说明 : 下拉选项框一般是请求数据字典的值以供选择,假设数据字典的接口为’/getDictionary’,数据字典中的展示值字段为’label’,选中所传值字段为’value’。也有其余接口请求下拉选择的,需要指定特定的请求接口和展示的value和label值。一、创建公共组件vue文件 — comSelect.vue:&...原创 2019-12-31 10:17:33 · 3875 阅读 · 2 评论 -
Vue (用javaScript/JS)调用媒体摄像头拍照扫描银行卡
概述:在Vue中调用摄像头拍照进行银行卡识别。流程:vue中调用媒体摄像头(无前后摄像头切换功能)——>根据规定的框(前端自己定制)放置银行卡——>将识别的图片通过接口传到后台,后台识别出返回给前端银行卡的相关数据。原理:调用媒体摄像头,应用的是navigator.mediaDevices.getUserMedia功能(API网站)调用摄像头拍摄视频流,将录像流放到vid...原创 2019-08-23 18:06:55 · 4644 阅读 · 9 评论 -
Element-ui Tree 详解:懒加载与非懒加载、选择框、节点刷新(手动刷新)、树数据封装、展开选择节点所在树
概述:对Tree的懒加载与非懒加载进行分析,进行某个树节点的刷新,在单选、多选下对树进行初始化反选并展开选择节点等。一、对Tree是否懒加载说明:1.懒加载:Tree的懒加载,用一个属性控制:lazy。使用lazy,就要使用load来加载数据进行渲染树。1-1.原理:初始化触发load函数先加载初始数据,通过点击某个节点,触发load函数,来加载这个节点下的子节点。1-2.比较适合...原创 2019-08-09 11:24:36 · 6803 阅读 · 1 评论 -
el-upload用代码手动删除附件
this.$refs.upload.abort(file) // upload: el-upload的ref值;file:File类型,file文件本身fileList.splice(fileList.indexOf(file), 1) // fileList: 文件列表,钩子函数中的fileListthis.onRemove(file, fileList) // 调用钩子函数on-remov...原创 2019-08-13 15:27:37 · 4069 阅读 · 0 评论 -
解决:Vue2 +Elementui+dll-webpack项目tooltip和table中的show-overflow-tooltip无效
描述:在Vue+Webpack项目中,使用ElementUI插件时,toolTip使用时并不显示,在table中的show-overflow-tooltip使用,超出部分直接超出,既不显示省略号,鼠标浮上去后也不显示tip提示文字,开发和打包后都不行。分析:经查看,table中的show-overflow-tooltip应用的也是tooTip,归根结底,还是tooTip不显示,可按照这个方向找...原创 2019-06-28 11:59:59 · 2361 阅读 · 1 评论 -
Vue + Element-ui upload 上传前压缩图片
场景:在Vue项目里,利用ElementUI的upload组件,上传图片,在图片上传前,对图片进行压缩。做法概述:在before-upload方法中对图片文件进行处理,并返回处理后的文件。本人查看了一下upload的源码,发现,beforeUpload方法中,除了可以返回图片校验时的true/false,还可以以return new Promise的方式返回文件,如返回文件,则上传时,以返...原创 2019-07-08 11:47:28 · 9349 阅读 · 27 评论 -
Vue CLI 3(三)—— 配置不同环境下数据请求域名,即axios的baseUrl
前面讲完了vue cli3的相关配置,现将数据请求域名配置单独拉出来讲。vue的配置里vue.config.js中相关的教程有讲过,开发环境下,配置后端API 服务器,可使用devServer.proxy。但通常情况下,项目在开发环境下请求的接口地址和生产环境下的不一样,需要根据不同的环境,切换不同的接口地址域名。上篇文章中,本人直接配置在了api.js中:axios.default...原创 2019-03-05 14:04:24 · 14732 阅读 · 4 评论 -
Vue CLI 3(二)——VUE项目配置
接上篇文章(过去了太久了,唉),在搭建好了新的Vue的框架并成功运行起来后,开始进行相关的配置和项目开发。配置之前,需要将官网教程看完:Vue Cli3教程;相关配置参数。一、根据官网教程,一些需要手动的配置,要自己建一个名为vue.config.js的文件来覆盖默认配置,这个配置文件网上都有的,这里列出我自己的配置文件:/** * vue.config.js * vue.con...原创 2019-03-01 18:12:45 · 483 阅读 · 0 评论 -
Vue CLI 3(一)——从卸载Vue CLI 2开始搭建新VUE项目并同时使用Vue CLI 2
Vue CLI 3问世后,因为公司项目紧张,一直没有机会学习。在项目上线后,本人终于抽出时间来自学一下。下面记录本人从卸载Vue CLI 2更新Vue CLI 3开始,一步步搭建VUE项目,并同时能用Vue CLI 2 启动Vue CLI 2搭建的项目。注:本人电脑MAC。一、卸载Vue CLI 2,安装Vue CLI 3:1.关于旧版本:Vue CLI 的包名称由 vue-cl...原创 2018-12-17 13:38:47 · 1168 阅读 · 0 评论