自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(117)
  • 资源 (7)

原创 自定义ElementUI风格树形组件,详解递归组件的使用及事件数据传递,视图更新等问题

组件视图样式当我们做多级菜单或者权限列表管理的时候,大多会采用树形结构来实现,有的朋友为了省事,不想多费脑力,多费时间,直接几层for循环就做了个差不多的属性组件,更省事的朋友直接拿ElementUI中的Tree树形组件来完成需求,这时,稍微有点要求的产品就来要求了:不行,这组件样式都是竖着的,要是权限列表多了,这还了得?改。这里笔者仿照ElementUI的风格,自定义了个简单的树形组件,先看样式:递归组件说明什么是递归组件?简单的说就是组件自己调用自己。有些朋友可能就懵了,哎呦卧槽,组件还能调

2020-09-22 17:49:51 27

原创 Flutter修仙传第二章:路由详解
原力计划

在上一章中,咱们入门学习了Flutter神功,会了些皮毛,知道了输入框,单选复选等这些基础组件的使用,小生并没有讲解按钮这种基础组件的使用,像这种easy的不能再easy的组件知识点,如果你看了还不会,那么请照一下镜子,告诉自己:放弃编程吧。万丈红尘财路多,何必非做一码农?咱们已经学会了Flutter的一些皮毛,在一个页面里,咱们能够整个输入框,整个按钮了,咱们很高兴,就想着大展身手,多整几个...

2020-04-09 21:07:36 1164

原创 Flutter修仙传第一章:从Form入手学会组件使用

前言话说代码武林中出了一套绝世神功,名为Flutter,Android,iOS,Web等各路大侠纷纷前往,一探究竟,临前一览才发觉这套神功和Android,iOS这两派功法有着相辅相成的无尽妙处,习得Flutter神功,便可以双手出招,一拳一掌干掉Android和iOS,立于不败之地。今有习得Web神功的一名江湖小生,想要学会Flutter神功,干掉Android和iOS这两个亦敌亦友的门派,...

2020-04-02 15:26:31 152 1

原创 IOS上从第三方页面回跳VUE页面页面不刷新问题

