chenhaodong / mew-iview

Commit 8cc60d2249cc43ebf6ef083f0e18145ca8947e29

Authored by Graham Fairweather
1 parent 291acd27

Use an added style and shadow for the focused element.

Showing 3 changed files with 25 additions and 5 deletions   Show diff stats
Inline Side-by-side
src/components/button/button.vue
  Show/Hide comments   View file @8cc60d2
1 1 <template>
2   - <button :type="htmlType" :class="classes" :disabled="disabled" @click="handleClick">
  2 + <button
  3 + :type="htmlType"
  4 + :class="classes"
  5 + :disabled="disabled"
  6 + @blur="handleBlur"
  7 + @click="handleClick"
  8 + @focus="handleFocus">
3 9 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
4 10 <Icon :type="icon" v-if="icon && !loading"></Icon>
5 11 <span v-if="showSlot" ref="slot"><slot></slot></span>
... ... @@ -46,6 +52,7 @@
46 52 },
47 53 data () {
48 54 return {
  55 + isFocused: false,
49 56 showSlot: true
50 57 };
51 58 },
... ... @@ -59,15 +66,22 @@
59 66 [`${prefixCls}-${this.shape}`]: !!this.shape,
60 67 [`${prefixCls}-${this.size}`]: !!this.size,
61 68 [`${prefixCls}-loading`]: this.loading != null && this.loading,
62   - [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
  69 + [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading),
  70 + [`${prefixCls}-focused`]: this.isFocused
63 71 }
64 72 ];
65 73 }
66 74 },
67 75 methods: {
  76 + handleBlur () {
  77 + this.isFocused = false;
  78 + },
68 79 handleClick (event) {
69 80 this.$emit('click', event);
70   - }
  81 + },
  82 + handleFocus () {
  83 + this.isFocused = true;
  84 + },
71 85 },
72 86 mounted () {
73 87 this.showSlot = this.$slots.default !== undefined;
... ...
src/styles/components/button.less
  Show/Hide comments   View file @8cc60d2
... ... @@ -4,6 +4,11 @@
4 4 .btn;
5 5 .btn-default;
6 6  
  7 + &.@{btn-prefix-cls}-focused {
  8 + 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;
  9 + z-index: 1;
  10 + }
  11 +
7 12 &-long{
8 13 width: 100%;
9 14 }
... ...
src/styles/mixins/button.less
  Show/Hide comments   View file @8cc60d2
... ... @@ -27,11 +27,12 @@
27 27 .button-variant(@color; @background; @border) {
28 28 .button-color(@color; @background; @border);
29 29  
30   - &:hover,
31   - &:focus
  30 + &:hover
  31 + // &:focus
32 32 {
33 33 .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
34 34 }
  35 +
35 36 &:active,
36 37 &.active {
37 38 .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
... ...