@tarojs/components
Version:
Taro 组件库
297 lines (296 loc) • 6.95 kB
JavaScript
import { h, Host } from '@stencil/core';
import classNames from 'classnames';
export class Button {
constructor() {
this.disabled = undefined;
this.hoverClass = 'button-hover';
this.type = '';
this.hoverStartTime = 20;
this.hoverStayTime = 70;
this.size = undefined;
this.plain = undefined;
this.loading = false;
this.formType = null;
this.hover = false;
this.touch = false;
}
onClick(e) {
if (this.disabled) {
e.stopPropagation();
}
}
onTouchStart() {
if (this.disabled) {
return;
}
this.touch = true;
if (this.hoverClass && !this.disabled) {
setTimeout(() => {
if (this.touch) {
this.hover = true;
}
}, this.hoverStartTime);
}
}
onTouchEnd() {
if (this.disabled) {
return;
}
this.touch = false;
if (this.hoverClass && !this.disabled) {
setTimeout(() => {
if (!this.touch) {
this.hover = false;
}
}, this.hoverStayTime);
}
if (this.formType === 'submit') {
this.onSubmit.emit();
}
else if (this.formType === 'reset') {
this.onReset.emit();
}
}
render() {
const { disabled, hoverClass, type, size, plain, loading, hover } = this;
const cls = classNames({
[`${hoverClass}`]: hover && !disabled
});
return (h(Host, { class: cls, type: type, plain: plain, loading: loading, size: size, disabled: disabled }, loading && h("i", { class: 'weui-loading' }), h("slot", null)));
}
static get is() { return "taro-button-core"; }
static get originalStyleUrls() {
return {
"$": ["./style/index.scss"]
};
}
static get styleUrls() {
return {
"$": ["./style/index.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false
},
"hoverClass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hover-class",
"reflect": false,
"defaultValue": "'button-hover'"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false,
"defaultValue": "''"
},
"hoverStartTime": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hover-start-time",
"reflect": false,
"defaultValue": "20"
},
"hoverStayTime": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hover-stay-time",
"reflect": false,
"defaultValue": "70"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false
},
"plain": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "plain",
"reflect": false
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "loading",
"reflect": false,
"defaultValue": "false"
},
"formType": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'submit' | 'reset' | null",
"resolved": "\"reset\" | \"submit\" | null",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "form-type",
"reflect": true,
"defaultValue": "null"
}
};
}
static get states() {
return {
"hover": {},
"touch": {}
};
}
static get events() {
return [{
"method": "onSubmit",
"name": "tarobuttonsubmit",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "onReset",
"name": "tarobuttonreset",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "click",
"method": "onClick",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "touchstart",
"method": "onTouchStart",
"target": undefined,
"capture": false,
"passive": true
}, {
"name": "touchend",
"method": "onTouchEnd",
"target": undefined,
"capture": false,
"passive": true
}];
}
}