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