shentibeitaokong-CSDN博客

原创 react与antd搭配实现图片上传与设置主图功能

antd的upload可以实现上传，但是其上传之后，图片列表展示都是其组件里面已经封装好的，也没有vue那种提供插槽solt的功能，但是我司需要实现在每张图片下方有个radio标签来设置主图，左思右想，是不是得直接把upload组件拿过来再自己封装一层呢？实力不允许也没办法。so 我的解决办法是，封装一个组件，里面有upload组件，上传成功的话，将fileList filter出来，用图片...

2019-03-09 12:40:50 3749 5

原创如何给钉钉微应用标题设置背景色

E应用的话官方提供了jsapi： dd.setNavigationBar普通微应用并不适用，官方也提供了但是我发现并不起作用，我是vue hash模式，所以我想到了这一点，搜索发现 https://www.jianshu.com/p/d5d5b51a1c84因为vue默认hash模式路由，钉钉不认识#， so改成history即可，就会起效...

2019-01-17 13:42:21 6351

原创 ios输入框必须重压或长按才能唤起软键盘

最近做搜索框时发现，ios点击输入框之后，点击软键盘上的完成时发现，轻击input就无法唤起软键盘，无法对输入框聚焦，必须长按或重压才行，这边经过测试，发现应该是fastclick.js 引起的冲突，ios11 后修复了移动点击300ms延迟，so提供两种方法：1 vue的子应用中出现在ios上点击输入框不灵敏，需点两次才能获取焦点的问题解决方法如下：在node_module里找...

2019-01-10 15:00:28 4305 5

原创利用Vue.draggable 实现添加常用功能

具体需要实现，底部是所有all，上面是常用always，1.常用间可以互相拖拽排序，常用不能拖到底部all2.底部all间不能相互拖动，只可以拖动到常用，且拖动过后不可在拖动效果：希望对各位做类似功能的有所帮助，demo代码：<template> <div class="dndList"> <div class="dndLis...

2018-11-25 13:30:54 7435 6

原创 vue中纯html实现过度条动画

效果：因为录制的软件关系，显的有点卡，项目上自己哼哧哼哧地实现了这个功能，so，提升蛮大的，so，记录一下，视频里面过度条移上移下，可以利用class 或style 动态渲染解决这个问题，我懒得写了。动画效果是利用计时器实现的，也有css动画实现。自己发上来的代码稍微改了一下，可供大家参考。附完整代码：<template> <div class="main"&...

2018-11-06 23:00:25 562

原创谈一谈 html文字小于12px的完美实现

首先我们以 .content { width: 150px; height: 150px; border: 1px solid red; margin: 0 auto; text-align: center; } .content p { font-size: 10px; }<div class="content"> ...

2018-11-04 14:02:39 5891

原创谈一谈url实现文件下载

前几天，一个关于下载的问题，把我困在原地蛮久，记录一下。说到标题，后台返回一个url，前端浏览器打开实现下载功能，直接想到的就是window.open(url) 来实现下载，但是这种方法我个人认为一闪而过的白色页面导致用户体验不是很好, so，就随手写写。1 window.location.href = url; 2 a标签下载，栗子可以使用download属性指定下载下来的文件名...

2018-11-03 15:23:29 3694

原创 vuecli开发环境配置proxyTable实现跨域

一直也看到过proxyTable可以配置跨域，但是项目上都是统一交给后台处理的，本人也懒，就一直没管，最近换了项目，自己搭建的一套vue项目，发现配置这个的时候还出问题了，仅记录一下。在调试api的过程中，发现报错了：Request header field Content-Type is not allowed by Access-Control-Allow-Headers in prefl...

2018-10-27 12:06:58 566

原创 vue的tree组件

看 https://github.com/vuejs/vue/tree/dev/examples/tree超简单的demo，主要理解递归组件。暂时保存一下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Vu

2018-10-23 15:36:43 432

原创 vue项目小记小结

目录：1.1. 生命周期 1.2. v-if 和 v-show的区别 1.3. data 为什么一定是一个函数 1.4. slot插槽 1.5. 杂记 1.6. 混入 mixins 1.7. 自定义指令 1.8. 渲染函数render 1.9. 过滤器 1.10. ...

