@tarojs/components
Version:
72 lines (68 loc) • 7.74 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ab3c86da.js';
import { c as classnames } from './index-c3e4004b.js';
const indexCss = ".weui-loading{vertical-align:middle;background:url(\"data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E\") 0 0/100% no-repeat;width:20px;height:20px;-webkit-animation:1s steps(12,end) infinite weuiLoading;animation:1s steps(12,end) infinite weuiLoading;display:inline-block}@-webkit-keyframes weuiLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes weuiLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.weui-btn_loading .weui-loading{margin:-.2em .34em 0 0}.weui-btn_loading.weui-btn_primary,.weui-btn_loading.weui-btn_warn{color:rgba(255,255,255,.6)}.weui-btn_loading.weui-btn_primary{background-color:#179b16}.weui-btn_loading.weui-btn_warn{background-color:#ce3c39}taro-button-core{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;color:#000;-webkit-tap-highlight-color:transparent;background-color:#f8f8f8;border-width:0;border-radius:5px;outline:0;width:100%;margin-left:auto;margin-right:auto;padding-left:14px;padding-right:14px;font-size:18px;line-height:2.55556;text-decoration:none;display:block;position:relative;overflow:hidden}taro-button-core:focus{outline:0}taro-button-core:not([disabled]):active{color:rgba(0,0,0,.6);background-color:#dedede}taro-button-core:after{-webkit-box-sizing:border-box;box-sizing:border-box;content:\" \";-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid rgba(0,0,0,.2);border-radius:10px;width:200%;height:200%;position:absolute;top:0;left:0;-webkit-transform:scale(.5);transform:scale(.5)}taro-button-core+taro-button-core{margin-top:15px}taro-button-core[type=default]{color:#000;background-color:#f8f8f8}taro-button-core[type=default]:not([disabled]):visited{color:#000}taro-button-core[type=default]:not([disabled]):active{color:rgba(0,0,0,.6);background-color:#dedede}taro-button-core[size=mini]{width:auto;padding:0 1.32em;font-size:13px;line-height:2.3;display:inline-block}taro-button-core[plain],taro-button-core[plain][type=default],taro-button-core[plain][type=primary]{background-color:transparent;border-width:1px}taro-button-core[disabled]{color:rgba(255,255,255,.6)}taro-button-core[disabled][type=default]{color:rgba(0,0,0,.3);background-color:#f7f7f7}taro-button-core[disabled][type=primary]{background-color:#9ed99d}taro-button-core[disabled][type=warn]{background-color:#ec8b89}taro-button-core[loading] .weui-loading{margin:-.2em .34em 0 0}taro-button-core[loading][type=primary],taro-button-core[loading][type=warn]{color:rgba(255,255,255,.6)}taro-button-core[loading][type=primary]{background-color:#179b16}taro-button-core[loading][type=warn]{background-color:#ce3c39}taro-button-core[plain][type=primary]{color:#1aad19;border:1px solid #1aad19}taro-button-core[plain][type=primary]:not([disabled]):active{color:rgba(26,173,25,.6);background-color:transparent;border-color:rgba(26,173,25,.6)}taro-button-core[plain][type=primary]:after{border-width:0}taro-button-core[plain][type=warn]{color:#e64340;border:1px solid #e64340}taro-button-core[plain][type=warn]:not([disabled]):active{color:rgba(230,67,64,.6);background-color:transparent;border-color:rgba(230,67,64,.6)}taro-button-core[plain][type=warn]:after{border-width:0}taro-button-core[plain],taro-button-core[plain][type=default]{color:#353535;border:1px solid #353535}taro-button-core[plain]:not([disabled]):active,taro-button-core[plain][type=default]:not([disabled]):active{color:rgba(53,53,53,.6);background-color:transparent;border-color:rgba(53,53,53,.6)}taro-button-core[plain]:after,taro-button-core[plain][type=default]:after{border-width:0}taro-button-core[type=primary]{color:#fff;background-color:#1aad19}taro-button-core[type=primary]:not([disabled]):visited{color:#fff}taro-button-core[type=primary]:not([disabled]):active{color:rgba(255,255,255,.6);background-color:#179b16}taro-button-core[type=warn]{color:#fff;background-color:#e64340}taro-button-core[type=warn]:not([disabled]):visited{color:#fff}taro-button-core[type=warn]:not([disabled]):active{color:rgba(255,255,255,.6);background-color:#ce3c39}taro-button-core[plain][disabled],taro-button-core[plain][disabled][type=primary]{color:rgba(0,0,0,.3);background-color:#f7f7f7;border:1px solid rgba(0,0,0,.2)}";
const Button = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.onSubmit = createEvent(this, "tarobuttonsubmit", 7);
this.onReset = createEvent(this, "tarobuttonreset", 7);
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)));
}
get el() { return getElement(this); }
};
Button.style = indexCss;
export { Button as taro_button_core };