JS且走且珍惜
文章平均质量分 53
记录工作中的js运用时遇到的坑和解决办法。
李墨瞳
白茶清欢无别事,我在等风也等你。
展开
-
vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
vue+element的弹窗,自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件,不允许拖到可视范围之外了。添加了弹窗如果有表格,对表格进行自适应的功能原创 2021-12-10 00:43:36 · 3377 阅读 · 3 评论 -
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 · 1064 阅读 · 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 · 1047 阅读 · 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 · 1454 阅读 · 5 评论 -
js跳出循环(不能使用map,要用for,some,every)
数组遍历的方法很多,map,forEach,等,这些方法都不能使用break中断循环,也不能使用return来返回到外层函数。如果需要跳出循环,使用for循环就可以。需要跳出循环的场景:页面做多个数组的非空判断,做提示语。如果有一个出现非空,就提示具体那一个,而不是一口气把所有空数组都判断,然后全部提醒。 const arrBox = [ {name:'productData',msg:'产品至少需要一个!'}, {name:'generalSoluti原创 2020-09-09 14:14:28 · 1874 阅读 · 2 评论 -
微信小程序input和textarea数据清除与自动填充
记录一个小问题:情况是这样的,需要一个意见弹窗,能自动填充联系方式。但是我怎么setData都没办法实现。后来发现其实是因为写HTML样式时候没有写value属性。只要写了,数据就能正常setData带出数据了,也能正常设置数据为空了。具体代码是这样: <textarea class="weui-textarea" style="font-size:26rpx;height:110px;" bindinput="descText" maxlength="200" value="{{des原创 2020-07-22 16:37:32 · 4126 阅读 · 0 评论 -
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 · 5259 阅读 · 2 评论 -
element表格嵌套表单进行验证
拿到需求是表格需要能动态增加,然后又根据归还方式不同,如果是邮寄方式,后面快递信息都是必填。如果不是邮寄方式,那后面数据就不用填。先把效果展示出来需要进行每一项表单里面的数据进行验证!查element找到了需要的代码。我挑重要的说。因为是动态的,所以prop绑定的时候需要不能唯一,就是动态数据。官方写法:prop="'domains.' + index + '.value'"其实主要就是这个了。然后添加验证规则就行。我直接附上代码记录一下HTML代码:<el-t原创 2020-05-09 15:01:42 · 7297 阅读 · 0 评论 -
前端开发如何获取视频第一帧作为封面
首先说明一下,浏览器或者手机需要支持video标签。从H5本身来说,这里用到了video的一个属性,poster(规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。).然后还有一个video的事件,loadeddata(当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。)。所以要提醒一下,如果不是用框架来监听的,就自己...原创 2020-04-26 12:46:30 · 8480 阅读 · 5 评论 -
条形码,一维码解析(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 · 1992 阅读 · 3 评论 -
art-template 4.0时间戳转时间
今天用模板渲染的时候,所有直接展示的都没问题,但是后台传时间戳需要我这边进行相关处理。看了网上很多处理方法,只能说用新的版本的art,他们的helper方法已经过时!坑了我好几次。然后我也用了他们的过滤器,发现每次过滤器都报错说没有函数!一整天都在坑里,晚上有大神帮忙分析,终于爬出坑。现在记录一下;以下,是我的模板;用的是原生语法, <script id="tpl-jjunpaid" ty...原创 2018-04-18 23:28:01 · 1569 阅读 · 0 评论 -
gulp打包的gulpfile.js,自用~~
1、最后运行的时候,cmd中输入gulp就能打包以及开服务器了2、如果要执行js文件,需要下载gulp-cli;Npm i gulp-cli;var gulp = require('gulp'), uglify = require('gulp-uglify'), // webpack = require('webpack'), //named = require('vinyl-nam...原创 2017-12-12 21:11:32 · 852 阅读 · 0 评论 -
js中的window.self,window.parent,window.top详解
转载自:http://blog.csdn.net/zdwzzu2006/article/details/6047632在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。转载 2018-01-20 10:14:47 · 343 阅读 · 0 评论 -
常用插件,持续更新中~~
数据可视化:echartshttp://echarts.baidu.com;highcharts https://www.hcharts.cn/demo/highchartsweb弹出层:Layer //web弹出层组件http://layer.layui.com/富文本编辑器:UEeditorhttp://ueditor.baidu.com/website/index.html原创 2017-12-12 20:58:55 · 221 阅读 · 0 评论 -
js输入关键词生成标签代码
转载自:http://www.lanrenzhijia.com/tab/4701.htmljs输入关键词生成标签代码 添加 var tagcon = $("tagcon"); var addBox = $("addBox"); var addBtn = addBox.children[1]; var intx转载 2018-01-11 14:28:55 · 1201 阅读 · 0 评论 -
数组遍历filter,forEach,map,every,some,reduce
1.filter:body>ul>li>ahref="#">sdffsdfa>li>ul>script>// filter:指数组filter后,返回过滤后的新数组。用法跟map相似:// array.filter(callback,[ thisObject]);vardata =[0,1,2,3];var原创 2017-12-12 21:04:02 · 886 阅读 · 0 评论 -
Jsonp封装
//jsonp原理: 通过src属性发出去的请求,是没有跨域限制的,//jsonp其实就是利用了这个特性,动态的创建一个script标签,通过script标签的src属性发送请求//最终返回回来的数据是一个函数调用functionjsonp(url,params,callback){//1.先创建一个script标签varscript=d原创 2017-12-12 21:18:48 · 517 阅读 · 0 评论 -
webpack打包js文件,自用~~
const path = require('path')const webpack = require('webpack')const htmlWebpackPlugin = require('html-webpack-plugin')// 每次打包之前,自动删除文件夹const cleanWebpackPlugin = require('clean-webpack-plu原创 2017-12-12 21:09:02 · 2656 阅读 · 0 评论 -
js实现深拷贝
实现深拷贝,首先遍历,判断是否为对象,是对象的话再判断对象值是否为空,为空就让键等于空;不是空,判断对象是否为数组,是数组就递归调用深拷贝函数。不是对象,就让p[i]的值给c[i];function deepCopy(p,c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object原创 2017-12-12 21:00:48 · 799 阅读 · 0 评论 -
数组去重4种方法
var arr=[1,2,3,4,2,3,1,5,3];//去重方法一:for..in...function removeRepeat(arr){var newArr=[];for(var i in arr){if(newArr.indexOf(arr[i])newArr.push(arr[i]);} }return newArr;}方原创 2017-10-12 18:48:18 · 797 阅读 · 0 评论 -
typeScript初探
TypeScriptTypeScript中文网是什么?TypeScript是微软公司开发的一款开源的JavaScript超集语言!JavaScript超集: 当前任何JavaScript都是合法的TypeScript代码!TypeScript主要为JavaScript提供了类型系统和ES6语法的支持!Flow是一个类型检查工具,TypeScript是一种开发语言!TypeScript...原创 2019-10-11 14:18:45 · 150 阅读 · 0 评论