![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
优雅的王德奥
这个作者很懒,什么都没留下…
展开
-
nuxt项目使用scss预处理器
1.安装node-sassyarn add sass-loader node-sass 或 yarn add @nuxtjs/style-resources这样就可以识别.vue文件中的scss语法了,但不能使用全局变量2.安装style-resources(全局使用scss变量) yarn add @nuxtjs/style-resources 或 npm i @nuxtjs/st...原创 2020-04-17 15:37:54 · 866 阅读 · 0 评论 -
vue.js使用audio标签实现聊天语音条组件
效果演示<template> <div class="audio__wrap"> <audio controls :src="src" ref="audioPlayer" style="display:none"></audio> <div class="self__audio"> <div cl...原创 2020-03-08 18:03:00 · 2071 阅读 · 2 评论 -
如何编写可维护、健壮的前端代码?——前端编码规范制定
前言我认为代码不只是为了实现某个需求,更是给别的人看的。团队制定一个好的编码规范,能让大家更清晰的去理解代码。只有高质量的代码,才能有优化的可行性。更利于项目的版本迭代和拓展。前段时间为公司制定了编码规范,在这里分享一下如果感觉文章对你有帮助的话,留个赞再走吧~js(vue)写法推荐变量和普通使用camelCase小驼峰式命名(tableData,isVisible),构造函数使用...原创 2020-01-19 11:27:59 · 743 阅读 · 0 评论 -
记一次vue+golang开发个人博客网站经历
前言大概在半年前,因为公司技术栈的原因。作为小前端的俺,对golang也产生了极大的兴趣。就想着用golang(iris) + vue.js来搭建一个博客。这半年因为加班的原因,留给自己的时间比较少。好歹前几日备案刚刚下来,也算是初步的搭建完成了。博客风格刚刚工作一年多,但搭建博客的想法在我刚接触前端的时候就有了。但是一直都不知道自己的博客应该长啥样,怎么去设计它。有一天在刷PC端tw...原创 2020-01-14 17:33:18 · 1885 阅读 · 0 评论 -
vue从零搭建一个前中后台权限管理模板
背景我司有很多需要进行权限管理的产品。其中有一个产品,需要给多个客户部署前中后台。在开发第一个版本时,代码全部分离。前端三套,后端三套。加上kafka,redis,算法,数据库等服务器,每有一个新的客户就需要部署一次,需要花费很长的时间且代码难以维护。后决定重构代码,产品分为前,中,后三个平台。前后端分别一套代码,支持权限管理,可拓展。前端使用路由前缀判断平台,登录时会返回不同的token和...原创 2020-01-12 12:02:56 · 3316 阅读 · 0 评论 -
QQ/微信即时通讯产品聊天时间格式转换
import moment from 'moment'moment.locale('zh-cn');export default { // 获取联系人的上次聊天时间 转换成 上午9:20 或 昨天 或 星期三 或 2019/11/14 getLastChatTime(time) { let curtime = moment(); let ftime = moment(...原创 2020-01-02 10:46:48 · 881 阅读 · 2 评论 -
浏览器同源策略导致的跨域问题分析
1. 何为跨域?记住一点:只要域名(ip),协议(http和https),端口其中任何一个不相同,都是跨域请求。2. 为什么需要跨域因为存在浏览器同源策略,所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到,跨域限制主要的目的就是为了用户的上网安全。如果浏览器没有同源策略,会存在什么样的安全问题呢。下面从 DOM 同源策略和 XMLHttpRequest 同源策略...原创 2019-12-16 16:56:31 · 654 阅读 · 0 评论 -
从零实现redux及中间件思想
一、为什么要用reduxreact和vue都是单向数据流去管理状态。而两个非父子组件之间通信就相对麻烦,特别是跨多级组件之间的通讯。所以两个框架都有相应的状态管理器,如redux vuex mobx等优秀框架。而其中大致的设计思想就是发布订阅模式,通过管理容器存储需要共享的数据,中央管理,多处派发,解决了跨级通讯的痛点。看了redux源码后,体悟很深,自己动手写了一个。参考文章:https:...原创 2019-12-14 15:04:19 · 207 阅读 · 0 评论 -
基于vue的emoji表情评论组件
vue-emoji-comment最近在写自己的个人博客时,还差最后一个评论功能,一个没有评论功能的博客是没有灵魂的,哈哈哈。效果演示使用精灵图 + 背景定位实现,大家也可以自定义这些emoji表情。看看源码,有注释。就明白怎么弄了。这里推荐一个做精灵图的在线地址:https://sprite.ydr.me/个人博客:https://github.com/pppercyWang/twi...原创 2019-11-12 17:31:27 · 2739 阅读 · 0 评论 -
vue实现自定义指令 点击元素区域外执行事件
效果演示:需求:出现搜索窗口后,点击搜索窗口外关闭搜索窗口vueClickOutSize.js:const clickOutside = { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身,是本身,则返回 if (el...原创 2019-10-31 16:07:56 · 1858 阅读 · 0 评论 -
vue实现自定义radio组件
效果展示父组件中使用<radio-group v-model="radioIschecked"> <radio label="个人" value="1"></radio> <radio label="收藏" value="2"></radio></radio-group>Ra...原创 2019-08-18 14:09:02 · 4444 阅读 · 1 评论 -
react开发公众号踩坑日志
最近刚刚接触react,用react开发一个公众号。以前没有过开发公众号的经验,在这里记录一下过程中踩过的坑。这个项目是前后端开发的。本篇文章只站在前端的视角,希望给大家一个参考一.授权回调微信授权过程进入你的程序跳转至微信授权接口用户确定授权重定向至你的程序访问微信授权接口这里注意使用window.location.href 而不是window.open去访问接口,不然可能...原创 2019-09-04 16:37:28 · 1363 阅读 · 2 评论 -
react实现Radio组件
效果展示:测试组件:class Test extends Component { constructor(props) { super(props) this.state = { active:1 } } onGroupChange(value) { this.setState({...原创 2019-09-05 18:47:09 · 7044 阅读 · 0 评论 -
react实现modal/dialog组件
效果展示测试组件class Test extends Component { constructor(props) { super(props) this.state = { modalVisible: false } } render() { return ( ...原创 2019-09-06 12:07:44 · 3084 阅读 · 0 评论 -
react模仿antd手写一个多选日期日历组件
业务需求多选近三个月的日期。不能选择当日之前的日期。因为antd的日期组件都是选择单个日期或者日期范围。不符合需求,所以自己就实现了一个。写的不好的地方大家请指教效果展示测试组件<CheckCalendar visible={this.state.showCalendar} onClose={()=>{ this.se...原创 2019-09-07 15:09:49 · 3337 阅读 · 4 评论 -
公众号微信支付接口没回调踩坑 WeixinJSBridge getBrandWCPayRequest
这真是一个史前巨坑,遇到的问题是:苹果手机支付然后取消,可以alert出支付取消.但支付成功后不能alert,就以为没进入回调.安卓手机一切正常找了很多方法,各种百度 google,调jssdk的方法去支付,结果还是不行解决办法: 不用去alert,它不会执行.直接跳转到指定页面就可以了.我哭了 onBridgeReady(config) { if (!config.pack...原创 2019-09-21 14:48:29 · 4109 阅读 · 3 评论 -
input根据内容自适应宽度
最近在写自己个人网站时,发布文章功能需要一个添加标签组件。点击加号,输入文本。而这里的input就需要宽度根据内容自适应。百度搜大多是这两种方法,结果都不是很理想。// 方法一 <input type="text" @input="changeWidth" id="myInput" class="my-input" /> changeWidth(e) { let...原创 2019-09-23 19:57:21 · 30438 阅读 · 9 评论 -
vue实现添加标签组件
最近在写自己个人博客时,发布文章功能需要一个添加标签组件。点击加号,输入文本。就写了一个TagInputer组件,中间遇到了一些麻烦 跟大家分享一下遇到的问题:input需要根据内容自适应宽度绑定contenteditable元素的值效果展示TagInputer.vue<template> <div class="tag-inputer-wrap">...原创 2019-09-24 15:15:42 · 7066 阅读 · 0 评论 -
50行代码手写call,apply,bind方法
本文是对该文章的一些理解,写的非常好。附带实例。跟大家分享一下https://segmentfault.com/a/1190000020044435call方法实现:Function.prototype.mycall = function(context,...arg){ // Function是所有函数对象的构造函数。这里给Function的原型声明了一个mycall方法,则所有的函数...转载 2019-09-25 17:06:49 · 246 阅读 · 0 评论 -
vue项目部署到nginx
最近产品做了一半,要求将前端的代码部署到服务器,以前没有部署过,这可咋办呀~~。现在部署好了,给大家总结以下,里面还是有很多坑的原创 2019-05-26 17:09:15 · 61765 阅读 · 5 评论 -
实现下拉加载根本没那么复杂
之前缺乏移动端的经验。一直不知道上拉加载,下拉刷新是怎么实现的。现在正好有个产品有这样一个需求。想了一会没有思路。就去找插件。啥vue-infinite-scroll,vue-virtual-scroll-list。啊呀,牛!无限滚动,十万条数据渲染。经过我一大圈的折腾。还是默默的卸载了插件。我只是需要实现一个下拉加载,不需要其他这么多的功能。看了看其他人的源码,直接撸了起来,实现一个List组...原创 2019-08-13 10:08:02 · 435 阅读 · 0 评论 -
vue实现自定义checkbox组件
效果展示父组件中使用<checkbox-group v-model="checkList"> <checkbox v-for="(item,index) in data" v-bind:key="index" :label="item.name" :value="item.id"...原创 2019-08-16 14:50:22 · 7168 阅读 · 0 评论 -
vue子组件作为slot如何触发父组件的事件,slot踩坑记录
最近写了一个checkbox组件。跟其他的ui组件一样。被checkbox-group组件包裹,根据其v-model绑定的值,用于储存多选框被选中的值。 <checkbox-group v-model="checkList"> <checkbox v-for="(item,index) in data" v-bind:ke...原创 2019-08-16 14:04:55 · 9363 阅读 · 3 评论 -
Vue+Typescript使用vue-router路由不正常跳转采坑记录
近期经常看到Typescript的一些文章。自己看了看文档,写了一个demo。哇,一种重所未有的体验。决定自己以后写的产品都用Typescript+Vue了。可能vue2.x和对ts的支持不是很好(期待vue3,将用ts重构)。期间遇到了一个最大的坑,跟大家分享一下页面上报的错:Property or method “xxx” is not defined on the instance b...原创 2019-07-08 09:49:49 · 5461 阅读 · 0 评论 -
vue+element-ui优雅的实现表格的增删改查
aaa原创 2019-06-03 17:40:40 · 11652 阅读 · 10 评论 -
Element el-menu(NavMenu)的正确用法
最近在使用Element开发时 一开始按照官网示例 产品前期没什么问题 到了后期 遇到这样一个情况:并不是只有点击导航栏才跳转页面需求:如果根据官网的示例,每个el-menu-item的index都为’1-1’ '1-2’之类的。如果直接跳转路由,你会发现导航栏当前激活菜单的 index没有改变。点击跳转。但菜单栏依旧停留在分组这个栏目只有两种方法可以解决这个问题:通过子组件的thi...原创 2019-06-13 23:48:17 · 99348 阅读 · 9 评论 -
封装element的日期组件
最近在用element写一个管理平台,当我想实现一个如下的日期选择器,但是element不提供类似的组件,自己将其现有的组件再次封装。达到了自己想要的效果DatePicker.vue<template> <div> <el-form-item> <el-button type="primary" size="mini" @cl...原创 2019-05-23 16:10:26 · 1695 阅读 · 0 评论 -
js读取本地txt文件,实现表格预览
aaa原创 2019-05-23 17:19:00 · 8605 阅读 · 1 评论 -
Vue中使用定时器实现轮询setTimeout
最近做一个扫码二维码的需求,生成二维码后需要通过轮询在判断登录状态。这里我先用的定时器简单的实现了一下轮询,后面会对接到websockethandleQrcodeCheck() { let vm = this; vm.timer_id = setTimeout(() => { //vm.timer_id需要先在data中定义 vm.$http ...原创 2019-05-17 00:23:49 · 8073 阅读 · 0 评论 -
Vue中导出excel表格文件xlsx
一.安装依赖:npm install -S file-savernpm install -S xlsxnpm install -D script-loader二.将Blob.js和 Export2Excel.js放到src的lib文件夹中(代码块不能折叠很难受 - -)Blob.js:/* eslint-disable *//* Blob.js * A Blob impleme...原创 2019-05-17 00:10:01 · 3447 阅读 · 2 评论 -
vue项目中封装axios
最近因为业务需求将axios封装了为一个http.js文件,前端生成jwt,实现单用户登录都在这个文件完成,很方便import axios from 'axios';import qs from 'qs';import { Base64 } from 'js-base64';import { HmacSHA256 } from "crypto-js";class Http { c...原创 2019-05-16 23:30:05 · 1246 阅读 · 0 评论 -
nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向
理解Express中Router 拦截器 next方法 结合实例新手向在刚学习express的时候,大家会不会经常遇到这样一个问题。这个app.use,router.use有什么区别,这个next又是做什么的?如果你对这几个概念不清楚。请好好看下面的例子如果你的代码只是上面这样写,是错误的写法。只有/app这个接口会生效,/router不会。你只需要记住这样一句话:路由器的行为就像中间件本...原创 2019-04-18 16:44:19 · 4476 阅读 · 3 评论 -
Vue+Typescript的移动端项目模板
#Github地址:https://github.com/pppercyWang/vue-typesctipt-mobile原创 2019-07-08 19:32:00 · 1039 阅读 · 0 评论 -
Vue+Typescript的PC端管理平台模板
Github地址:https://github.com/pppercyWang/vue-typescirpt-admin原创 2019-07-08 19:33:26 · 768 阅读 · 0 评论 -
Vuex在Vue工程的正确使用
关于vuex,我们听到最多的是vuex是一个状态管理容器,可以解决组件之间通信的痛点。但vuex真的只是这样吗?平时,我更喜欢将vuex比喻成一个前端程序的数据库。他可以储存各种数据,需要什么直接过去拿就行。我们都知道,单页面应用只要页面跳转了,data中的数据都会清空。但store中的数据不会清空,只有在页面刷新时,会清空store中的数据一.那我们是不是可以这样设计?当我们需要获取数据时...原创 2019-07-09 10:24:54 · 599 阅读 · 1 评论 -
vue写一个全局Message组件——插件知识
不知道大家在用一些UI框架,比如Element-ui的时候,有没有觉得一些全局组件。this.$message(),this.Toast()等,用起来很爽。他们不像其他的组件,需要去导入,去注册。麻烦的很。看了Element的源码,自己也撸了一个。其中包括了以前没有接触过的插件知识,哎,感觉自己对Vue的理解还是不够,只停留在了使用的这阶段。需要更多的往深层次的地方去钻。不说废话了,直接上代码。...原创 2019-08-14 14:58:59 · 1923 阅读 · 2 评论 -
vue实现自定义dialog组件
不知道大家有没有遇到这种情况。平时过于依赖组件库,如果产品对某个组件有特殊的要求。我们与其去改,去覆盖组件库的源码。还不如自己写一个组件,毕竟是自己写的,不管你想怎么改,都方便容易的很。这里就实现一个dialog组件和input组件,不基于任何组件库。供大家参考效果展示MDialog.vue<template> <transition name="fade">...原创 2019-08-09 14:14:35 · 4230 阅读 · 0 评论 -
vue模仿twitter写一个自己的博客——头部导航栏
这个头部导航主要是写一个menu-item组件,hover时底部的蓝色底边动画弹出。再将logo扣出精灵图。MenuItem:<template> <div class="menu-item-wrap" @click="push"> <div class="top">{{title}}</div> <div class=...原创 2019-08-26 10:33:26 · 2751 阅读 · 2 评论 -
Vue+vant使用skeleton组件实现骨架屏
效果演示直接上代码<template> <div class="skeleton" v-show="skeletonShow"> <van-skeleton :row="3" row-width="160" /> <van-skeleton :row="3" row-width="160" /> ...原创 2019-07-25 10:25:15 · 15967 阅读 · 1 评论 -
前端必备技能之如何制作精灵图
为什么要用精灵图?比如京东首页的这些icon,如果每个icon都去请求一个资源。是非常浪费资源的。因为我们浏览器在同一个域名下并发加载的资源(CSS、JS 、图片等)数量是有限的。我们可以将这些icon放到一张图片,通过截取这张图片的不同的区域,拿到不同的icon制作一个背景透明的Icon截图你喜欢的logo,最好是正方形。打开ps,使用快速选择工具选择白色区域ctrl+x删除...原创 2019-07-28 22:21:25 · 2581 阅读 · 0 评论