[improvement] Badge: optimize performance (#546)

This commit is contained in:
neverland 2018-09-10 16:45:32 +08:00 committed by GitHub
parent 42800f70d7
commit aae778e368
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 10 deletions

View File

@ -36,8 +36,10 @@ create({
methods: {
setActive(badge) {
let { active } = this.data;
const { badges } = this.data;
if (badge) {
active = this.data.badges.indexOf(badge);
active = badges.indexOf(badge);
}
if (active === this.currentActive) {
@ -46,12 +48,11 @@ create({
if (this.currentActive !== -1) {
this.$emit('change', active);
badges[this.currentActive].setActive(false);
}
badges[active].setActive(true);
this.currentActive = active;
this.data.badges.forEach((badge, index) => {
badge.setActive(index === active);
});
}
}
});

View File

@ -1 +1 @@
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-dialog{width:85%;font-size:16px;overflow:hidden;border-radius:4px;background-color:#fff}.van-dialog__header{padding:15px 0 0;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{line-height:1.5;padding:15px 20px}.van-dialog__message--has-title{color:#999;font-size:14px}.van-dialog__footer{display:-webkit-box;display:-webkit-flex;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__button{-webkit-box-flex:1;-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog__confirm,.van-dialog__confirm:active{color:#00c000!important}.van-dialog-bounce-enter{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.van-dialog-bounce-leave-active{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9)}
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-dialog{width:85%;font-size:16px;overflow:hidden;border-radius:4px;background-color:#fff}.van-dialog__header{padding:15px 0 0;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{padding:20px;line-height:1.5}.van-dialog__message--has-title{color:#666;font-size:14px}.van-dialog__footer{display:-webkit-box;display:-webkit-flex;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__button{-webkit-box-flex:1;-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog__confirm,.van-dialog__confirm:active{color:#f44!important}.van-dialog-bounce-enter{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.van-dialog-bounce-leave-active{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9)}

View File

@ -1 +1 @@
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{top:0;left:0;right:0;z-index:99;position:absolute}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__wrap--scrollable .van-tab{-webkit-box-flex:0;-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__nav{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;position:relative;background-color:#fff}.van-tabs__nav--line{height:100%}.van-tabs__nav--card{margin:0 15px;border-radius:2px;box-sizing:border-box;border:1px solid #f44;height:30px}.van-tabs__nav--card .van-tab{color:#f44;border-right:1px solid #f44;line-height:28px}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;background-color:#f44}.van-tabs__line{z-index:1;left:0;bottom:0;height:2px;position:absolute;background-color:#f44}.van-tabs--line{padding-top:44px}.van-tabs--line .van-tabs__wrap{height:44px}.van-tabs--card{padding-top:30px}.van-tabs--card .van-tabs__wrap{height:30px}.van-tab{-webkit-box-flex:1;-webkit-flex:1;flex:1;cursor:pointer;padding:0 5px;font-size:14px;position:relative;color:#333;line-height:44px;text-align:center;box-sizing:border-box;background-color:#fff;min-width:0}.van-tab span{display:block}.van-tab:active{background-color:#e8e8e8}.van-tab--active{color:#f44}.van-tab--disabled{color:#c9c9c9}.van-tab--disabled:active{background-color:#fff}
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{top:0;left:0;right:0;z-index:99;position:absolute}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__wrap--scrollable .van-tab{-webkit-box-flex:0;-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__nav{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;position:relative;background-color:#fff}.van-tabs__nav--line{height:100%}.van-tabs__nav--card{margin:0 15px;border-radius:2px;box-sizing:border-box;border:1px solid #f44;height:30px}.van-tabs__nav--card .van-tab{color:#f44;border-right:1px solid #f44;line-height:28px}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;background-color:#f44}.van-tabs__line{z-index:1;left:0;bottom:0;height:2px;position:absolute;background-color:#f44}.van-tabs--line{padding-top:44px}.van-tabs--line .van-tabs__wrap{height:44px}.van-tabs--card{padding-top:30px}.van-tabs--card .van-tabs__wrap{height:30px}.van-tab{-webkit-box-flex:1;-webkit-flex:1;flex:1;cursor:pointer;padding:0 5px;font-size:14px;position:relative;color:#333;line-height:44px;text-align:center;box-sizing:border-box;background-color:#fff;min-width:0}.van-tab span{display:block}.van-tab--active{color:#f44}.van-tab--disabled{color:#c9c9c9}

View File

@ -36,8 +36,10 @@ create({
methods: {
setActive(badge) {
let { active } = this.data;
const { badges } = this.data;
if (badge) {
active = this.data.badges.indexOf(badge);
active = badges.indexOf(badge);
}
if (active === this.currentActive) {
@ -46,12 +48,11 @@ create({
if (this.currentActive !== -1) {
this.$emit('change', active);
badges[this.currentActive].setActive(false);
}
badges[active].setActive(true);
this.currentActive = active;
this.data.badges.forEach((badge, index) => {
badge.setActive(index === active);
});
}
}
});