123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490 |
- <template>
- <!-- #ifndef APP-NVUE -->
- <button
- :hover-start-time="Number(hoverStartTime)"
- :hover-stay-time="Number(hoverStayTime)"
- :form-type="formType"
- :open-type="openType"
- :app-parameter="appParameter"
- :hover-stop-propagation="hoverStopPropagation"
- :send-message-title="sendMessageTitle"
- :send-message-path="sendMessagePath"
- :lang="lang"
- :data-name="dataName"
- :session-from="sessionFrom"
- :send-message-img="sendMessageImg"
- :show-message-card="showMessageCard"
- @getphonenumber="getphonenumber"
- @getuserinfo="getuserinfo"
- @error="error"
- @opensetting="opensetting"
- @launchapp="launchapp"
- :hover-class="!disabled && !loading ? 'u-button--active' : ''"
- class="u-button u-reset-button"
- :style="[baseColor, $u.addStyle(customStyle)]"
- @tap="clickHandler"
- :class="bemClass"
- >
- <template v-if="loading">
- <u-loading-icon
- :mode="loadingMode"
- :size="loadingSize * 1.15"
- :color="loadingColor"
- ></u-loading-icon>
- <text
- class="u-button__loading-text"
- :style="[{ fontSize: textSize + 'px' }]"
- >{{ loadingText || text }}</text
- >
- </template>
- <template v-else>
- <u-icon
- v-if="icon"
- :name="icon"
- :color="iconColorCom"
- :size="textSize * 1.35"
- :customStyle="{ marginRight: '2px' }"
- ></u-icon>
- <slot>
- <text
- class="u-button__text"
- :style="[{ fontSize: textSize + 'px' }]"
- >{{ text }}</text
- >
- </slot>
- </template>
- </button>
- <!-- #endif -->
- <!-- #ifdef APP-NVUE -->
- <view
- :hover-start-time="Number(hoverStartTime)"
- :hover-stay-time="Number(hoverStayTime)"
- class="u-button"
- :hover-class="
- !disabled && !loading && !color && (plain || type === 'info')
- ? 'u-button--active--plain'
- : !disabled && !loading && !plain
- ? 'u-button--active'
- : ''
- "
- @tap="clickHandler"
- :class="bemClass"
- :style="[baseColor, $u.addStyle(customStyle)]"
- >
- <template v-if="loading">
- <u-loading-icon
- :mode="loadingMode"
- :size="loadingSize * 1.15"
- :color="loadingColor"
- ></u-loading-icon>
- <text
- class="u-button__loading-text"
- :style="[nvueTextStyle]"
- :class="[plain && `u-button__text--plain--${type}`]"
- >{{ loadingText || text }}</text
- >
- </template>
- <template v-else>
- <u-icon
- v-if="icon"
- :name="icon"
- :color="iconColorCom"
- :size="textSize * 1.35"
- ></u-icon>
- <text
- class="u-button__text"
- :style="[
- {
- marginLeft: icon ? '2px' : 0,
- },
- nvueTextStyle,
- ]"
- :class="[plain && `u-button__text--plain--${type}`]"
- >{{ text }}</text
- >
- </template>
- </view>
- <!-- #endif -->
- </template>
- <script>
- import button from "../../libs/mixin/button.js";
- import openType from "../../libs/mixin/openType.js";
- import props from "./props.js";
- export default {
- name: "u-button",
-
- mixins: [uni.$u.mpMixin, uni.$u.mixin, button, openType, props],
-
-
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
-
- data() {
- return {};
- },
- computed: {
-
- bemClass() {
-
- if (!this.color) {
- return this.bem(
- "button",
- ["type", "shape", "size"],
- ["disabled", "plain", "hairline"]
- );
- } else {
-
- return this.bem(
- "button",
- ["shape", "size"],
- ["disabled", "plain", "hairline"]
- );
- }
- },
- loadingColor() {
- if (this.plain) {
-
- return this.color
- ? this.color
- : uni.$u.config.color[`u-${this.type}`];
- }
- if (this.type === "info") {
- return "#c9c9c9";
- }
- return "rgb(200, 200, 200)";
- },
- iconColorCom() {
-
-
- if (this.iconColor) return this.iconColor;
- if (this.plain) {
- return this.color ? this.color : this.type;
- } else {
- return this.type === "info" ? "#000000" : "#ffffff";
- }
- },
- baseColor() {
- let style = {};
- if (this.color) {
-
- style.color = this.plain ? this.color : "white";
- if (!this.plain) {
-
- style["background-color"] = this.color;
- }
- if (this.color.indexOf("gradient") !== -1) {
-
-
-
- style.borderTopWidth = 0;
- style.borderRightWidth = 0;
- style.borderBottomWidth = 0;
- style.borderLeftWidth = 0;
- if (!this.plain) {
- style.backgroundImage = this.color;
- }
- } else {
-
- style.borderColor = this.color;
- style.borderWidth = "1px";
- style.borderStyle = "solid";
- }
- }
- return style;
- },
-
- nvueTextStyle() {
- let style = {};
-
- if (this.type === "info") {
- style.color = "#323233";
- }
- if (this.color) {
- style.color = this.plain ? this.color : "white";
- }
- style.fontSize = this.textSize + "px";
- return style;
- },
-
- textSize() {
- let fontSize = 14,
- { size } = this;
- if (size === "large") fontSize = 16;
- if (size === "normal") fontSize = 14;
- if (size === "small") fontSize = 12;
- if (size === "mini") fontSize = 10;
- return fontSize;
- },
- },
- methods: {
- clickHandler() {
-
- if (!this.disabled && !this.loading) {
-
- uni.$u.throttle(() => {
- this.$emit("click");
- }, this.throttleTime);
- }
- },
-
- getphonenumber(res) {
- this.$emit("getphonenumber", res);
- },
- getuserinfo(res) {
- this.$emit("getuserinfo", res);
- },
- error(res) {
- this.$emit("error", res);
- },
- opensetting(res) {
- this.$emit("opensetting", res);
- },
- launchapp(res) {
- this.$emit("launchapp", res);
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- @import "./vue.scss";
- @import "./nvue.scss";
- $u-button-u-button-height: 40px !default;
- $u-button-text-font-size: 15px !default;
- $u-button-loading-text-font-size: 15px !default;
- $u-button-loading-text-margin-left: 4px !default;
- $u-button-large-width: 100% !default;
- $u-button-large-height: 50px !default;
- $u-button-normal-padding: 0 12px !default;
- $u-button-large-padding: 0 15px !default;
- $u-button-normal-font-size: 14px !default;
- $u-button-small-min-width: 60px !default;
- $u-button-small-height: 30px !default;
- $u-button-small-padding: 0px 8px !default;
- $u-button-mini-padding: 0px 8px !default;
- $u-button-small-font-size: 12px !default;
- $u-button-mini-height: 22px !default;
- $u-button-mini-font-size: 10px !default;
- $u-button-mini-min-width: 50px !default;
- $u-button-disabled-opacity: 0.5 !default;
- $u-button-info-color: #323233 !default;
- $u-button-info-background-color: #fff !default;
- $u-button-info-border-color: #ebedf0 !default;
- $u-button-info-border-width: 1px !default;
- $u-button-info-border-style: solid !default;
- $u-button-success-color: #fff !default;
- $u-button-success-background-color: $u-success !default;
- $u-button-success-border-color: $u-button-success-background-color !default;
- $u-button-success-border-width: 1px !default;
- $u-button-success-border-style: solid !default;
- $u-button-primary-color: #fff !default;
- $u-button-primary-background-color: $u-primary !default;
- $u-button-primary-border-color: $u-button-primary-background-color !default;
- $u-button-primary-border-width: 1px !default;
- $u-button-primary-border-style: solid !default;
- $u-button-error-color: #fff !default;
- $u-button-error-background-color: $u-error !default;
- $u-button-error-border-color: $u-button-error-background-color !default;
- $u-button-error-border-width: 1px !default;
- $u-button-error-border-style: solid !default;
- $u-button-warning-color: #fff !default;
- $u-button-warning-background-color: $u-warning !default;
- $u-button-warning-border-color: $u-button-warning-background-color !default;
- $u-button-warning-border-width: 1px !default;
- $u-button-warning-border-style: solid !default;
- $u-button-block-width: 100% !default;
- $u-button-circle-border-top-right-radius: 100px !default;
- $u-button-circle-border-top-left-radius: 100px !default;
- $u-button-circle-border-bottom-left-radius: 100px !default;
- $u-button-circle-border-bottom-right-radius: 100px !default;
- $u-button-square-border-top-right-radius: 3px !default;
- $u-button-square-border-top-left-radius: 3px !default;
- $u-button-square-border-bottom-left-radius: 3px !default;
- $u-button-square-border-bottom-right-radius: 3px !default;
- $u-button-icon-min-width: 1em !default;
- $u-button-plain-background-color: #fff !default;
- $u-button-hairline-border-width: 0.5px !default;
- .u-button {
- height: $u-button-u-button-height;
- position: relative;
- align-items: center;
- justify-content: center;
- @include flex;
-
- box-sizing: border-box;
-
- flex-direction: row;
- &__text {
- font-size: $u-button-text-font-size;
- }
- &__loading-text {
- font-size: $u-button-loading-text-font-size;
- margin-left: $u-button-loading-text-margin-left;
- }
- &--large {
-
- width: $u-button-large-width;
-
- height: $u-button-large-height;
- padding: $u-button-large-padding;
- }
- &--normal {
- padding: $u-button-normal-padding;
- font-size: $u-button-normal-font-size;
- }
- &--small {
-
- min-width: $u-button-small-min-width;
-
- height: $u-button-small-height;
- padding: $u-button-small-padding;
- font-size: $u-button-small-font-size;
- }
- &--mini {
- height: $u-button-mini-height;
- font-size: $u-button-mini-font-size;
-
- min-width: $u-button-mini-min-width;
-
- padding: $u-button-mini-padding;
- }
- &--disabled {
- opacity: $u-button-disabled-opacity;
- }
- &--info {
- color: $u-button-info-color;
- background-color: $u-button-info-background-color;
- border-color: $u-button-info-border-color;
- border-width: $u-button-info-border-width;
- border-style: $u-button-info-border-style;
- }
- &--success {
- color: $u-button-success-color;
- background-color: $u-button-success-background-color;
- border-color: $u-button-success-border-color;
- border-width: $u-button-success-border-width;
- border-style: $u-button-success-border-style;
- }
- &--primary {
- color: $u-button-primary-color;
- background-color: $u-button-primary-background-color;
- border-color: $u-button-primary-border-color;
- border-width: $u-button-primary-border-width;
- border-style: $u-button-primary-border-style;
- }
- &--error {
- color: $u-button-error-color;
- background-color: $u-button-error-background-color;
- border-color: $u-button-error-border-color;
- border-width: $u-button-error-border-width;
- border-style: $u-button-error-border-style;
- }
- &--warning {
- color: $u-button-warning-color;
- background-color: $u-button-warning-background-color;
- border-color: $u-button-warning-border-color;
- border-width: $u-button-warning-border-width;
- border-style: $u-button-warning-border-style;
- }
- &--block {
- @include flex;
- width: $u-button-block-width;
- }
- &--circle {
- border-top-right-radius: $u-button-circle-border-top-right-radius;
- border-top-left-radius: $u-button-circle-border-top-left-radius;
- border-bottom-left-radius: $u-button-circle-border-bottom-left-radius;
- border-bottom-right-radius: $u-button-circle-border-bottom-right-radius;
- }
- &--square {
- border-bottom-left-radius: $u-button-square-border-top-right-radius;
- border-bottom-right-radius: $u-button-square-border-top-left-radius;
- border-top-left-radius: $u-button-square-border-bottom-left-radius;
- border-top-right-radius: $u-button-square-border-bottom-right-radius;
- }
- &__icon {
-
- min-width: $u-button-icon-min-width;
- line-height: inherit !important;
- vertical-align: top;
-
- }
- &--plain {
- background-color: $u-button-plain-background-color;
- }
- &--hairline {
- border-width: $u-button-hairline-border-width !important;
- }
- }
- </style>
|