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, {
_baseCls: (conf._baseCls || "") + " bi-basic-button" + (conf.invalid ? "" : " cursor-pointer") + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""),
// el: {} // 可以通过el来创建button元素
attributes: {
tabIndex: 1
},
value: "",
stopEvent: false,
stopPropagation: false,
@ -204,6 +207,12 @@ BI.BasicButton = BI.inherit(BI.Single, {
});
}
hand.click(clk);
// enter键等同于点击
hand.keyup(function (e) {
if (e.keyCode === BI.KeyCode.ENTER) {
clk(e);
}
});
break;
}
});
@ -403,8 +412,10 @@ BI.BasicButton = BI.inherit(BI.Single, {
BI.BasicButton.superclass._setEnable.apply(this, arguments);
if (enable === true) {
this.element.removeClass("base-disabled disabled");
this.element.attr("tabIndex", 1);
} else if (enable === false) {
this.element.addClass("base-disabled disabled");
this.element.removeAttr("tabIndex");
}
if (!enable) {
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(2px);
outline: 0;
border: 1px solid @color-bi-border-button;
background-color: @color-bi-background-button;
.box-sizing(border-box);
@ -22,7 +23,7 @@ body .bi-button, #body .bi-button {
font-size: inherit;
border-width: 0;
background-color: transparent;
&:hover {
&:hover, &:focus {
.opacity(0.8);
}
&:active {
@ -47,7 +48,7 @@ body .bi-button, #body .bi-button {
&, & .b-font:before {
color: @color-bi-text-common-ghost-button;
}
&:hover {
&:hover, &:focus {
color: @color-bi-text;
background-color: @color-bi-background-hover-common-ghost-button;
}
@ -73,7 +74,7 @@ body .bi-button, #body .bi-button {
border-width: 0;
}
&.ghost {
&:hover {
&:hover, &:focus {
border-color: @color-bi-border-ignore-button;
&, & .b-font:before {
color: @color-bi-text-ignore-button;
@ -103,7 +104,7 @@ body .bi-button, #body .bi-button {
color: @color-bi-text-success-ghost-button;
}
background-color: transparent;
&:hover {
&:hover, &:focus {
color: @color-bi-text;
background-color: @color-bi-background-success-button;
}
@ -132,7 +133,7 @@ body .bi-button, #body .bi-button {
color: @color-bi-text-warning-ghost-button;
}
background-color: transparent;
&:hover {
&:hover, &:focus {
color: @color-bi-text;
background-color: @color-bi-background-warning-button;
}
@ -161,7 +162,7 @@ body .bi-button, #body .bi-button {
color: @color-bi-text-error-ghost-button;
}
background-color: transparent;
&:hover {
&:hover, &:focus {
color: @color-bi-text;
background-color: @color-bi-background-error-button;
}
@ -208,7 +209,7 @@ body .bi-button, #body .bi-button {
}
background: transparent !important;
border-width: 0 !important;
&:hover, &:active {
&:hover, &:focus, &:active {
.opacity(1);
}
}
@ -285,7 +286,7 @@ body .bi-button, #body .bi-button {
.opacity(0.1);
.transition(@activeStopVal)
}
&:hover{
&:hover, &:focus {
& .bi-button-mask {
.opacity(0.1);
background-color: @color-bi-background-hover-button-mask;
@ -317,7 +318,7 @@ body .bi-button, #body .bi-button {
.opacity(0.1);
.transition(@activeStopVal)
}
&:hover {
&:hover, &:focus {
&:not(.clear, .ghost) {
background-color: @color-bi-background-hover-ignore-button-mask;
}
@ -333,10 +334,10 @@ body .bi-button, #body .bi-button {
.bi-button, #body .bi-button {
&.button-ignore {
background-color: @color-bi-background-ignore-button-theme-dark;
&:hover{
&:hover, &:focus {
background-color: @color-bi-background-hover-ignore-button-theme-dark;
}
&:active{
&:active {
background-color: @color-bi-background-active-ignore-button-theme-dark;
}
&.clear {

Loading…
Cancel
Save