drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert "Revert "update Button & style""

Browse source 
This reverts commit 518c639ada.
This commit is contained in:
梁灏 2018-01-18 10:51:12 +08:00
parent 518c639ada
commit 9e5c72833e
2 changed files with 5 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/button/button.vue
View file

@ -3,9 +3,7 @@
:type="htmlType" :type="htmlType"
:class="classes" :class="classes"
:disabled="disabled" :disabled="disabled"
@blur="handleBlur" @click="handleClick">
@click="handleClick"
@focus="handleFocus">
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
<Icon :type="icon" v-if="icon && !loading"></Icon> <Icon :type="icon" v-if="icon && !loading"></Icon>
<span v-if="showSlot" ref="slot"><slot></slot></span> <span v-if="showSlot" ref="slot"><slot></slot></span>
@ -52,7 +50,6 @@
}, },
data () { data () {
return { return {
isFocused: false,
showSlot: true showSlot: true
}; };
}, },
@ -66,22 +63,15 @@
[`${prefixCls}-${this.shape}`]: !!this.shape, [`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-${this.size}`]: !!this.size, [`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading != null && this.loading, [`${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: { methods: {
handleBlur () {
this.isFocused = false;
},
handleClick (event) { handleClick (event) {
this.$emit('click', event); this.$emit('click', event);
}, }
handleFocus () {
this.isFocused = true;
},
}, },
mounted () { mounted () {
this.showSlot = this.$slots.default !== undefined; this.showSlot = this.$slots.default !== undefined;

6
src/styles/mixins/button.less
View file

@ -135,7 +135,7 @@
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius); .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
//transform: translate3d(0, 0, 0); //transform: translate3d(0, 0, 0);
//transition: all @transition-time linear; //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} { > .@{css-prefix-iconfont} {
line-height: 1; line-height: 1;
@ -267,9 +267,7 @@
// Color // Color
// for tabindex // for tabindex
.active-btn-color(@color) { .active-btn-color(@color) {
transition: all @transition-time @ease-in-out; &:focus {
&.@{btn-prefix-cls}-focused {
box-shadow: 0 0 0 2px fade(@color, 20%); box-shadow: 0 0 0 2px fade(@color, 20%);
z-index: 1; z-index: 1;
} }