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>
|
<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 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>
|
||||||
|
@ -46,6 +52,7 @@
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
isFocused: false,
|
||||||
showSlot: true
|
showSlot: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -59,15 +66,22 @@
|
||||||
[`${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;
|
||||||
|
|
|
@ -4,6 +4,11 @@
|
||||||
.btn;
|
.btn;
|
||||||
.btn-default;
|
.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{
|
&-long{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,11 +27,12 @@
|
||||||
.button-variant(@color; @background; @border) {
|
.button-variant(@color; @background; @border) {
|
||||||
.button-color(@color; @background; @border);
|
.button-color(@color; @background; @border);
|
||||||
|
|
||||||
&:hover,
|
&:hover
|
||||||
&:focus
|
// &:focus
|
||||||
{
|
{
|
||||||
.button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
|
.button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
|
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
|
||||||
|
|
Loading…
Add table
Reference in a new issue