- 博客(14)
- 收藏
- 关注
RSS订阅原创 ant design vue中a-table固定头和列后出现行内容不对齐的情况
如图所示，在固定头和列后出现了几个问题，查看原因后得知是表格下部出现滚动条导致的，所以我把左右固定列的高度减去滚动条的高度就可以解决这个问题mounted () { // this.h = document.querySelector('.ptp-layout-main').offsetHeight - 45 const _this = this var tableBodyInnerNodeList = document.querySelectorAll('.ant-table-body-.
2021-02-19 16:27:22
5527
24
原创 Vue全局组件注册+require.context()函数
Vue全局组件注册+require.context()函数在一个项目中，如果某些组件频繁的使用，我们则需要频繁的引入和注册，我们可以通过require.context()函数匹配到这些组件统一进行全局注册。1. 创建globalComp.js文件目录结构：// 1. globalComp.jsimport Vue from 'vue'// 处理首字母大写 abc => Abcfunction changeStr(str) { return str.charAt(0).toUppe
2020-11-17 11:45:59
791
原创 3.文字超出隐藏显示...
文字超出隐藏显示…1、单行文字overflow: hidden; /*需设置高或宽，超出隐藏*/text-overflow: ellipsis; /*隐藏部分通过...显示*/white-space: nowrap; /*文字不换行*/2、多行文字overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /*文字显示行
2020-11-16 11:43:59
202
原创 2.vue组件样式穿透
vue组件样式穿透scoped表示样式只在本组件起作用,如果父组件要改变子组件的样式,如父组件hover的情况下，就需要样式穿透，在不同类型的样式文件中，穿透方式不同。1.在css，stylus中>>><style scoped> .wrapper:hover >>> span { color: blue; }</style>2.在sass，less中/deep/<style lang="sass" scoped&
2020-11-16 11:34:45
645
原创 1.三元表达式的嵌套使用
三元表达式的嵌套使用在vue项目中,动态绑定class或style时,常常会用到三元表达式。三元表达式的普通用法：a = 条件？值1：值2三元表达式的嵌套用法：a = 条件1？值1 : (条件2？值2 : 条件3？值3：值4)嵌套写法相当于：if (条件1) { a = 值1；}else if (条件2){ a = 值2；}else if (条件3){ &nbs
2020-11-16 11:33:52
1596
原创 vue程序运行过程(runtime-compiler和runtime-only)
这个图就是一个vue文件的完整运行过程，在用vue-cli2创建项目时,会让我们选择两种类型：1.runtime-compiler 2.runtime-only这两种类型的区别就在于：1.runtime-compiler：template -> ast -> render -> vdom -> ui通过这种方式创建的项目vue文件会完整的走一遍流程2.runtime-onlyrender -> vdom -> .
2020-08-17 23:08:54
1787
原创 移动端开发,meta标签
关于响应式开发(其实作为一个还没有实际项目经验的我来说，写这篇博客显得有点自以为是的那种感觉，但是就我现在的理解我希望能对响应式开发做一个理解总结。个人认为响应式开发是web阶段一个难点。)响应式开发其实就是一个框架,多种设备，通过CSS媒体查询@meida检测不同宽度的设备从而对页面做出调整，...
2020-08-09 21:39:51
1360
3
原创 Vue中v-model实现数据双向绑定的另外一种方式
Vue中v-model实现数据双向绑定原理<div id="app"> <input type="text" v-model="message"> <b>{{message}}</b></div><script src="vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">
2020-07-30 23:08:28
1531
1
原创 JavaScript如何在循环加事件的同时获取元素下标
JavaScript如何在循环加事件的同时获取元素下标当我们在用JavaScript做特效时，常常需要获取到当前元素的下标来控制当前元素以及其它元素的变化，如：轮播图开发时需要获取按钮的下标来控制本按钮的样式改变以及按钮对应的图片样式改变(这种思想可以运用于许多相同的场景)接下来通过另外一种场景来讲述这个问题下图中有四个按钮，点击哪个按钮控制台输出当前按钮的下标(序号)1.循环通过给i号按钮增加属性记录本按钮序号var buttons = document.querySelectorAll("b
2020-07-30 00:30:03
1653
原创 offset、client、scroll (width,height、left,top、X,Y)
offsetWidth、clientWidth、scrollWidthdiv{ width: 20px; height: 20px; padding: 10px; border: 5px solid #000080;}<script type="text/javascript"> var div = document.querySelector("div"); console.log(div.offsetWidth); console.lo
2020-07-22 15:18:32
223
原创 一个计算高度的小问题(bfc、margin-top BUG)
感觉挺简单的两道题，实际上考察了许多小知识点第二题：0containner下两个item都是浮动元素，而浮动元素是脱离文档流的，会造成父元素高度塌陷，也就是不会撑开父元素的高度，所以container高度为0；第一题：30px首先，container设置border：1px；边框只设置粗细是无效的，必须指定边框的样式，才会出现边框，例：border：solid；其次，container是一个BFC，它里面两个相邻item的上下margin会发生重叠，所以两个item中间只有10px的像素第一.
2020-06-30 20:29:35
413
原创 居中方式
居中方式1、行元素居中/*需在父级设置样式*/.parent{ text-align: center; height: 100px; line-height: 100px; }2、通过absolute绝对定位居中/*需在子辈设置样式，并且设置了元素尺寸*/.child{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margi
2020-06-26 17:41:26
191
原创 行元素、块元素、行内块元素
行元素、块元素、行内块元素一、行内元素(内联元素) inline element行内元素特性可以与其它行内元素同处一行，与块元素不行设置width，height无效设置行高line-height有效，并且会占用高度位置(相当于该行内元素有了height值，对下面元素的位置有影响，但该行内标签实际height值并没有改变)设置margin只有左右有效，上下无效设置padding上下左右都有效，但只有设置左右时元素内文本位置才会发生改变，而设置上下时文本位置不变。常见的行内元素a、span
2020-06-26 01:55:53
1772
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人