2018-10-16 23:52:15 273

原创 js设计模式——观察者模式笔记

一直想学习，so，最近学习了一下，做个笔记加深理解在JavaScript设计模式这本书中，是将卫星通信来解释这个原理的，当然，照此，我们可以举个例子：张三去公司A面试，李四也去公司A面试。。。，（这就相当于张三，李四都订阅了公司A），公司A过一段时间就发布通知啦，让张三，李四去公司A面试（公司A发布消息，订阅者收到消息），结果，张三有事不去面试了，这就导致张三不再接受A的消息（张三取消订阅...

2018-10-16 16:42:15 167

转载 javascript中prototype、constructor以及proto之间的三角关系

看了这篇文章，写的真的不错，故转载保存一下：http://www.cnblogs.com/zichi/p/4363175.html?utm_source=tuicool&utm_medium=referral三者暧昧关系简单整理　　在javascript中，prototype、constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系，楼主就着自己对它们的...

2018-10-15 13:25:32 457

原创 vue中使用svg-icon

之前也写过一篇这样的文章，只需要配置在线地址，即可自动下载几个字体文件，但是呢，我发现还有一种更好的写法，也是大众化的写法，即 svg标签，参考如何优雅的使用icon，可以完全参考这篇进行开发。我就是记录一下如何使用1 在src目录新建一个icons目录，目录结构如下svg下面放iconfont的icon标签的svg标签文件，下下来复制粘贴即可使用index...

2018-10-13 15:40:47 73496 2

原创事件委托

面试遇到这个问题，发现还是不能准确的回答出来，故重新记录一下，加深理解先来弄懂两个概念：（不考虑ie低版本）事件捕获：事件首先发生在DOM树的最高层对象(document)然后往最深层的元素传播事件冒泡：事件促发的最深层元素首先接收事件。然后是它的父元素，依次向上，直到document对象最终接收到事件。addEventListener 的第三个参数就代表着这两种事件之一。...

2018-10-08 15:15:51 145

原创 html解析的记录

css放在头部，将js文件放在尾部的好处首先需要理解，浏览器渲染原理。当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析，解析完成之后，会生成DOM。如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小...

2018-10-08 14:01:40 144

原创 element-ui 的table配合 vue-infinite-loading、sortablejs 实现表格的拖拽与下拉加载

