Browse Source

chore: 按钮支持enter键确定

es6
guy 3 years ago
parent
commit
54d6c63be9
  1. 11
      src/base/single/button/button.basic.js
  2. 23
      src/less/base/single/button/button.less

11
src/base/single/button/button.basic.js

@ -11,6 +11,9 @@ BI.BasicButton = BI.inherit(BI.Single, {
return BI.extend(conf, { return BI.extend(conf, {
_baseCls: (conf._baseCls || "") + " bi-basic-button" + (conf.invalid ? "" : " cursor-pointer") + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""), _baseCls: (conf._baseCls || "") + " bi-basic-button" + (conf.invalid ? "" : " cursor-pointer") + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""),
// el: {} // 可以通过el来创建button元素 // el: {} // 可以通过el来创建button元素
attributes: {
tabIndex: 1
},
value: "", value: "",
stopEvent: false, stopEvent: false,
stopPropagation: false, stopPropagation: false,
@ -204,6 +207,12 @@ BI.BasicButton = BI.inherit(BI.Single, {
}); });
} }
hand.click(clk); hand.click(clk);
// enter键等同于点击
hand.keyup(function (e) {
if (e.keyCode === BI.KeyCode.ENTER) {
clk(e);
}
});
break; break;
} }
}); });
@ -403,8 +412,10 @@ BI.BasicButton = BI.inherit(BI.Single, {
BI.BasicButton.superclass._setEnable.apply(this, arguments); BI.BasicButton.superclass._setEnable.apply(this, arguments);
if (enable === true) { if (enable === true) {
this.element.removeClass("base-disabled disabled"); this.element.removeClass("base-disabled disabled");
this.element.attr("tabIndex", 1);
} else if (enable === false) { } else if (enable === false) {
this.element.addClass("base-disabled disabled"); this.element.addClass("base-disabled disabled");
this.element.removeAttr("tabIndex");
} }
if (!enable) { if (!enable) {
if (this.options.shadow) { if (this.options.shadow) {

23
src/less/base/single/button/button.less

@ -7,6 +7,7 @@ body .bi-button, #body .bi-button {
.border-radius(0px); .border-radius(0px);
} }
.border-radius(2px); .border-radius(2px);
outline: 0;
border: 1px solid @color-bi-border-button; border: 1px solid @color-bi-border-button;
background-color: @color-bi-background-button; background-color: @color-bi-background-button;
.box-sizing(border-box); .box-sizing(border-box);
@ -22,7 +23,7 @@ body .bi-button, #body .bi-button {
font-size: inherit; font-size: inherit;
border-width: 0; border-width: 0;
background-color: transparent; background-color: transparent;
&:hover { &:hover, &:focus {
.opacity(0.8); .opacity(0.8);
} }
&:active { &:active {
@ -47,7 +48,7 @@ body .bi-button, #body .bi-button {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-common-ghost-button; color: @color-bi-text-common-ghost-button;
} }
&:hover { &:hover, &:focus {
color: @color-bi-text; color: @color-bi-text;
background-color: @color-bi-background-hover-common-ghost-button; background-color: @color-bi-background-hover-common-ghost-button;
} }
@ -73,7 +74,7 @@ body .bi-button, #body .bi-button {
border-width: 0; border-width: 0;
} }
&.ghost { &.ghost {
&:hover { &:hover, &:focus {
border-color: @color-bi-border-ignore-button; border-color: @color-bi-border-ignore-button;
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-ignore-button; color: @color-bi-text-ignore-button;
@ -103,7 +104,7 @@ body .bi-button, #body .bi-button {
color: @color-bi-text-success-ghost-button; color: @color-bi-text-success-ghost-button;
} }
background-color: transparent; background-color: transparent;
&:hover { &:hover, &:focus {
color: @color-bi-text; color: @color-bi-text;
background-color: @color-bi-background-success-button; background-color: @color-bi-background-success-button;
} }
@ -132,7 +133,7 @@ body .bi-button, #body .bi-button {
color: @color-bi-text-warning-ghost-button; color: @color-bi-text-warning-ghost-button;
} }
background-color: transparent; background-color: transparent;
&:hover { &:hover, &:focus {
color: @color-bi-text; color: @color-bi-text;
background-color: @color-bi-background-warning-button; background-color: @color-bi-background-warning-button;
} }
@ -161,7 +162,7 @@ body .bi-button, #body .bi-button {
color: @color-bi-text-error-ghost-button; color: @color-bi-text-error-ghost-button;
} }
background-color: transparent; background-color: transparent;
&:hover { &:hover, &:focus {
color: @color-bi-text; color: @color-bi-text;
background-color: @color-bi-background-error-button; background-color: @color-bi-background-error-button;
} }
@ -208,7 +209,7 @@ body .bi-button, #body .bi-button {
} }
background: transparent !important; background: transparent !important;
border-width: 0 !important; border-width: 0 !important;
&:hover, &:active { &:hover, &:focus, &:active {
.opacity(1); .opacity(1);
} }
} }
@ -285,7 +286,7 @@ body .bi-button, #body .bi-button {
.opacity(0.1); .opacity(0.1);
.transition(@activeStopVal) .transition(@activeStopVal)
} }
&:hover{ &:hover, &:focus {
& .bi-button-mask { & .bi-button-mask {
.opacity(0.1); .opacity(0.1);
background-color: @color-bi-background-hover-button-mask; background-color: @color-bi-background-hover-button-mask;
@ -317,7 +318,7 @@ body .bi-button, #body .bi-button {
.opacity(0.1); .opacity(0.1);
.transition(@activeStopVal) .transition(@activeStopVal)
} }
&:hover { &:hover, &:focus {
&:not(.clear, .ghost) { &:not(.clear, .ghost) {
background-color: @color-bi-background-hover-ignore-button-mask; background-color: @color-bi-background-hover-ignore-button-mask;
} }
@ -333,10 +334,10 @@ body .bi-button, #body .bi-button {
.bi-button, #body .bi-button { .bi-button, #body .bi-button {
&.button-ignore { &.button-ignore {
background-color: @color-bi-background-ignore-button-theme-dark; background-color: @color-bi-background-ignore-button-theme-dark;
&:hover{ &:hover, &:focus {
background-color: @color-bi-background-hover-ignore-button-theme-dark; background-color: @color-bi-background-hover-ignore-button-theme-dark;
} }
&:active{ &:active {
background-color: @color-bi-background-active-ignore-button-theme-dark; background-color: @color-bi-background-active-ignore-button-theme-dark;
} }
&.clear { &.clear {

Loading…
Cancel
Save