donggua_123的博客

前端中对于：文字超出tooltip展示，鼠标滑过气泡展示所有内容，这样的需求是很常见的，element-ui也有专门的组件el-popover要实现这样的效果，使用el-popover组件即可。<el-table-column prop="date" label="原始popover" width="180"> <template slot-scope="{row}"> <el-popover placement="top" trigger=

现在的前端项目中对于element-ui的使用几乎已经是一个常规动作了，但是组件库中的ui组件不一定都能满足实际场景的需求，比如今天要讲的select下拉框选择组件。我们公司是做证券行业基础设施的，股票和证券的数量动不动就是上千，当使用select渲染的时候就会很有压力，我司大致3000条数据，全部渲染出来大致需要4s左右，并且多选模式时，选中和反选时会明显感觉卡顿，这在体验上是觉得不能接受的...

需求：运行监控图模块，模块之间用虚线或者实线连接，且带有箭头实现方法：1、canvas绘制2、echarts专业的表格软件（画带箭头的虚线有难度）3、svg方法4、leader-line插件5、背景图刚开始项目比较紧急，也没时间研究怎么划线比较好，就用了最笨的方法：背景图。就是让ui出一张背景图，只留下线条和背景色，其它元素的位置通过配置数据来动态渲染 ...

现在vue项目基本上都是使用axios进行请求操作，但是axios有时候并不能完全满足业务的需求，因为官方axios只支持一些比较规则的请求参数和方式，比如body类型的post，params类型的get。而实际业务中后台给的接口可不会那么如你所愿的规范，当后台同事肆意挥洒，尽情装逼，完全是即兴发挥，不考虑前端感受的时候，往往给出来的api接口是很变态的：get方法的url后面拼接参数...

