vue
文章平均质量分 51
李墨瞳
白茶清欢无别事,我在等风也等你。
展开
-
vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
vue+element的弹窗,自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件,不允许拖到可视范围之外了。添加了弹窗如果有表格,对表格进行自适应的功能原创 2021-12-10 00:43:36 · 3466 阅读 · 3 评论 -
20210728vant中的textarea的autosize的minHeight失效问题
1.使用了原创 2021-07-28 14:47:52 · 7144 阅读 · 0 评论 -
2021-04-28 前端文件流转化(转成Excel)
需求:公司的文件传输,后端传给前端是一个流文件,也就是一个blob文件。需要转换成对应的附件。js:export function exportSearchList(dowLoadFileName, result) { const blob = new Blob([result]); const fileName = dowLoadFileName + '.xlsx'; // 判断浏览器 var brower = ''; if (navigator.userAgent.inde原创 2021-04-28 17:29:46 · 1093 阅读 · 0 评论 -
2021-01-28 element表格动态设置table高度
因为需要在不同大小的电脑上,最大程度展示table的内容加上分页。所以需要动态设置。记录一下<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" stripe border :height="tableHeight" :header-cell-style="{color:'#fff',backgroundColor:'#4378e4'}" style="width: 100%.原创 2021-01-28 17:20:42 · 660 阅读 · 0 评论 -
element表格拖拽(sortablejs)
需求背景:有时候写公司企业历程需要按照手写的年份排序,但是企业历程又可能写成 xxx年以前,为了方便用户排序体验,使用表格拖拽排序。使用了 sortablejs2.安装npm i sortablejs -s -d3.使用注意:<el-table></el-table>必须带有row-key="xx"这个属性,不然就会拖拽渲染表格出问题,这个问题就是你可能拖拽了,你看数据也变了,但是表格顺序没变,其实是因为表格渲染的时候,用了virtual-dom diff算法,原创 2020-11-10 11:38:59 · 1059 阅读 · 0 评论 -
nuxt+element官网(不包括pm2部署)
首先说一下需求和背景: 因为公司需要对老的官网进行重新设计,配套的可配置官网的后台管理系统也需要重新设计。因为需要做SEO,我本身也是用了很多年的vue,所以优先选择SSR的nuxt,因为官网比较简单,所以暂时没遇到多大的坑。 1.安装nuxt:nuxt官网。 2.创建之后的文件目录: 注意2点:A:背景图需要放在static里面。在js里面引用的时候可以直接这样引用 'logoBox:["/images/logo1.png"], ' ...原创 2020-11-06 18:18:29 · 1471 阅读 · 5 评论 -
Viewer.js第一次点击图片无法显示解决方案(vue使用)
Viewer.js是一个大图预览插件。附上官网地址(https://fengyuanchen.github.io/viewerjs/)说明一下我的使用情况。点击图片查看,出大图预览不需要有预览小图。查看官网文档,下载js文件。引入文件。<link href="/Scripts/Common/viewer.min.css" rel="stylesheet"><script src="/Scripts/Common/viewer.min.js"></script&g原创 2020-06-02 09:56:01 · 5406 阅读 · 2 评论 -
element表格嵌套表单进行验证
拿到需求是表格需要能动态增加,然后又根据归还方式不同,如果是邮寄方式,后面快递信息都是必填。如果不是邮寄方式,那后面数据就不用填。先把效果展示出来需要进行每一项表单里面的数据进行验证!查element找到了需要的代码。我挑重要的说。因为是动态的,所以prop绑定的时候需要不能唯一,就是动态数据。官方写法:prop="'domains.' + index + '.value'"其实主要就是这个了。然后添加验证规则就行。我直接附上代码记录一下HTML代码:<el-t原创 2020-05-09 15:01:42 · 7333 阅读 · 0 评论 -
条形码,一维码解析(vue版本)
拉起摄像头或者是传入图片进行解析:第三方插件:quagga.js二维码插件:qrcodejs2.js(本篇暂时只记录条形码js解析)首先:npm i quagga -s -d在需要的页面引入:import Quagga from 'quagga' // 条形码 import QRCode from 'qrcodejs2'HTML:<...原创 2020-03-19 23:59:38 · 2038 阅读 · 3 评论 -
vue中tab+scroll实现上拉加载更多下拉刷新
前言:多数的Scroller插件不是很容支持多个tab栏,或者是支持,但是数据又容易错乱。用过better-scroll,vue-scroller2个插件,不可否认,如果不是有tab栏的话,这其中任何一个插件都完全能够驾驭,性能也很优秀。但是如今tab栏加下拉刷新,上拉加载更多这种需求太多了。当我尝试了将近2天,各种调试更改样式,都没办法达到预期的效果。最终只能忍痛放弃这2个插件。实现...原创 2019-07-30 18:10:35 · 1524 阅读 · 0 评论 -
5.14 echarts数据合并问题
用echarts画图的时候,不同的数据渲染同一块画布,可能出现数据合并问题。类似第一次后台给3条数据,图上渲染是3条折线。第二次后台给1条数据,这个时候,图上还是有3条。仔细一看,就会发现,剩下的2条是之前数据,没有变化,这就是数据合并了。处理起来很简单。echarts文档有给出答案。查API:setOption.所以我是这样处理的(vue):this.chart.setOption...原创 2019-05-14 11:06:53 · 4110 阅读 · 7 评论 -
融云集成一个聊天室页面(vue版本)
首先,说一下使用情况。因为需求,需要做一个聊天室页面,因为不是专门的点对点聊天,是类似直播,但是是文字直播平台的那种。现在一般的课堂,可能会需要这种。分为2个端,一个是讲师端,一个是用户端。讲师端可能是单独的APP。用户端的页面可能是内嵌到专门的APP,或者是微信公众平台。我这次做的就是一个用户端。讲师端由原生来写,因为需要H5页面能兼容微信还有在手机端都能用。 然后,说明一下,用了vu...原创 2018-09-21 14:58:04 · 7139 阅读 · 30 评论 -
vue下脚手架区分测试环境和正式环境
在网上找来找去,找到很多资料。自己实践后再统计一下。运用环境:公司增加测试环境,用脚手架搭出来的环境只有开发和线上,也就是只有dev和prod。现在增加一个test环境。很多其他的资料是用了一个插件。我这个方法不用插件。好了,话不多说。开始搞。1.在build文件夹中创建build-test.js文件build-test.js中的代码很简单,就两行。主要就是配置一个环境变量用以区别测试...原创 2018-09-21 15:26:04 · 2808 阅读 · 0 评论 -
vue导出excel表
方法一:vue2.0 + element UI 中 el-table 数据导出Excel 。https://blog.csdn.net/u010427666/article/details/79208145方法二:1.安装2个依赖包(其实是3个) npm install -S file-saver xlsxnpm install -D script-loader2.在项目中新...原创 2018-10-17 10:55:37 · 16790 阅读 · 10 评论 -
vue-cli2中的webpack打包文件地址出错问题
已经不是第一次遇到,结果今天还是再问了一遍我们另外一个前端小姐姐,来记录一下。首先放出报错信息: 当时反应就是,我Dev环境跑起来这么欢快,小老弟,你测试环境你怎么肥四啊?你背着我把文件存哪去了!然后想来想去去找度娘。emmm,信息特别杂乱。那就只能靠我另外一个前端小姐姐了。最后做了3点修改,就完成了。1:背景图片必须放在static里面。(我之前都不知道,小声bb)2:在c...原创 2018-11-15 13:39:30 · 706 阅读 · 0 评论 -
移动端之骨架屏(vue示范)
转自知乎作者:小蘑菇小哥https://zhuanlan.zhihu.com/p/48601348 让网页展现的更快,官方说法叫做首屏绘制,First Paint 或者简称 FP。首屏时间 FP 并不要求内容是真实的,有效的,有意义的,可交互的。 大体来说,骨架屏的优势在于:1、在页面加载初期预先渲染内容,提升感官上的体验。2、一般情况骨架屏和实际内容的结构是类...转载 2018-12-24 15:33:36 · 6338 阅读 · 0 评论 -
vue-simple-tree无法重置问题
问题:无法重置勾选项 解决:因为版本2.3.x中源码中缺少一段代码。(到今天为止,GitHub上作者暂时没有处理这个问题,所以没办法通过升级版本来解决这个问题。自己手动添加吧~) 修改路径:node_modules\vue-simple-tree\src\components\Item.vue ids (val) { if (val.indexOf(this.mode...原创 2019-01-10 10:14:43 · 718 阅读 · 0 评论 -
vue集成PC端融云音视频1对1聊天
2月中下旬的时候,接到需要集成融云音视频的需求。一开始不知道怎么下手,毕竟去年我做的只是文字之间的聊天,并没有集成音视频。然后分为2部分考虑,第一部分是考虑样式,第二部分是考虑实现逻辑。1.样式从样式开始,考虑到PC端,于是参考了微信的PC样式。从GitHub上找了一圈样式,终于找到比较满意的样式。放上链接:cdxofgithub的GitHub的这个地址。图片样式是这种。(截图压缩太厉害,...原创 2019-03-30 14:38:13 · 3219 阅读 · 0 评论 -
echarts中国地图分七大区
接到这个需求我一开始以为特别简单,像这种需求,网上应该一搜一大把。开开心心说一下午就完事,结果狠狠打脸。不过最后还是弄出来了,因为有大佬相助,我就记录一下我解决的方法吧。很简单,用了大佬的文件。我贴一下大佬的github地址作者是chfw。这个地址就是我用的文件的地址。大家打开就能看到运行成功的中国七大区分区。大佬写的很清楚,所以我也不说怎么弄的。我说一下我遇到的问题。因为我用的是vu...原创 2019-04-28 11:24:24 · 7133 阅读 · 6 评论 -
使用vue-handsontable遇到的坑以及解决办法
在百度上搜了很多关于这个插件的使用方法,有一个写的很详细的!本来已经很详细了,我再添点自己的内容。(ps:英语不好,面向百度编程_(:з」∠)_): 1.安装好之后就直接报错2个:第一个是es-2015没有模块,所以需要在我们的根目录文件npm install babel-preset-es2015 --save-dev 如果是用脚手架搭的架子,webpack的配置文件不需要再次更改。...原创 2018-06-21 18:48:34 · 22815 阅读 · 29 评论