情景描述:IOS系统环境下,从微信的vue页面A中跳转到第三方页面B,然后点击浏览器返回按钮返回A页面。问题描述:IOS系统下,A页面没有刷新;Android正常刷新。问题解决:在A页面mounted中添加如下方法:window.onpageshow = function(e) { console.log("执行了onpageshow"); if ( ...

2020-03-11 11:34:48 916

原创 html2canvas在不同设备生成图片大小不一致问题

场景描述:使用html2canvas将移动端的一整个页面或者页面中的部分内容生成图片。当要生成的内容宽高不固定时,比如:全屏显示的页面,那么,在不同分辨率设备上,就会生成出不同大小的图片,虽然生成的图片与设备显示的样式几乎一样,但是,不同的设备生成的图片就还有不小的差异,有的需求是想要生成大小一样的图片,无论在IOS或者安卓设备上,比如你生成的这张图片是一张宣传海报,那么固定尺寸的图片会有更好...

2019-11-29 15:24:02 2008 2

原创 使用vue开发一个双向展开的卷轴组件

我们在项目实践中,偶尔会为了增加页面内容的显示效果,使用卷轴展开的形式展示页面内容,以此来增加良好的交互和趣味性,卷轴的展开方式有两种,一种是向左或者向右单向展开,另一种是从中间向两边双向展开。单向展开的卷轴实现起来相对比较容易,笔者不做讲解,这里笔者主要说明双向卷轴的实现。先上效果图,感兴趣的继续,没兴趣的过。思路:1.显示未展开状态下的显示样式。2.显示完全展开状态下的显示样式。...

2019-10-18 18:57:38 156

原创 html2canvas在安卓端微信里截取从相册打开的图片空白问题

需求描述:在一个页面里显示两张图片,一张静态图,一张用户从相册或者拍照获取的图,然后将这两张图片合并,并保存。问题描述:

2019-09-26 14:20:48 654

原创 IOS上复制粘贴号码到input有空格及input位数限制问题详解

需求说明:用户手机聚焦input后,弹出数字键盘,可以正常输入11位手机号,也可以从电话本复制电话号然后直接执行粘贴操作。问题说明:1.input聚焦时弹出数字键盘,type=number时,安卓正常,ios无效。2.当input type 为number时,input加maxlength限制长度属性无效。3.ios上粘贴电话号到input中会有空格,且获取不到数据。问题解决:1.因...

2019-08-30 18:16:44 801 3

原创 微信公众号开发:实人认证,活体人脸识别解决方案

实人认证:是指依托活体检测、人脸比对等生物识别技术、证件OCR识别技术等进行的自然人真实身份的校验服务。有些业务需求中,我们想要更安全准确的获取用户的真实身份,避免虚假信息的产生,就会要求用户进行实人认证,说的简单点,就是让用户拿着手机对着屏幕摇摇头,张张嘴,眨眨眼之类的,检测人脸动作后,校验真实性。我们知道,微信公众号开发中,jssdk中只有图片相关的接口方案,并没有捕获人脸相关的接口服务,...

2019-07-22 11:31:44 8279 4

原创 base64转file图片上传

在微信公众号开发过程中,有可能会碰到这种情况,手写签字生成图片,或者页面生成图片等等,然后需求是将图片上传,一般上述情况都是由canvas转成的图片,格式都是base64类型的图片,而我们的上传接口一般都是需要file类型文件,前端要是按照正常的上传思路,是没法正常上传的,除非后台接口做调整,接受base64格式图片数据。微信js-sdk有chooseImage和uploadImage,但是只能...

2019-07-15 18:48:44 239

原创 Error: Loading chunk * failed,Vue Router懒加载报错问题解决方案

最近vue项目路由改成了懒加载方式,刚开始并没有什么问题,清空项目文件,重新下载配置运行后,就发现控制台报以下错误:[vue-router] Failed to resolve async component default:Error:Loading chunk 10 failed.刷新页面后,就不会再报错,思来想去应该使用路由懒加载后,组件加载异常导致的,但是究竟是什么原因,暂时不知...

2019-07-09 13:05:36 16591 11

原创 vue开发一个实用美观的轮播图组件

网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用。先上示例图:常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组件中并没有这种形式,所以笔者专门针对这种形式的轮播图开发了一个组件。该组件暂时由两种形式:正常模式normal,缩放模式zoom,缩放模式即为上图所示模式。思路:1.构思常见轮播图的实现。2...

2019-06-05 17:42:38 9299 4

原创 vue使用canvas开发漂亮的多功能手写板组件

此组件主要用于vue项目内签字手写功能,可显示缩小版,全屏版两种类型,三种笔画颜色可选择,手写完成可获取手写结果。点击“重写”,会清空手写板内容; 点击“完成”,会将手写板内容生成图片,此时,不可以再进行手写操作,点击重写可重新进行手写,可以在此方法中获取生成的图片信息;点击“横版/返回”,可以进行手写板缩小版和全屏版模式切换。示例图片:组件使用示例: <handwriting-...

2019-05-13 10:07:08 2530 2

原创 支付宝小程序组件库开发之手写板组件

此组件主要用于小程序内签字手写功能,可显示缩小版,全屏版两种类型,三种笔画颜色可选择,手写完成可获取手写结果。点击“重写”,会清空手写板内容; 点击“完成”,会将手写板内容生成图片,此时,不可以再进行手写操作,点击重写可重新进行手写,可以在此方法中获取生成的图片信息;点击“横版/返回”,可以进行手写板缩小版和全屏版模式切换。示例图片:组件使用示例: <handwriting-b...

2019-05-09 15:19:33 513

原创 支付宝小程序组件库开发之省市区三级地址选择器组件

支付宝小程序开发文档中并没有提供明确的省市区选择器,不少项目还是有地址的填写需求,根据支付宝小程序现有提供的组件以及api,完全是可以实现填写地址的需求,比如分别获取省市区,通过地图来获取地址等,但是有些人肯定还是想要省市区三级选择器来选择地址范围。支付宝小程序API中提供了级联选择my.multiLevelSelect,在笔者为之大喜的时候,结果在真机预览的时候,发现数据竟然显示不全,第三列数...

2019-05-07 11:13:55 1675 3

原创 支付宝小程序组件库开发之自定义switch组件

支付宝小程序在官方文档上已经给出了switch组件,点击这里直达Switch,官方给出的示例是这样的:结果实现出来是这样的:卧槽,坑了,有点不爽,那就自己写一个吧,也不费多大的事,下面看效果:...

2019-05-06 10:55:33 742

原创 vue项目中vue-echarts讲解及常用图表方案实现

图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHARTS,蚂蚁金服的AntV都是不错的图标库,感兴趣的读者可以直接到他们的官网阅读相关的资料,笔者这里不做优劣说明,主要针对vue-echarts的一些图表方案进行讲解。vue-echarts是基于ech...

2019-04-22 13:23:12 54952 6

原创 vue项目白屏问题汇总,多方案详细解决

来了,兄弟,别急,咱们慢慢往下看。项目打包之后,本地打开文件显示白屏了?微信公众号里打开项目白屏了?苹果手机打开白屏了?死活都有部分iPhone机型是白屏显示的?兄弟,别急,咱们走起……1,ios10 出现白屏原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。解决方法如下:进入build文件夹;找到w...

2019-04-01 11:32:27 6232 5

原创 vue页面内容生成图片并保存本地方案

既然你打开了这篇博客,那么你肯定碰到了和页面截图多少相关的问题,你在浏览器内生成图片也好,微信内生成页面图片也好,都需要面对把页面内容转成图片的问题。1.将整个页面转成图片;2.将页面内部分内容转成图片。解决方案如下:1.引入html2canvas为了更便捷有效的开发,这里可以引入html2canvas这个插件,如果读者不想采用这种方案,可以跳过下面内容,自行寻求其他解决方案。点击可以...

2019-03-29 13:55:14 16156 15

原创 小程序组件库开发之车牌号专属键盘

小程序开发过程中可能会碰到和车牌信息相关的开发,这时候就需要输入车牌号,传统的键盘输入车牌号,需要打出汉字,再选择相应的字母数字,并不是特别方便,这里笔者专门开发了车牌号键盘,可以任意选择修改省份,数字和字母。先看示例图:组件主要代码如下:// components/plate-number-keyboard/plate-number-keyboard.jsComponent({ ...

2019-01-25 22:38:50 2434 7

原创 LeetCode答案汇总(持续更新...)

点击这里就可以直达答案库答案大部分都是以JavaScript语言作为解答语言,部分会有java解答答案,笔者会不定期更新答案库,因为每一题都是笔者一题题做出来的,所以更新速度可能会比较缓慢。每一题都有用时ms数,如果读者有更好的解答方案,可以直接留言更新。欢迎关注博主——小圣贤君,有问题可以留言哦~...

2019-01-16 18:21:43 578 3

原创 小程序组件库开发之抽奖游戏组件

笔者在之前写了一篇关于小程序抽奖游戏组件的文章,当时的设计比较粗糙,组件的可复用性也不是很好,这里笔者新开发了一个抽奖小游戏组件,表现形式上和可复用性上都相对之前有了不小的提升。读者朋友可以先看一下实际的表现形式:小程序提供的动画实在是太难用,为了保证抽奖动画的连贯性,每一列实际上放了至少三个连在一起的图片,按照abc,bca,cab的顺序依次排放,每列放置两张,当一张图片移动完毕后,回到另...

2018-12-28 18:35:28 845

原创 小程序自定义组件:摇奖小游戏

先给大家看下效果图:点击“试试手气”,就开始摇奖,当三个图片结果一致的时候即为中奖。摇奖的动画效果,使用小程序提供的动画功能:Animation第一步:设定定时器让第一列的图片能够从上向下移动,制造滚动效果。第二步:当一张图片移动消失后,回到原本的位置,更改该图片对应的显示图片,制造显示不同图片的效果。第三步:设定一个预定停止的时间,当定时达到时间后,停止定时器,将当前显示的图片显示在...

2018-11-05 15:13:08 849 1

原创 LeetCode题库11:盛最多水的容器——JavaScript解答

题目描述:给定 n 个非负整数 a1,a2,…,an,每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线,垂直线 i的两个端点分别为 (i, ai) 和 (i, 0)。找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。说明:你不能倾斜容器,且 n 的值至少为 2。图中垂直线代表输入数组 [1,8,6,2,5,4,8,3,7]。在此情况下,容器能够容纳...

2018-10-11 18:14:38 284

原创 LeetCode题库10:正则表达式匹配——JavaScript解答

题目描述:给定一个字符串 (s) 和一个字符模式 §。实现支持 ‘.’ 和 ‘*’ 的正则表达式匹配。‘.’ 匹配任意单个字符。‘*’ 匹配零个或多个前面的元素。匹配应该覆盖整个字符串 (s) ,而不是部分字符串。说明:s 可能为空,且只包含从 a-z 的小写字母。p 可能为空,且只包含从 a-z 的小写字母,以及字符 . 和 *。示例 1:输入: s = “aa” p = “...

2018-10-11 18:10:22 641

原创 LeetCode题库7:反转整数——JavaScript解答

题目描述:给定一个 32 位有符号整数,将整数中的数字进行反转。示例 1:输入: 123 输出: 321示例 2:输入: -123 输出: -321示例 3:输入: 120 输出: 21 注意:假设我们的环境只能存储 32 位有符号整数,其数值范围是 [−231, 231 − 1]。根据这个假设,如果反转后的整数溢出,则返回 0。解答方案:/** * @param {n...

2018-10-09 19:05:48 305

原创 LeetCode题库5:最长回文子串——JavaScript解答

题目描述:给定一个字符串 s,找到 s 中最长的回文子串。你可以假设 s 的最大长度为1000。示例 1:输入: “babad” 输出: “bab” 注意: "aba"也是一个有效答案。 示例 2:输入: “cbbd” 输出: “bb”解答方案:/** * @param {string} s * @return {string} */var longestPalindrom...

2018-09-28 11:06:05 1219

原创 小程序商城瀑布流商品展示实现

现在小程序商城越来越多,通常的商城中,商品展示都是那种常规的两列规则展示,但是现在越来越多的应用开始采用瀑布流的方式来展示商品,商品的图片高度不定,商品根据图片容器大小,自由排列,依次下排。 今儿,小圣贤君就为大家讲解一下,如何在小程序中实现瀑布流形式展示商品。 一般页面中商品会显示两列,通过接口拿到数据后,判断现有的两列的长短,将商品加入到列高较短的那一列中,如何判断两列的高低呢? 其实很...

2018-08-22 11:35:12 5836 4

原创 vue + element中el-table导出excel

第一步: 安装依赖:npm install --save xlsx file-saver这里安装了两个依赖插件,感兴趣的读者可以去点开下面的链接,查看源码: https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 第二步: 引入使用: 在你需要导出excel的vue组件里面引入,引入...

2018-08-08 14:40:21 4026 38

原创 小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题

问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应。 解决思路: 小程序的官方文档中有如下介绍,引入微信的JSSDK1.3.2就可以执行在网页中跳转到小程序等功能。<!-- html --><script type="tex...

2018-07-19 20:07:38 4976 4

原创 微信小程序获取地理位置名称,附近地理信息,根据经纬度距离计算等问题详解

微信小程序的开发过程中,很可能会碰到和地理位置相关的一些操作,比如:根据经纬度计算两地之间的距离,根据关键字获取附近相关的地理信息,关键词输入提示等。 如果直接自己写代码来解决相关的问题,一方面会大大增加相应的代码量,另一方面,也会浪费不少时间,这里,笔者针对微信小程序中,地理位置相关的一些问题,做了简单总结,方便读者直接使用,减少解决问题的时间。 在小程序的官方文档中,提供了获取用户地理位置...

2018-06-30 21:53:00 22639 2

原创 vue应用开发过程中在谷歌浏览器遇到的奇葩问题——谷歌插件屏蔽接口请求

在开发过程中,碰到了这么一个问题: 通过postman来掉接口请求,正常;直接在浏览器地址中发送请求也正常,但是再应用中发起请求就会失败,请求根本不会发送出去。 将该应用在edge中打开,一切正常。 经检查,原来是谷歌插件Adblock Plus造成的问题,屏蔽了我的请求。 我的请求内容: 一个GET请求,请求的路径中包含以下内容:/adsense/getAdsenseList 关掉A...

2018-05-14 17:13:04 3259

原创 vue中给window添加滚动监听无效的解决方案

页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作。 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mounted中添加window.addEventListener("scroll", this.handleScroll);采用这种形式来实现页面监听滚动的效果。 笔者最初也是采用了这种方...

2018-04-08 14:00:02 9320 3

原创 vue element隐藏组件滚动条scrollbar使用

pc端项目中,有时候会在页面内部出现滚动条的情况,windows浏览器默认的滚动条是很丑的,尤其是当滚动天出现在页面内部的时候,这时候,为了页面美观,可以考虑优化滚动条样式。 vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,读者查看element源码,就可以查到这个组件scrollbar,至于为什么不放开这个组件就不得而知了。 效果图如ele...

2018-03-28 21:49:01 62685 20

原创 vue项目实践教程3:中间大的五选项底部切换卡制作及相关问题解决

在移动端项目中,有不少项目会有底部切换卡的功能需求,类似于app应用,点击底部不同的切换卡,显示不同的界面,表现不同的功能。 这里,笔者展示一个采用vux-uid 五选项切换卡,同时,中间的选项卡比较突出,样式如下: 样式表现比较好看,其实表现起来也很简单。 如果不考虑中间的图片突出,整体的表现直接参照vux官方文档的Tabbar就可以很简单的实现,vux tabbar 在这里,中间的...

2018-03-18 21:32:45 828

原创 vue 中二维码的使用和工具比较

在开发项目中,有可能会碰到生成二维码的需求,尤其是在微信相关的项目中,可能会涉及扫码登录,扫码查询等功能。这里笔者为大家介绍两种vue项目的可以使用的二维码工具。 首先,先看一下示例效果,感兴趣的可以继续往下看: 示例中是用两种不同的二维码工具生成的三种表现效果,下面来介绍一下生成二维码的两种工具。 第一种:vue-qart vue-qart文档地址 安装:npm install v...

2018-03-17 18:09:29 4525 2

原创 vue 实现压缩图片上传到oss

我们偶尔会在项目中碰到上传的需求,对于部分前端开发人员来说,上传资源是一个比较头疼的事情,你要根据各种不同的UI设计,设计出相应的上传页面样式,上传的地址不一样,可能你的处理就会不一样。你可能选择使用插件,或者自己动手写一个。这里笔记简单介绍一个vue项目的中上传示例,不适用插件,自定义样式和上传,最终上传到阿里云中。 先看一下样式吧: 这种样式设计效果应该是大多数前端上传的设计样式,针对...

2018-03-15 19:22:45 5270

原创 vue组件报错问题

Invalid value for option "components": expected an Object, but got Array出现这个错误,查看一下组件的编写是否有误,components应该是一个对象而不是一个数组,如果你写成了开一个数组,就会报这个错误,同时,还会报下面这个错:did you register the component correctly? Fo

2018-01-25 18:57:22 5800

原创 vue中当图片地址无效的时候,显示默认图片

web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况。这时候,图片就会显示一个叉。 对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址。:src="item.img" @error="imgError(item)" />给图片添

2018-01-25 18:54:35 7484

原创 vue项目实践教程2:使用vux设计登录注册,并讲解vue路由,切换页面标题等内容

上一章笔者介绍vux项目的搭建和简介,这里笔者设计几个登录注册页面,来讲解vux中的相关组件的使用,和vue的相关基础知识。 1.我们在与components文件夹同级的目录下创建一个views文件夹,文件夹中再创建一个user文件夹,用于存放和用户相关的页面操作。 在user文件夹下,笔者先创建一个Regist.vue文件。 2.现在注册组件已经有了,但是我们怎么才能让这个组件显示出来呢?

2018-01-22 20:49:05 8858 4

js面向对象封装拖拽移动功能,兼容pc和移动端|drag.js

采用JavaScript面向对象思想封装拖拽移动功能,兼容pc端和移动端,适合JavaScript初学者进阶学习。

2017-11-04

CTree树形选择组件|CTree.zip

VUE组件,ElementUI风格的自定义tree树形组件,内容简单明了,展示多级列表,或者进行权限列表显示,选择操作。

2020-09-22

javascript实现注册表单|Register.zip

javascript实现仿京东注册表单,能够实现表单验证,正则匹配,表单验证追踪,随机验证码生成,密码强弱校验等功能。

2016-10-08

中国省市区三级数据

中国省市区三级最新数据,按照省,市,区,父子关系格式化,可以直接用于web,或者移动应用开发中。

2019-04-23

一个简约美观的月份选择器插件month-picker

这是一个jquery插件,可以实现年月份选择功能,简约美观,短小精悍,方便使用,同时也适合jquery插件开发学习。

2017-11-08

javascript实现较全功能注册表单

javascript实现的一个较全功能的注册表单,仿京东注册表单,可以实现用户注册信息验证,用户名验证,密码强弱验证等,验证信息有图标提示,随机验证码生成,涉及正则表达式,表单脚本等知识点应用。

2016-10-08

javascript实现商品购物车功能

纯javascript实现购物车,完成从商品页向购物车中添加商品,购物车中删除商品,更改商品数量,删除商品,全选单选等购物车操作,涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作,综合性较强,对于javascript学习进阶有一定的帮助。

2016-09-27

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除