前段时间遇到一个需求，需要在H5页面中增加下载文件按钮，下载一个压缩文件，第一个想到的当然是最普遍和常用的方法：动态生成a标签，把链接地址给到href属性，触发一个click事件，完美下载。于是撸起袖子就开干。由于文件数据是通过接口请求回来的数据流,application/octet-stream类型，需要转换一下来使用： download() { ...

最近遇到一个需求：前端定制化生成合同模板，生成时可以在指定位置拖放指定的控件，可动态编辑指定控件的属性和位置，最后将控件的位置等属性传给后台，后续使用模板签署合同时，乙方可在模板上指定位置签署。点击左边控件列表=》添加控件到文件上=》点击文件上的控件激活该控件=》编辑该控件的相关字段=》提交数据控件类型有多种，支持多个控件同时添加，文本类型支持长宽拉伸设置刚好有一个很好用的v...

问题：h5页面，在ios系统中，拖动顶部固定元素（红色区域）时，会默认拖动整个浏览器，导致出现白色背景，影响到自定义的滚动事件（橙色区域），因为自定义滚动是用了ui框架的，会导致其短暂的无法滚动，必须要等整个页面停稳了才能滚动橙色区域，影响到体验。这应该是ios系统自带的缓动效果，当用户拖动页面元素时给了一个回弹吸顶的效果，显得更加柔和，但有时候我们是不需要的。想要的效果：到顶后继续向下滑...

vue项目中我们很多时候需要刷新页面，比如本地用户信息更新后，或者需要重新加载当前页面的数据时，使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新，和h5快捷键一样，会有短暂空白出现，体验很不好，这里说两种在vue项目里使用的无感知刷新页面方法：一、provide/inject方法父组件中provide提供的属性可以在任何...

项目中难免会遇到预览文件或者下载文件的场景，如果后台返回的是base64或者图片格式还好说，文件信息直接放在返回body里，作为对象属性给到前端，很直观，也方便取用。但后台给到的是文件流就要麻烦一些了，一般来说文件流会直接凡在res.data里处理这种特殊返回值时需要设置axios的responseType为blob，防止axios内部默认处理返回值，导致无法解析：axios.g...

工作当中时常会遇到对文件的一些处理，比如下载表格、下载图片、下载文件等，这里说一种下载压缩包的方法。其实也很简单，需要用到一款插件jszip，官方用法都是有的：https://www.npmjs.com/package/jszip可以直接引入脚本：<script src='./jszip.js'></script>也可以在vue项目中直接安装，运行：...

项目中使用element-ui时，message弹框功能是必须使用的，有时会在点击按钮时提示无权限，或者请求报错时给出适当提示：但是重复点击按钮或者同一个页面多个请求同时报错时，就不美观了可以看到，element-ui是动态往页面根节点插入message元素来实现弹框效果的，都拥有el-message属性那么我们就可以通过判断页面中message的个数来决定要不要弹出第...

extend()是一个全局构造器，生成的是一个还没挂载到页面元素上的组件实例。在全局挂载插件的形式全局注册，就需要用到vue.use（）方法，官方文档：所以插件必须是一个对象，并且提供install方法，注册的时候自动调用该方法。所以组件的写作步骤就清晰了一些了，实践出真知，现在就来练习一下写一个简约版的全局alert弹框1、在components文件夹下新建alert文件夹，...

前端工作中对于权限的需求是难免的，最近项目中就有这样的需求了。后台管理员可以新增前台成员，不通的成员具有不同的权限，有权限的人员可以看到一些操作按钮或者数据列表，反之则看不到。那么也就是说，前端需要根据登录用户的权限来渲染指定的dom。1、components文件下新建authorized文件夹，文件夹下新建auth.js校验权限const checkAuth = (authNa...

vue项目中，组件间的通信是最常用到的，也是面试必问的问题之一。组件通信可以分为几种类型：1、父子通信 1.1 父传子 1.2 子传父2、跨级传递 2.1祖父传孙 3.1孙传祖父3、同级组件间通信首先说一下通用的方式，即不管哪种场景都在功能上可以实现，撇开具体场景的适合程度，其实也就是全局的通信方式。一、vue bus 以vue实例为总线，...

在vue中，v-model是用来进行数据双向绑定的一个语法糖，比如说用在input上，输入框数据变化，v-model绑定的对应的值也会跟着变化，无需单独获取。其实v-model还可以在自定义组件中使用，可以被拆解为props:value和event：input，也就是说组件必须接收一个value值以及名为input的自定义事件，就可以在自定义组件上使用v-model了。新建一个组件Inpu...

项目当中使用vue的时候一定会用到路由，并且二级路由甚至三集路由的需求都是刚需，当然，多级路由的配置方法和二级的是一样的，简单讲讲二级路由的配置吧。      首先把一级路由的结构准备好： 发现 今日学习

最近做一个移动端项目的时候，有一个页面的需求是在同一个页面里，通过导航栏切换出不同的滚动组件，导航栏也要跟着滚动组件一起上下滚动，当导航栏到达顶部时悬浮在顶部，不再随滚动组件一起滚动了，组件则继续向上滚动。如图所示：进入页面状态：  向上滚动：              到达顶部：导航栏悬浮 刚开始结构上导航栏、顶部展示区和底部主体区域是一个滚动整体，判断滚动距离，当距离大于顶部展示区时，将导航栏...

实际开发过程中遇到这样的需求，页面加载后会请求多个数据模块，每个模块都进行进度条展示，从零到目标值给一个增长效果。于是给每个子元素绑定一个定时器setInterval，像这样：效果确是这样的：完全错乱了，这可不是我想要的效果呀！查阅资料后才知道，当我们在for循环里面调用定时器时，定时器时异步执行的，没循环一次，i加1，生成一个timer，放到进程队列里面去，等到for循环完成后，i已经加到最大值...

最近一直在做一个vue移动端商城的实战，期间遇到一个小小的问题，值得一说，可能别人已经遇到过了，只是我第一次遇到而已。首页有个楼层区域，用于展示不同类别的商品，比如：水果，衣服，酒水等，布局都是一样的，所以将单个楼层独立出来成一个组件，只需要给响应的六层传入对应的数据就可以按需渲染了：先在父组件引入，并注册楼层组件 import Floor from '@/components/pages/com...

将解压文件中server文件夹复制到项目跟目录，并修改配置项在开发者工具中操作，第一次上传勾选模块上传，之后就勾选智能上传每次修改后需点击上传部署，不方便一般搭建本地开发环境本地安装mysql指南 https://cloud.tencent.com/document/product/619/11442将CONF内的内容复制出来，添加到server下config.js里，并修改其中三项：https:...

新建server文件夹，npm init 初始化文件夹:新建服务器index入口文件，启动服务器，断开3000：npm i mogoose -S,安装mongoose新建database文件夹，存放数据文件新建schema文件夹，存放分类数据文件，在里新建User文件，用于插入用户信息新建init文件，连接数据库的入口：在index文件中开始写入数据：开启mongodb数据库： mongod执行i...

vue开发的时候，我们经常会有这样的需求：开发一个详细页面来展示商品的详细信息，根据列表页传入的id进行请求，拿到对应的数据进行渲染。但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id这时候可以使用vue的$destroy()方法这是vue...

在做一个实战项目时，首页是一个商品列表页，引入better-scroll实现滚动效果 import BScroll from 'better-scroll';mounted() { this._initScroll(); },methods: { _initScroll() { this.$nextTick(() =&gt; { ...

1、文字只能放在text里面，包括字体图标&lt;text class="main-icon icon"&gt;&amp;#xe7b8;&lt;/text&gt;2、cell不支持任何样式，高度随内部子元素样式撑开，margin登也在内部样式设置3、css样式不支持嵌套写法： .icon-big .icon{ font-family: iconfont; ...

有时候后我们会需要在一个新窗口打开页面，而我们都知道，vue是单页面的应用，通过router在内部跳转的。但是依然有办法实现这个需求。刚开始在网上找了一下，有两种方式，一种是给outer-link标签添加tag=a跳转打开新窗口,亲测有效。&lt;router-link tag="a" target="_blank" :to="{name:'detail',query:{goodsId:'...

现在越来越多的开源工具使得开发效率大大提高，让开发者从繁琐的样式编写等工作中抽离出来，专注于前端逻辑的编写，很多时候只需要找到不同的工具、零件，按照自己的业务需求拼装在一起就是一辆很棒的车。只是不同的工具，组件也好、插件也好，都是由不同的人员开发维护的，属于独立的项目，但当我们要造车的时候，拿过来的零配件可能就有些地方无法相互兼容，比如多了个凹槽，导致两个零件无法很好的组装，这就需要手动去抹平这些...

在pc端，页面超过可视区高度后便会有滚动条，那么回到顶部的功能就必不可少了。现在我面临的情况：1、点击回到顶部，默认隐藏，滚动超过一定距离才显示回到顶部icon2、部分页面不需要回到顶部功能，比如登录、修改密码等模块；3、滚动效果的实现使用的是element-ui的scrollbar组件，看了下源码，并没有向外派发任何事件，仅仅实现了滚动效果，不提供诸如下拉刷新、回到顶部、返回滚动...

在使用vue的时候写了一段代码每次刷新的瞬间会无法解析，也只是一闪而已，但是体验非常不好，查阅了资料后发现是由于vue编译的时候是先渲染然后再根据v-show来条件隐藏，那样就会出现看得见的一瞬间，并且显示还在编译之前，这就导致本来刷新的时候要隐藏的元素有一瞬间的显示，而且还是未被编译的状态。要解决这个问题很简单，在内容标签上添加v-cloak属性，并配合css中[c-cload]{d