vue
文章平均质量分 61
ERROR!!!!!!
这个人很懒,什么都写了。
展开
-
Vue3+TypeScrip学习笔记(更新中)
目录VUE3基本变化VUE3基本变化源码1,源码通过monorepo的形式来管理源代码:mono:单个;repo:rebository仓库;主要是将许多项目的代码存储在一个repository中;多个包本身相互独立,可以有自己的功能逻辑、单元测试等,同时又在同一个仓库下方便管理;模块划分更加清晰,可维护性、可拓展性更强;2,源码使用ts进行重写:vue2.x,使用Flow来进行类型检测;vue3.x源码全部使用TS进行重构了性能使用proxy进行数据劫持:vue2.x时候,使用O原创 2021-05-18 20:59:44 · 208 阅读 · 0 评论 -
html导出PDF,截取带滚动条html结构全部目标内容且保留样式
前人的基础上稍加修改优化了一下,解决了html2Canvas只能截取可见html部分问题以及截取全部目标内容后样式失效问题。具体问题需要具体分析。exportPDF(){//点击事件 //imageDom为pdf目标,注意imageDom的样式需要和body平级,注意不要污染全局 var width = this.$refs.imageDom.style.width var cloneDom = this.$refs.imageDom.cloneNode(true) cloneDom.s原创 2021-01-13 10:47:05 · 1160 阅读 · 1 评论 -
前端 文件流 / blob / file 转换
目录需求以及背景解决:关于blob/file初始文件流file->formData说说file->blob对象需求以及背景这两天有个需求:把上传的/后台返回的图片文件加一个图片转换文字的ocr功能。目前遇到两种情况,一个是从后台接收的文件流,类似以下:一个是用elementui组件获取的file对象类型格式文件。解决:关于blob/fileblob参数要求看这个https://developer.mozilla.org/zh-CN/docs/Web/API/Blobfile原创 2020-09-30 17:43:35 · 22679 阅读 · 2 评论 -
vue 刷新icon小动效
点击icon图标,旋转一周。最先尝试的逻辑是,给一个控制参数refresh,初始false,icon绑定两个样式,类似以下:<i :class="[refresh? 'el-icon-refresh go' : 'el-icon-refresh']" @click="iconClick"></i> el-icon-refresh是elementui自带图标.go { transform: rotate(360deg); transition: al原创 2020-08-24 17:09:59 · 2955 阅读 · 1 评论 -
数据加载等待 elementUI + vue
数据在加载过程中页面显示空白会让用户感到焦虑烦躁,加一点小动态可以解决这种问题。v-if控制页面三种状态:1、加载中;2、加载无数据;3、展示数据isloading true加载icon显示, false隐藏,初始truehasdata true无数据icon显示,false隐藏,初始false#mermaid-svg-DT1Dzo5kwcKcNgaE .label{font-family:'trebuchet ms', verdana, arial;font-family:var(-原创 2020-08-22 11:57:22 · 1473 阅读 · 0 评论 -
文字超出三行显示省略号
如下:overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;但是ie浏览器是个孤儿,它不兼容,搜索了很多其他办法觉得甚是麻烦,加上时间紧迫,如下:给你个眼神自己体会。data.length>38?data.substring(0,38)+'...':data...原创 2020-08-21 18:11:49 · 2292 阅读 · 0 评论 -
中央事件总线 && onmessage/postMessage通信
目录原创 2020-06-16 11:33:11 · 468 阅读 · 3 评论 -
强迫症患者福音!筛掉后台返回很多无用的字段!
表单回填的时候,后台传回来很多原表单里没有的无用字段。回填以后在编辑功能下需要把原表单字段再传给后台。虽然这个没用的字段传来传去不影响什么,但要是太多了,谁受得了。以下://this.form 原表单数据容器//res.data 接口返回数据for(var k in this.form){ if(res.data.hasOwnProperty(k)){ this.form[k] = res.data[k]; }}...原创 2020-05-26 17:14:29 · 633 阅读 · 0 评论 -
elementUI+VUE 表格数据单行移动
目录需求说明代码步骤需求说明选中表格单行数据,点击上移或下移实现数据移动。操作按钮单独在表格上。代码步骤一、索引获取原有的从后台获取的数据中并没有存放索引,且表格中数据是根据前端的索引编写的序号。添加** :row-class-name=“tableRowClassName” **属性方法<el-table ref="multipleTable" :data="tableData" height="calc(100% - 38px)" tooltip-effect="dark" sty原创 2020-05-15 12:03:13 · 1147 阅读 · 0 评论 -
记录一些好用的插件
1、vue.js devtoolsvue的调试工具欢迎补充交流。原创 2020-04-25 22:39:12 · 137 阅读 · 1 评论 -
请求参数在IE浏览器乱码,请求失败报错
原因1:GET 和 POST混用了。GET请求方式需要参数紧跟其后。两种请求方式其他区别就是你所知道的。高级浏览器一般是不报错的,但是IE浏览器会报错。上香。原因2:IE浏览器转码问题,参照上一篇blog以后遇到其他参数报错报错原因再总结。...原创 2020-03-31 21:02:09 · 304 阅读 · 0 评论 -
根据身份证号来计算年龄与性别 JavaScript && Vue.js
目录计算规则需求环境代码今天我要来写一些笨重的代码(以后肯定会写出简洁的别人都不懂的代码!!!)计算规则据我所了解(可能了解的不是很准确,大家自行网上搜索一下),我国身份证的规则如下:身份证位数出生年份出生月份出生日期性别15位(一代)7、8位9、10位11、12位15位 奇男偶女18位(二代)7、8、9、10位11、12位13、14位17位...原创 2020-01-03 17:22:48 · 1268 阅读 · 1 评论 -
ElementUI select组件下拉选中后同时获取label(name)和value(code)返回给后台
目录使用说明代码使用说明ElementUI中select组件,一般只能获到一个vlue值,通过value值把label展示在页面中。如果仅仅做展示用,这没有太大问题。但是涉及到交互,需要把选中的option的名称和code一起再返回给后台就需要多写几行代码了。话不多说。代码<el-form-item label="饺子" prop="zbldid" label-width="70p...原创 2019-12-27 18:01:53 · 8922 阅读 · 1 评论 -
ElementUI/Vue 联级选择器Cascader 在实际中的应用
目录页面展示代码页面展示代码html部分<el-form ref="form" :model="form" label-width="140px"> <el-form-item label="指定分类(筛选)" prop="nrflCodeId"> <el-cascader :options="nrflOptions" ref="cascaderAdd...原创 2019-12-18 20:13:30 · 462 阅读 · 0 评论 -
Vue +ElementUI table中show-overflow-tooltip属性在IE11中的缺陷
这里写自定义目录标题bug出现背景bug阐述解决方案bug出现背景Vue 2.6 +ElementUI 2.12.0 +IE11浏览器bug阐述当鼠标指针指向table组件带有show-overflow-tooltip属性的单元格时,会出现tips提示信息,此时不一定鼠标指针位置,滑动鼠标滚轮,tips信息并不消失,继续滚动会超出table范围继续显示。解决方案当监听到鼠标滚动事件时,...原创 2019-10-25 11:47:02 · 2016 阅读 · 0 评论