From 4434b3abfbbe97f38c8ccd61e8c5664f1b1120b7 Mon Sep 17 00:00:00 2001 From: 梁灏 Date: Thu, 18 Jan 2018 10:13:13 +0800 Subject: [PATCH] update Button & style --- src/components/button/button.vue | 16 +++------------- src/styles/mixins/button.less | 6 ++---- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/src/components/button/button.vue b/src/components/button/button.vue index ff859f0..884952e 100644 --- a/src/components/button/button.vue +++ b/src/components/button/button.vue @@ -3,9 +3,7 @@ :type="htmlType" :class="classes" :disabled="disabled" - @blur="handleBlur" - @click="handleClick" - @focus="handleFocus"> + @click="handleClick"> @@ -52,7 +50,6 @@ }, data () { return { - isFocused: false, showSlot: true }; }, @@ -66,22 +63,15 @@ [`${prefixCls}-${this.shape}`]: !!this.shape, [`${prefixCls}-${this.size}`]: !!this.size, [`${prefixCls}-loading`]: this.loading != null && this.loading, - [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading), - [`${prefixCls}-focused`]: this.isFocused + [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading) } ]; } }, methods: { - handleBlur () { - this.isFocused = false; - }, handleClick (event) { this.$emit('click', event); - }, - handleFocus () { - this.isFocused = true; - }, + } }, mounted () { this.showSlot = this.$slots.default !== undefined; diff --git a/src/styles/mixins/button.less b/src/styles/mixins/button.less index 930765a..9005374 100644 --- a/src/styles/mixins/button.less +++ b/src/styles/mixins/button.less @@ -135,7 +135,7 @@ .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius); //transform: translate3d(0, 0, 0); //transition: all @transition-time linear; - transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear; + transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear; > .@{css-prefix-iconfont} { line-height: 1; @@ -267,9 +267,7 @@ // Color // for tabindex .active-btn-color(@color) { - transition: all @transition-time @ease-in-out; - &.@{btn-prefix-cls}-focused { - + &:focus { box-shadow: 0 0 0 2px fade(@color, 20%); z-index: 1; } -- libgit2 0.21.4