产品要求，需要对el-table实现下拉加载并且可以实现排序话不多说，直接贴一下我的代码吧<style lang="scss" rel="stylesheet/scss" slot-scoped> .sortable-ghost{ opacity: .8; color: #fff!important; background: #4...

2018-09-28 17:01:27 3925 5

转载 Promise实现原理（附源码）

写的是真的好，详细，特此转载保存一下。本篇文章主要在于探究 Promise 的实现原理，带领大家一步一步实现一个 Promise , 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。接下来，带你一步一步实现一个 Promise1. Promise 基本结构new Promise((resolve, reject) =...

2018-09-26 16:28:02 6630 1

原创 iview实现table的可编辑

遇到同事请教的这个问题，没接触过iview，以为和element一样，只需要在table-column中使用作用域插槽即可，简单又方便，结果发现它居然是用reder函数进行渲染的，so，仔细琢磨一下，写了下面的demo，希望对大家有用。效果：代码：<!DOCTYPE html><html><head> <title&...

2018-09-06 17:14:58 22969 13

原创 vue项目中自动拉取更新Iconfont（阿里巴巴图标库）

在vue项目中使用 iconfont图标库，网上的栗子很多，这边就随手给一个，点这里上面的解决了，那我就很苦恼，我每次添加或删除或更新图标库，需要重新下载？自己手动去覆盖吗？我是拒绝的。so，自动覆盖就很有必要了。贴一下我的iconfont目录四个文件，加一个css，注意css文件与创建项目的设置对比一下但是，我们的图标是动态扩展的，随时可能删除和添加，每次删除和添加，...

2018-09-06 17:07:42 5603 5

原创基于Vue的轮播图与基于Jquery的轮播图

最近想搞一搞轮播图，就自己实现了一个，element的Carousel走马灯，饿了吗的vue-swipe以及swiper插件，都是很好的学习对象vuevue的话简单很多，毕竟其封装了动画渲染，轮播图当然需要v-for去渲染，vue提供了<transition-group> 组件来实现列表的渲染先把代码贴出来吧<style lang="scss" rel="styl...

2018-08-13 22:31:44 1273

原创 scoped带来的vue中css样式问题及解决方法

做vue项目也一段时间了，为了确保css不被全局污染，我们给每个组件的style添加了scoped，其实这样就实现了样式的模块化vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码：<style scoped>.example { color: red;}</style><template> &lt...

2018-08-06 23:53:31 1847

原创 Vue项目实现滚动条顺畅滑动及对之前锚点监听的优化（Pc端）

首先看一下效果，返回顶点效果：这里其实就是封装了一个scroll.js过渡用的是requestAnimationFrame,这货只支持IE10+,所以必须做兼容滚动视图是window.pageYOffset,这货支持IE9+;这里只是转载了他人写好封装完毕的代码，原文链接：https://blog.csdn.net/crper/article/details/76038932?...

2018-08-05 15:43:18 13192 9

原创 html5 拖拽（二）

做一个简单的拖拽排序吧，参考了网上的各种资料，自己写了一个，加深对拖拽的理解<!doctype html><html><head> <meta charset="UTF-8"> <title>demo4</title> <style> .demo { heigh

2018-08-01 22:05:08 965

原创 javaScript记录浅拷贝与深拷贝

在js中，一切皆对象（null和undefined有待另外的理解），JavaScript 中的几乎所有对象都是位于原型链顶部Object的实例。对象的基本的一些操纵，我们是必须要知道的。let obj = { a: 1, b: 2,};let copy = obj;copy.a = 5;console.log(obj.a); // ==> 5上面的代码应该都...

2018-07-23 14:07:20 177

原创 html5 拖拽（一）

h5中新增拖拽，新增拖拽与拖放的api先放一下 w3c的第一个demo<!DOCTYPE HTML><html><head><script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.da...

2018-07-23 10:41:25 183

转载前端常见跨域解决方案（全）

前端常见跨域解决方案（全）什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文...

2018-07-20 15:36:53 178

原创笔记小结（三）

Reactreact入门案例小结入门案例1 来自于 React理念的例子这个案例很简单所以我就把react流程步骤记一下步骤把 UI 划分出组件层级给你一个UI界面，首先我们得做的就是看到这个界面先要想到应该划分为几个什么样的组件，这关系着你的代码结构，组件的层次关系这里案例就可以分为5个组件导致代码...

2018-07-17 09:30:03 253

原创笔记小结（二）

React阮一峰老师入门案例小结开始写这份学习笔记的时候，我先将阮一峰大神的react入门看了一遍，12个demo也自己敲了一遍，网址：http://www.ruanyifeng.com/blog/2015/03/react.htmlReactDOM.render()在每个demo最后，都会调用这个方法ReactDOM.render 是 React 的...

2018-07-17 09:12:27 199

原创笔记小结（一）

这笔记是我刚上项目的小白写了点自己的薄弱点，加深记忆，保存可以回顾一下 JSON 我是上了项目才第一次触摸到json的懵懵懂懂的做了下去所以花了一点时间稍微写一下，加深理解Json 有两种表示结构：对象和数组 {a:b,c:d,…..} ; [{a:b,c:d,….},{e:f,…..}…....

2018-07-17 09:05:01 338

原创 js笔试面试题（随意）

1 网站的资源的文件优化尽可能减少http请求次数，将css, js, 图片各自合并文件开启GZip压缩浏览器缓存开启长连接（Keep-Alive）避免重定向指定字符集样式表css置顶，脚本js置底使用 CDN 托管使用AJAX缓存，让网站内容分批加载，局部更新2 响应式布局和自适应布局的区别自适应布局会在网页的头部，加一段代码： &l...

2018-07-10 16:52:48 592

转载 Vue双向绑定原理及实现

我其实很好奇vue的双向绑定原理是怎么实现的，为此，在网上找了几篇文章去理解了一下！记录一下vue的双向绑定原理及实现： https://www.cnblogs.com/canfoo/p/6891868.htmlObject.defineProperty： https://www.jianshu.com/p/07ba2b0c8fcaJavaScript的prototype属性：http://www...

2018-06-29 10:54:45 1025

原创移动端h5实现假键盘，假输入框，假input框

为什么要做这个呢，微信端ios选择type=tel 没有小数点，选择type=number有一大堆的非数字字符，当然你可以用keycode来判断去禁用非数字的点击，何况，这种类型的input框会将只要输入框内的字符串不能转换成浮点数，它的值就变为空了so当然就不考虑了，那网上搜了一下，发现还可以啊，简单写一个，实现功能：键盘带有小数点，并可以自动弹出限制整数与小数的...

2018-06-27 20:09:29 2559 1

原创 vue中attributes, methods ,events ,slots解释

学习vue，一定要对这四个名词理解分别是attribute, methods ,events ,slot咱们分别来介绍一下，都是我从网上找的，汇总起来方便自己查阅！

2018-06-01 19:13:39 3578 1

原创判断是否是同一天，获取昨天，获取两个时间段内的所有天数

推荐个好东西，moment对象，官网 http://momentjs.cn/docs/#/manipulating/subtract/项目中 npm install moment 即可，导入使用 import moment from ‘moment’用的最多的当然是format初始化，但是里面有很多方法，推荐大家去看一下let result = '' let today = ne...

2018-05-29 21:53:34 7011

原创 Vue监听滚动实现锚点定位（双向）

这里很感谢 http://www.jb51.net/article/110325.htm 这篇文章带来的启发但是我和他不同，网上的方法都是这样计算滚动条距离窗口顶部的距离，注意是窗口，用的是document对象 // Chrome document.body.scrollTop // Firefox document.documentElement.scrollTop ...

2018-05-21 21:36:03 58813 10

原创 pc端图片与视频放大预览

我这边借助了element的dialog组件，进行封装为自己的公共组件即可正常页面图片大小<div v-if="JSON.stringify(authorizedInformation) !== '{}' && authorizedInformation.name != '无'"> <div v-for="(item, value) in a...

2018-05-21 20:54:47 1224

转载 Vue 组件 .sync 修饰符

今天看vue官网的sync修饰符有点不理解，发现这篇解决了我的疑惑，故转载一下<div id="app"> <div>父组件bar: {{bar}}</div> <comp :foo.sync="bar"></comp> <!-- <comp :foo="bar&quo

2018-05-04 14:21:08 495

原创 a标签打开qq网页版，报参数错误

原本应该是 <a href="http://wpa.qq.com/msgrd?v=3&uin=2602423545&site=qq&menu=yes" target="_blank">转译一下： <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2602423545&amp;site=qq&

2018-05-04 13:10:03 1023

原创手机端实现6位验证码输入框效果

也就是界面上，6个input框当初想着应该很简单的，结果做起来发现，还是坑蛮多的首先的想法就是6个input框，每输入一个数字之后，切换到下一个input，即切换focus，昨晚发现安卓机很流畅啊，但是要命的是ios并不是那么流畅，有卡顿的感觉，输很快会导致感觉手机要卡死的感觉，当然要pass，其次，我是不是可以一个input框，分成6个格子的样式呢，计算数字宽度，发现样太不友好了，...

2018-05-03 22:19:32 14103 4

原创利用postMessage实现pdf.js关键字个数查找

需求：外部输入关键字，去查找预览出来的pdf文件中的关键字个数，返回到外部进行alert出来解决：使用postMessage进行监听因为，pdf.js工具自带代表着中国金融这个关键字在此文档中出现了 14次，首先当然是找到这个方法啦，viewer.js一万多行源码啊，现在就可以开始了，外面vue页面的input框触发change方法 <el-input v-model.trim="...

2018-05-03 21:25:21 1823

react案例源码

空空如也