• elm.scrollIntoView 方法介绍
    2021-04-29 11:37
    scrollIntoViewlet elem = document.getElementById(key); if(elem) {        elem.scrollIntoView({behavior: "smooth"}); }我们想要实现将页面滚动到固定位置,呈现某些固定元素,之前的做法是先通过getBoundingClientRect来获取目标元素在视窗中的位置,再加上scrollTop...
  • vue中使用echarts的最佳实现方案
    2021-04-29 10:47
    vue中使用echarts在vue中使用echarts,目前比前几年方便多了,echarts有了npm包。第一步,安装echartsnpm install echarts --save第二步,在vue组件中引入echarts老版本echarts的引入方式(5.0版本以下)import echarts from 'echarts';新版本echart的引入方式(5.0版本以上)import * as echarts fro...
  • elementUI中的elTable实现原理分析
    2021-04-07 18:24
    elementUI中的elTable实现原理图上图是我们使用element table组件的一个常见场景,顶部固定,左侧列固定,右侧列固定,甚至底部行固定。这些特性对于展现数据,报表等是非常友好的一种用户体验。今天我们不谈elTable的使用,今天我们来谈一谈elTable功能实现的原理。第一步,我们就需要正常的展现这个table表格,td中的宽度用户设定多少就是多少,没设定就自动宽度。第二步,通过js操作dom,获取到这个table中,每一行的高度,每一列的宽度。第三步,实现table功能的的布局。这样,我们table布局就实现了。...
  • vue中v-loading指令的实现
    2021-03-29 17:57
    v-loading指令实现代码import Vue from 'vue'; Vue.directive('loading',{     bind:function(el,binding){         let div = document.createElement('div');   ...
  • Vue中实现React.Fragment,多个duo根元素的解决方案
    2021-03-29 17:33
    前言近日,在工作中实现table绘制报表的功能,采用的时vue框架,由于报表展现形式需要多种rowspan,colspan来固定样式。而elementUI,vxe-table的span-method方法对于实现复杂表格并不适用。所以最终使用vue 的jsx进行自己绘制table。最终结果长这样:vue2 现状Fragment是Vue3.0中的新特性,而目前vue2中的组件唯一根元素仍是硬性要求。报表jsx渲染中与唯一根元素规则的冲突。对于报表渲染的是实现中,由于要进行rowspan合并,所以最好的方式是遍历数据,每次遍历第一个td进行...
  • Vue的transition中的slidedown,slideUp展开收起动画
    2021-02-23 11:15
    vue transition动画vue的transition过渡动画在vue官网已有详细教程,就不赘述了。然而当我们使用transition来实现slidedown,slideup的展开收起动画时,就会发现没有过渡动画,是transition失灵了吗?当然不是,是因为css3的transition动画需要知道两个信息,开始状态,结束状态。如上图的点击实现slideup的收起动画,外层div一般高度都是自动的,在transition过程中,css3只知道结束状态是 height:0;而不知道开始状态 height: **px。...
  • Element.scrollHeight属性,快速获取元素的高度
    2021-02-22 18:04
    Element.scrollHeight,可以获取到元素的滚动高度。相对于scrollHeight,我们耳熟能详的几个属性就是clientHeight,offsetHeight。这三个属性都是用于获取一个元素的高度的,对于他们的差别,网上有一堆文章在举例,画图详细介绍他们的差别。其实理解他们很简单scrollHeight  --- 元素的滚动高度。clientHeight --- 元素的内部高度。offsetHeight --- 元素的外部高度。再容易理解一点,现在大多数开发人员都买了房子,或者...
  • 2020年4月4日,全国沉痛悼念新冠肺炎罹难者,纪念在一线抗议牺牲得医护烈士。
    2020-04-04 21:10
    2020年4月4日,全国沉痛悼念新冠肺炎罹难者  今天是清明节,2020年,我们经历了新冠肺炎的洗礼。从1月底到全国疫情状况的形式控制住,人们得以复工复业,这赖于在政府和党的领导下,全国人民上下一心,众志成城。更有无数医护人员逆行而上。抱着“苟利国家生死以,岂因祸福避趋之”的信念为中国抗疫,武汉抗疫奉献了很多很多,甚至是生命。在今年清明之际,国务院下令,为了悼念在新冠肺炎疫情中罹难的同胞,纪念在新冠肺炎抗疫中牺牲的一线医护人员烈士们,今天10年,全国默哀、悼念。  在此之际,作为中国的企业,比如腾讯旗下所有游戏停运...
  • Vue实现Popper跟随弹出层,添加到body中,不受父级元素影响的方式
    2019-07-23 16:04
    前言像element中的这种自定义select,实有一个弹出层跟随一个input输入框。为了能让他看起来更像真的select,我们就需要把弹出层添加到body元素中。因为如果不这样的话,如果input输入框的父元素有一个overflow:hidden样式,那么这个弹出层可能就会显示不全。vue组件中弹出层添加到body中这个弹出层在jqeury实现中添加到body中我们轻车熟路。那么在vue的组件中,我们又该怎么做,才能将弹出层添加到body元素中呢。或者我们可以写一个vue的跟随弹出层组件,方便所有需要跟随弹出层的地方来使用。ele...
  • 通过Set对象便捷判断所选格子和已占用的格子是否冲突
    2019-07-23 15:36
    应用场景像上面这种需求,就是会议室管理。已有的会议会占用一定的时间段。这时候我们通过拖动的方式来选择时间段创建新的会议的时候,就需要新的会议的时间段和已有会议的时间段不能冲突。我们就需要像上面这样判断多种情况下的冲突。这样的话,我们就需要写很多if...else...,或者switch...case..,甚是麻烦。巧用Set判断时间段冲突ES6中提供了一个Set对象,是一个iterable可遍历的对象。Set对象跟Array对象很类似,最主要的区别就是Set对象中的元素不能重复。类似的代码如下:let stime=8; le...
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1