规定文字显示行数,多余部分用省略号代替
设置元素宽度
width:200px;
overflow: hidden;//超出文本隐藏
text-overflow: ellipsis;//超出文本省略号显示
display: -webkit-box;//设置为webkit盒模式
-webkit-line-clamp: 2;//2行显示
-webkit-box-orient: vertical;//从上到下垂直排列
不设置宽度,弹性布局。
父元素设置:display:flex,子元素:flex:1
flex: 1;
text-overflow:ellipsis;
white-space:nowrap;
overflow: hidden;
一像素边框的解决方案
原因:不同的设备,不同的设备像素比(dpr)导致的;
通过media来媒体查询
React:style-components解决方案
可设置颜色、类型、粗细,有默认值,也可通过父组件来传递参数
//定义
import styled from 'styled-components'
const border = StyledComp => {
return styled(StyledComp) `
position: relative;
border-radius: ${ props => props.radius || 0 }rem;
&::after {
pointer-events: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
content: "";
border-color: ${ props => props.color || '#ccc' };
border-style: ${ props => props.style || 'solid' };
border-width: ${ props => props.width || 0 };
@media (max--moz-device-pixel-ratio: 1.49),
(-webkit-max-device-pixel-ratio: 1.49),
(max-device-pixel-ratio: 1.49),
(max-resolution: 143dpi),
(max-resolution: 1.49dppx) {
width: 100%;
height: 100%;
transform: scale(1);
border-radius: ${ props => props.radius || 0 }rem;
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
(min-resolution: 144dpi) and (max-resolution: 239dpi),
(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
width: 200%;
height: 200%;
transform: scale(0.5);
border-radius: ${ props => props.radius * 2 || 0 }rem;
}
@media (min--moz-device-pixel-ratio: 2.5),
(-webkit-min-device-pixel-ratio: 2.5),
(min-device-pixel-ratio: 2.5),
(min-resolution: 240dpi),
(min-resolution: 2.5dppx) {
width: 300%;
height: 300%;
transform: scale(0.3333333);
border-radius: ${ props => props.radius * 3 || 0 };
}
transform-origin: 0 0;
}
`
}
export default border
包裹一个被加边框的元素后生成一个新的组件
//使用
import border from '@/CommonStyled/border.js'
//包裹使用
const SearchInput = border(styled.div `...`)
//jsx通过属性传递,ChildComponentStyle是Search组件里面的内容,可以通过{...this.props拿到父组件的属性}
<Search width="1px" radius={0.16}></Search>
//Search.jsx
class Search extends Component {
render() {
return (
<>
<SearchContainer {...this.props}>
<SearchInput {...this.props}>
<i className="iconfont"></i>
<span>{this.props.message}</span>
</SearchInput>
</SearchContainer>
</>
)
}
}
vue:styl
//加四周边框
$border(width = 0, color = #ccc, style = solid, radius = 0)
position relative
border-radius radius
&::after
pointer-events none
position absolute
z-index 999
top 0
left 0
content ""
border-color color
border-style style
border-width width
@media (max--moz-device-pixel-ratio: 1.49),
(-webkit-max-device-pixel-ratio: 1.49),
(max-device-pixel-ratio: 1.49),
(max-resolution: 143dpi),
(max-resolution: 1.49dppx)
width 100%
height 100%
transform scale(1)
border-radius radius
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
(min-resolution: 144dpi) and (max-resolution: 239dpi),
(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
width 200%
height 200%
transform scale(0.5)
border-radius radius * 2
@media (min--moz-device-pixel-ratio: 2.5),
(-webkit-min-device-pixel-ratio: 2.5),
(min-device-pixel-ratio: 2.5),
(min-resolution: 240dpi),
(min-resolution: 2.5dppx)
width 300%
height 300%
transform scale(0.3333333)
border-radius radius * 3
transform-origin 0 0
//加底部边框
$borderdown($color)
position: relative;
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
&::before
content: " ";
position: absolute;
left: 0px;
bottom: 0px;
background-color: $color;
transform: scaleY(0.667);
height: 1px;
width: 100%;
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
&::before
content: " ";
position: absolute;
left: 0px;
bottom: 0px;
background-color: $color;
transform: scaleY(0.5);
height: 1px;
width: 100%;
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
&::before
content: " ";
position: absolute;
left: 0px;
bottom: 0px;
background-color: $color;
transform: scaleY(0.333);
height: 1px;
width: 100%;
//使用
<style lang='stylus' scoped>
@import "../../assets/style/border";
@import "../../assets/style/borderDown";
.className
$border(1px,rgba(0,0,0,.08),,8px)
.childclassName
$borderdown(rgba(0,0,0,.08))
<style>
函数节流和防抖
节流
所谓节流,就是指连续触发事件,但是在 n 秒中只执行一次函数,节流会稀释函数的执行频率。
对于节流,一般有两种方式可以实现,分别是时间戳版和定时器版。
时间戳:使用时间戳,当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为 0 ),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。
// 时间戳版本
function throttle(func, wait) {
var context, args;
var previous = 0;//定义初始基准时间戳用于计算差值
return function() {
var now = +new Date();
context = this;//保存this指向,这里作为了回调函数,所以this指向事件对象
args = arguments;//保存传入的函数参数,e等
if (now - previous > wait) {
func.apply(context, args);//通过apply重新定义this指向,并传入参数
previous = now;
}
}
}
使用,第一次触发立即执行,往后每间隔给定时间才执行一次
container.onmousemove = throttle(getUserAction, 1000);
//continer是通过getelementbyId获取的dom,对鼠标滑过监听,事件的回调函数为getUserAction,1000为间隔时间
定时器:当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。
// 使用定时器
function throttle(func, wait) {
var timeout;
var previous = 0;
return function() {
context = this;
args = arguments;
if (!timeout) {//如果不存在定时器则向下执行
timeout = setTimeout(function(){
timeout = null;
func.apply(context, args)
}, wait)//在指定时间后将定时器消除
}
}
}
防抖
防抖的原理就是:你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行,总之,就是要等你触发完事件 n 秒内不再触发事件,我才执行,真是任性呐!
function debounce(func, wait, immediate) {//immediate(布尔类型)用来控制第一次是否立即执行
var timeout;
return function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
//这里判断timeout的时候只有在timeout=null时才不执行,clearTimeout只能清除延时器但是不会将timeout制空,所以每次触发事件都会通过判断并且清除原始延时器,只有在停止触发事件后,延时器将timeout制空才不会通过判断
if (immediate) {//如果需要立即执行则通过
var callNow = !timeout;//控制执行回调函数,
timeout = setTimeout(function(){
timeout = null;//在指定时间后异步延时的将timeout=null,下次触发事件下面的判断才会通过方可执行回调
}, wait)
if (callNow) func.apply(context, args)//只有在延时器将timeout赋值null后才会执行回调函数
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}