❝你要偷偷厉害
万物皆可期待
❞
前言
这年头，有对象的，都用情侣头像了
再看看自己, 连头像都散发着单身狗的清香
这几天好不容易约上一个微信头像很好的女生，好不容易等到她姗姗来迟，可就在她转身的那一刻，我喷了一口水，默默的离开了
回去后，我跟好兄弟吐槽
- 微信上面的女的照片那么漂亮为什么真人那么丑
- 兄弟，醒醒吧，那是微信，微信。。，你还当真
原来仅仅只是微信啊
1 Avatar
addClass
avatarClass() {
const { size, icon, shape } = this;
let classList = ['el-avatar'];
if (size && typeof size === 'string') {
classList.push(`el-avatar--${size}`);
}
if (icon) {
classList.push('el-avatar--icon');
}
if (shape) {
classList.push(`el-avatar--${shape}`);
}
return classList.join(' ');
}
技巧解析
❝常规模式：class="el-avatar--small el-avatar--icon"
❞
计算模式: classList.join(' ')
添加模式: el.classList.add()
jQuery模式：$(el).addClass()
vue模式: class="{'el-avatar--small': true}"
srcSet
- A和C站在一起，谁会高一些？
- A
- 不对，是C
- 为什么呀
- 因为ABCD呀
代码片段
if (isImageExist && src) {
return <img
src={src}
...
srcSet={srcSet}/>;
}
技巧解析
❝不同大小的屏幕又该怎么处理呢？
❞
屏幕适配啊，rem，vw，%
图片呢？总不能放大缩小吧？
那咋办？
适配呗
怎么适配？
/*
* 800px 加载 middle.jpg
* 1400px 加载 big.jpg
* 默认加载 small.jpg
*/
<img
src="small.jpg "
srcset="big.jpg 1440w, middle.jpg 800w" />
❝ ❞
object-fit
有没有感觉很有弹性？
不光皮肤可以光泽有弹性，图片也可以！
if (isImageExist && src) {
return <img
src={src}
...
style={{ 'object-fit': fit }}/>;
}
技巧解析
❝自然态：object-fit: none;
❞
变形态：object-fit: fill;
覆盖态：object-fit: cover;
还有好多好玩的形态，等你慢慢解锁 ^^ ^^
object-fit 传送门
「你在我身边的时候」
「我从来没有羡慕过任何人」
参考链接
往期回顾
- 跟随Element学习Vue小技巧(1)——Layout
- 跟随Element学习Vue小技巧(2)——Container
- 跟随Element学习Vue小技巧(7)——Button
- 跟随Element学习Vue小技巧(8)——Link
- 跟随Element学习Vue小技巧(9)——Radio
- 跟随Element学习Vue小技巧(10)——Checkbox
- 跟随Element学习Vue小技巧(11)——Input
- 跟随Element学习Vue小技巧(12)——InputNumber
- 跟随Element学习Vue小技巧(13)——Select
- 跟随Element学习Vue小技巧(14)——Cascader
- 跟随Element学习Vue小技巧(15)——Switch
- 跟随Element学习Vue小技巧(16)——Slider
- 跟随Element学习Vue小技巧(17)——TimePicker
- 跟随Element学习Vue小技巧(18)——DatePicker
- 跟随Element学习Vue小技巧(20)——Upload
- 跟随Element学习Vue小技巧(21)——Rate
- 跟随Element学习Vue小技巧(23)——Transfer
- 跟随Element学习Vue小技巧(24)——Form
- 跟随Element学习Vue小技巧(25)——Table
- 跟随Element学习Vue小技巧(26)——Tag
- 跟随Element学习Vue小技巧(27)——Progress
- 跟随Element学习Vue小技巧(28)——Tree
- 跟随Element学习Vue小技巧(29)——Pagination
