javascript
文章平均质量分 53
李墨瞳
白茶清欢无别事,我在等风也等你。
展开
-
vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
vue+element的弹窗,自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件,不允许拖到可视范围之外了。添加了弹窗如果有表格,对表格进行自适应的功能原创 2021-12-10 00:43:36 · 3477 阅读 · 3 评论 -
2021-03-09 微信小程序多次之后无法跳转问题
出现的场景:小程序详情页或者是设置页,用wx.navigateTo 进行页面之间跳转,多次之后,无法继续跳转。原因:wx.navigateTo 最多跳转10层,超过就无法跳转了。解决方法:使用wx.navigateBack,返回上一页或者上上页。例子: choose(e){ let id = e.detail.value let name = '' let cityId = '' // console.log(e.currentTarget.dataset.原创 2021-03-09 12:02:42 · 1624 阅读 · 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 · 1476 阅读 · 5 评论 -
js跳出循环(不能使用map,要用for,some,every)
数组遍历的方法很多,map,forEach,等,这些方法都不能使用break中断循环,也不能使用return来返回到外层函数。如果需要跳出循环,使用for循环就可以。需要跳出循环的场景:页面做多个数组的非空判断,做提示语。如果有一个出现非空,就提示具体那一个,而不是一口气把所有空数组都判断,然后全部提醒。 const arrBox = [ {name:'productData',msg:'产品至少需要一个!'}, {name:'generalSoluti原创 2020-09-09 14:14:28 · 1886 阅读 · 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 · 4208 阅读 · 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 · 5427 阅读 · 2 评论 -
element表格嵌套表单进行验证
拿到需求是表格需要能动态增加,然后又根据归还方式不同,如果是邮寄方式,后面快递信息都是必填。如果不是邮寄方式,那后面数据就不用填。先把效果展示出来需要进行每一项表单里面的数据进行验证!查element找到了需要的代码。我挑重要的说。因为是动态的,所以prop绑定的时候需要不能唯一,就是动态数据。官方写法:prop="'domains.' + index + '.value'"其实主要就是这个了。然后添加验证规则就行。我直接附上代码记录一下HTML代码:<el-t原创 2020-05-09 15:01:42 · 7338 阅读 · 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 · 2049 阅读 · 3 评论 -
typeScript初探
TypeScriptTypeScript中文网是什么?TypeScript是微软公司开发的一款开源的JavaScript超集语言!JavaScript超集: 当前任何JavaScript都是合法的TypeScript代码!TypeScript主要为JavaScript提供了类型系统和ES6语法的支持!Flow是一个类型检查工具,TypeScript是一种开发语言!TypeScript...原创 2019-10-11 14:18:45 · 157 阅读 · 0 评论 -
vue中tab+scroll实现上拉加载更多下拉刷新
前言:多数的Scroller插件不是很容支持多个tab栏,或者是支持,但是数据又容易错乱。用过better-scroll,vue-scroller2个插件,不可否认,如果不是有tab栏的话,这其中任何一个插件都完全能够驾驭,性能也很优秀。但是如今tab栏加下拉刷新,上拉加载更多这种需求太多了。当我尝试了将近2天,各种调试更改样式,都没办法达到预期的效果。最终只能忍痛放弃这2个插件。实现...原创 2019-07-30 18:10:35 · 1528 阅读 · 0 评论 -
7.10身份证号码验证
这个需求很普遍,不记得从哪里搜刮来的方法了。记一下,这几个方法比较严谨,验证18位和15位身份证号。//验证身份证号validCard: function(idCard) { idCard = this.trim(idCard.replace(/ /g, "")); //去掉字符串头尾空格 if (idCard.length == 15) { return th...原创 2019-07-10 11:15:31 · 336 阅读 · 0 评论 -
5.14 echarts数据合并问题
用echarts画图的时候,不同的数据渲染同一块画布,可能出现数据合并问题。类似第一次后台给3条数据,图上渲染是3条折线。第二次后台给1条数据,这个时候,图上还是有3条。仔细一看,就会发现,剩下的2条是之前数据,没有变化,这就是数据合并了。处理起来很简单。echarts文档有给出答案。查API:setOption.所以我是这样处理的(vue):this.chart.setOption...原创 2019-05-14 11:06:53 · 4112 阅读 · 7 评论 -
echarts中国地图分七大区
接到这个需求我一开始以为特别简单,像这种需求,网上应该一搜一大把。开开心心说一下午就完事,结果狠狠打脸。不过最后还是弄出来了,因为有大佬相助,我就记录一下我解决的方法吧。很简单,用了大佬的文件。我贴一下大佬的github地址作者是chfw。这个地址就是我用的文件的地址。大家打开就能看到运行成功的中国七大区分区。大佬写的很清楚,所以我也不说怎么弄的。我说一下我遇到的问题。因为我用的是vu...原创 2019-04-28 11:24:24 · 7150 阅读 · 6 评论 -
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 · 719 阅读 · 0 评论 -
移动端之骨架屏(vue示范)
转自知乎作者:小蘑菇小哥https://zhuanlan.zhihu.com/p/48601348 让网页展现的更快,官方说法叫做首屏绘制,First Paint 或者简称 FP。首屏时间 FP 并不要求内容是真实的,有效的,有意义的,可交互的。 大体来说,骨架屏的优势在于:1、在页面加载初期预先渲染内容,提升感官上的体验。2、一般情况骨架屏和实际内容的结构是类...转载 2018-12-24 15:33:36 · 6342 阅读 · 0 评论 -
从Event Loop研究javascript异步以及浏览器更新渲染时机
因为这些文章都很长,而且例子非常详细。所以我搬过来。1.代码例子非常丰富。简单上手作者:杨敬卓地址: https://github.com/aooy/blog/issues/5 2.这篇文章讨论了浏览器的工作原理(虽然是2011年的文章,但是非常经典)作者:Tali Garsiel , Paul Irish地址:https://www.html5rocks.com/zh/t...原创 2018-12-06 13:53:28 · 297 阅读 · 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 · 814 阅读 · 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 · 2688 阅读 · 0 评论 -
Jsonp封装
//jsonp原理: 通过src属性发出去的请求,是没有跨域限制的,//jsonp其实就是利用了这个特性,动态的创建一个script标签,通过script标签的src属性发送请求//最终返回回来的数据是一个函数调用functionjsonp(url,params,callback){//1.先创建一个script标签varscript=d原创 2017-12-12 21:18:48 · 528 阅读 · 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 · 1216 阅读 · 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 · 920 阅读 · 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 · 232 阅读 · 0 评论 -
js一键控制checkBox正反选以及随着变化取消全选状态
一:先上一段html代码:<div class="wrap"> <table> <!--全选反选按钮所在行--> <thead> <tr> <th> <input type="checkbox" id="selectAll"/> </th> <th>菜名</th> <th>饭店</th> </tr>原创 2018-01-31 22:55:54 · 711 阅读 · 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 · 864 阅读 · 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 · 351 阅读 · 0 评论 -
require引用layer的时候,无法引入layer.css
提供一种很不优雅的解决办法,强制性用link引入css文件。等我想出具体怎么在JS中引用的时候再来更新吧。原创 2018-02-27 10:24:06 · 3457 阅读 · 0 评论 -
H5唤醒APP或打开应用商店下载(未完成)
$(function () { var register = $("#register");// 添加注册并且打开APP事件 register.click(function(e){ e.preventDefault(); deepLink(); }) function deepLink(){ // 判断系统 var o =null; v...原创 2018-04-11 10:47:17 · 6261 阅读 · 0 评论 -
art-template 4.0时间戳转时间
今天用模板渲染的时候,所有直接展示的都没问题,但是后台传时间戳需要我这边进行相关处理。看了网上很多处理方法,只能说用新的版本的art,他们的helper方法已经过时!坑了我好几次。然后我也用了他们的过滤器,发现每次过滤器都报错说没有函数!一整天都在坑里,晚上有大神帮忙分析,终于爬出坑。现在记录一下;以下,是我的模板;用的是原生语法, <script id="tpl-jjunpaid" ty...原创 2018-04-18 23:28:01 · 1583 阅读 · 0 评论 -
融云集成一个聊天室页面(vue版本)
首先,说一下使用情况。因为需求,需要做一个聊天室页面,因为不是专门的点对点聊天,是类似直播,但是是文字直播平台的那种。现在一般的课堂,可能会需要这种。分为2个端,一个是讲师端,一个是用户端。讲师端可能是单独的APP。用户端的页面可能是内嵌到专门的APP,或者是微信公众平台。我这次做的就是一个用户端。讲师端由原生来写,因为需要H5页面能兼容微信还有在手机端都能用。 然后,说明一下,用了vu...原创 2018-09-21 14:58:04 · 7145 阅读 · 30 评论 -
vue下脚手架区分测试环境和正式环境
在网上找来找去,找到很多资料。自己实践后再统计一下。运用环境:公司增加测试环境,用脚手架搭出来的环境只有开发和线上,也就是只有dev和prod。现在增加一个test环境。很多其他的资料是用了一个插件。我这个方法不用插件。好了,话不多说。开始搞。1.在build文件夹中创建build-test.js文件build-test.js中的代码很简单,就两行。主要就是配置一个环境变量用以区别测试...原创 2018-09-21 15:26:04 · 2812 阅读 · 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 · 16793 阅读 · 10 评论 -
数组去重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 · 828 阅读 · 0 评论