前端
文章平均质量分 96
神奇程序员
不断学习,不断创新,用代码创造属于自己的世界。
展开
-
实现Web端指纹登录
前言现在越来越多的笔记本电脑内置了指纹识别,用于快速从锁屏进入桌面,一些客户端的软件也支持通过指纹来认证用户身份。前几天我在想,既然客户端软件能调用指纹设备,web端应该也可以调用,经过一番折腾后,终于实现了这个功能,并应用在了我的开源项目中。本文就跟大家分享下我的实现思路以及过程,欢迎各位感兴趣的开发者阅读本文。实现思路浏览器提供了Web Authentication API, 我们可以利用这套API来调用用户的指纹设备来实现用户信息认证,有关WebAuthn的更多内容请移步:WebAuthn在原创 2021-03-08 11:11:42 · 4175 阅读 · 2 评论 -
实现Web端自定义截屏
前言当客户在使用我们的产品过程中,遇到问题需要向我们反馈时,如果用纯文字的形式描述,我们很难懂客户的意思,要是能配上问题截图,这样我们就能很清楚的知道客户的问题了。那么,我们就需要为我们的产品实现一个自定义截屏的功能,用户点完"截图"按钮后,框选任意区域,随后在框选的区域内进行圈选、画箭头、马赛克、直线、打字等操作,做完操作后用户可以选择保存框选区域的内容到本地或者直接发送给我们。聪明的开发者可能已经猜到了,这是QQ/微信的截图功能,我的开源项目正好做到了截图功能,在做之前我找了很多资料,没有发现we原创 2021-02-02 14:11:39 · 1876 阅读 · 3 评论 -
Vue关闭线上源码移除console
不管前方的路有多苦,只要走的方向正确,不管多么崎岖不平,都比站在原地更接近幸福。前言文章中的配置,项目基于Vue CLI 3.0搭建,版本大于等于3.0不会有问题,其他环境版本请绕道????。关闭线上源码在Vue.config.js中添加如下代码module.exports = { // 关闭线上源码 productionSourceMap: false,}移...原创 2020-02-06 22:54:04 · 593 阅读 · 0 评论 -
Vue实现字符串中自定义标识符的解析渲染
遇到难题,保持平常心,勇于面对,总会找出突破口。前言有这样一个场景: 实现了文字和图片的混输,此时div中有img标签和文字,那么我们要将这些内容发送给服务端,然后服务端将我们发送的内容推送给每个用户,服务端需要什么格式的数据?我们客户端拿到服务端返回的数据,要怎么渲染到页面?接下来就给大家分享下我的解决方案,先给大家看一下最终实现的效果实现思路监听回车事件获取输入框的所有子元素...原创 2019-12-05 09:43:21 · 1149 阅读 · 0 评论 -
Vue实现图片与文字混输
知识在于积累,踩坑越多,你越强????前言用多了JQuery,习惯了使用JQuery的API操作DOM,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,第一个想到的办法是用textarea实现,结果发现实现不了图片输入,然后想着找个富文本编辑器的插件实现,深思熟虑之后,我的需求好像也没那么复杂,不至于引用个插件,看了掘金的发布沸点功能,然后就模仿了其作法,于是就有了这篇文...原创 2019-12-05 09:42:38 · 3801 阅读 · 1 评论 -
Vue实现base64编码图片间的切换
不断学习,不断创新,用代码创造属于自己的世界。????前言昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack中配置了图片在10kb以内自动转换base64,所有就有了本篇文章的分享。先给大家展示下最后要实现的效果实现思路给每个元素添加@mouserover事件和@mous...原创 2019-12-05 09:41:04 · 645 阅读 · 1 评论 -
js生成永不重复随机码
function createUniqueId(n) { var random = function() { // 生成10-12位不等的字符串 return Number(Math.random().toString().substr(2)).toString(36); // 转换成十六进制 }; var arr = [...原创 2019-07-09 16:56:48 · 2571 阅读 · 0 评论 -
vue路由出口(router-view)为和路由入口(router-link)呈兄弟元素无法准确匹配跳转解决方案
1.问题背景如图所示,路由出口和入口为兄弟元素,页面还有其它路由,会发生子级路由不能准确匹配,无法渲染数据 2.踩坑记录布局页面,设置 "router-link" 和 "router-view"配置路由页面效果3.解决方案 设置路由出口时,给router-view,设置name属性<!--路由出口--><...原创 2019-05-23 21:29:18 · 10793 阅读 · 0 评论 -
vue中动态路由的理解与使用
1. 动态路由传参 1.1使用query传参,name属性为要跳转的组件所对应的name,query为要携带的参数<router-link :to="{name:'mainContent','query':{links:'recommend'}}"> </router-link> 1.2 使...原创 2019-05-27 01:47:19 · 9410 阅读 · 1 评论 -
css3实现tab切换效果
程序员用代码交流:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css3 tab切换</title> <!--角标--> <link rel="shortcut icon" href="https:...原创 2019-05-19 12:00:29 · 3963 阅读 · 0 评论 -
安装yarn修改npm源以及yarn源
1.安装yarn 前提是安装好了node环境,如果未安装请先部署node环境;sudo npm install -g yarn #安装yarn(终端执行)2.安装nrm和yrm nrm 是一个 NPM 源管理器,允许你快速地在如下 NPM 源间切换;npm install -g nrm #全局安装nrm yrm是一个 yarn源管理器,允许你快速...原创 2019-05-03 00:03:43 · 6125 阅读 · 1 评论 -
webstorm打开vue(webpack)项目module报错vue周边标签无提示
1. 出现此问题的原因是,webstorm没有正确加载node_modules(node模块) 例如图中所示情况,module白色波浪线报错,router-link标签报错且标签预提示2.解决方案 webstorm打开项目后,右键node_modules目录,选择Mark Directory as --->Not Excluded,等待webstorm重...原创 2019-04-28 00:00:55 · 1204 阅读 · 1 评论 -
YApi平台部署报错(mac一定报错)解决方案
1.部署YApi到本地 根据官方文档所写,全局安装完 yapi-cli后,以及mongodb后,终端执行 yapi server,浏览器输入 127.0.0.1:9090,打开部署页面填写完基础信息后点击开始部署,等待一段时间,问题出现了node server/install.jsError:internal/modules/cjs/loader.js:584 t...原创 2019-05-01 17:44:53 · 4335 阅读 · 0 评论 -
layui使用数据表格实现类似购物车功能
layui数据表格实现类似购物车功能原创 2019-03-12 11:42:30 · 5344 阅读 · 1 评论