佳宸学习和分享笔记的地方

0%

抽离首页小卡片组件

抽离首页小卡片组件

dpr不同 获取图片倍数问题

之前的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
storage-info-bg-mixin(dpr)
$dpr = "@" + dpr
&-lun
background url("../img/LUN" + $dpr + ".png") no-repeat left
&-server
background url("../img/server" + $dpr + ".png") no-repeat left
&-file
background url("../img/file" + $dpr + ".png") no-repeat left
&-cifsshare
background url("../img/diskcifs" + $dpr + ".png") no-repeat center
&-nfsshare
background url("../img/disknfs" + $dpr + ".png") no-repeat center
&-ftpshare
background url("../img/diskftp" + $dpr + ".png") no-repeat center
&-object
background url("../img/object" + $dpr + ".png") no-repeat left
&-rent
background url("../img/rent" + $dpr + ".png") no-repeat left
&-bucket
background url("../img/bucket" + $dpr + ".png") no-repeat left

// 对所有的mixin再做一层mixin
media-mixin(mixin)
mixin('1x')
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2)
mixin('2x')
@media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min--moz-device-pixel-ratio: 3)
mixin('3x')

非常的繁琐,每个不同图片的都要添加一行,还用到了stylus mixin嵌套难以理解

我的方式

首先在父组件获取屏幕dpr,防止有个别屏幕dpr不是整数,1.5,1.25什么的,取整,默认dpr为一

1
2
3
4
5
6
7
8
getFloorDPR() {
let dpr = window.devicePixelRatio;
let dprMin = 1,
dprMax = 4;
if(dpr >= dprMin && dpr < dprMax) {
this.dpr = Math.floor(dpr)
}
}

子组件props,传入图片名即可

1
2
3
4
5
6
7
props: {
image: { //传入[图片名 ,屏幕dpr]
type: Array,
default: () => ['server', 1]
}
.....
}

style动态绑定背景图片

1
<div class="storage-info-bg" :style="bgIcon"></div>

在data中 得到传过来的值

1
2
3
4
5
6
7
8
data() {
return {
bgIcon: {
background: `url('/.../${this.image[0]}@${this.image[1]}x.png') no-repeat`
}
......
};
},

获取信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
getShareCountTip () {
return `${_('共享目录')}:` + `${this.getShareCount}` + _('个');
},

getCifsShareCountTip () {
return `${_('CIFS目录')}:` + `${this.cifsStore.cifs_share_dir_num || 0}` + _('个');
},

getNfsShareCountTip () {
return `${_('NFS目录')}:` + `${this.nfsStore.nfs_share_dir_num || 0}` + _('个');
},

getFtpShareCountTip () {
return `${_('FTP目录')}:` + `${this.ftpStore.ftp_share_dir_num || 0}` + _('个');
},

// 对象总数
getObjectTotalTip () {
return (`${_('对象总数')}:` +
`${this.objStore && this.objStore.object_num || 0}` +
_('个'));
},

// 用户账号
getUsersTip () {
return (`${_('用户账号')}:` +
`${this.objStore && this.objStore.user_num || 0}` +
_('个

非常的繁琐,所以子组件简化为两个方法

1
2
3
4
5
6
getCountTip() {
return (`${_(this.label)}${this.count} ${_('个')}`);
},
getConnectTip() {
return (`${_('已连接')}${this.connect} ${_('个')}`);
}

单位拆分

原代码

1
2
<span class="number">{{showNumber(objStore && objStore.object_num).val}}</span>
<span class="unit"><lang>{{showNumber(objStore && objStore.object_num).unit}}</lang></span>

每次返回个对象,每次都要调用两次方法,非常别扭,substr这个方法MDN说已经块要废弃了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
showNumber (num) {
let showNum = numSize(num || 0);
if (showNum && !lodash.isNumber(showNum)){
let numPosition = showNum.search(/万|亿/g);
return {
val: showNum.substr(0, numPosition),
unit: showNum.substr(numPosition)
}
}
return {
val: showNum,
unit: _('个')
};
},

我的优化:正则优化 使用 split,然后把计算放入data,template直接取,避免重复调用方法

1
2
<span class="number">{{unitValue[0]}}</span>
<span class="number-unit">{{unitValue[1]}}</span>
1
2
3
4
5
6
showNumber() {
let showNum = numSize(this.count);
lodash.isNumber(showNum)
? this.unitValue = [showNum, _('个')]
: this.unitValue = showNum.split(/(万|亿)/g);
}