Use an added style and shadow for the focused element.
This commit is contained in:
parent
291acd27f3
commit
8cc60d2249
3 changed files with 25 additions and 5 deletions
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<button :type="htmlType" :class="classes" :disabled="disabled" @click="handleClick">
|
||||
<button
|
||||
:type="htmlType"
|
||||
:class="classes"
|
||||
:disabled="disabled"
|
||||
@blur="handleBlur"
|
||||
@click="handleClick"
|
||||
@focus="handleFocus">
|
||||
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
|
||||
<Icon :type="icon" v-if="icon && !loading"></Icon>
|
||||
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
||||
|
@ -46,6 +52,7 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
isFocused: false,
|
||||
showSlot: true
|
||||
};
|
||||
},
|
||||
|
@ -59,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;
|
||||
|
|
|
@ -4,6 +4,11 @@
|
|||
.btn;
|
||||
.btn-default;
|
||||
|
||||
&.@{btn-prefix-cls}-focused {
|
||||
box-shadow: 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-long{
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -27,11 +27,12 @@
|
|||
.button-variant(@color; @background; @border) {
|
||||
.button-color(@color; @background; @border);
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
&:hover
|
||||
// &:focus
|
||||
{
|
||||
.button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
|
||||
|
|
Loading…
Add table
Reference in a new issue