bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-button/u-button.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,490 @@
<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";
/**
 * button æŒ‰é’®
 * @description Button æŒ‰é’®
 * @tutorial https://www.uviewui.com/components/button.html
 *
 * @property {Boolean}         hairline            æ˜¯å¦æ˜¾ç¤ºæŒ‰é’®çš„细边框 (默认 true )
 * @property {String}         type               æŒ‰é’®çš„预置样式，info，primary，error，warning，success (默认 'info' )
 * @property {String}         size               æŒ‰é’®å°ºå¯¸ï¼Œlarge，normal，mini ï¼ˆé»˜è®¤ normal）
 * @property {String}         shape               æŒ‰é’®å½¢çŠ¶ï¼Œcircle（两边为半圆），square（带圆角） ï¼ˆé»˜è®¤ 'square' ï¼‰
 * @property {Boolean}         plain               æŒ‰é’®æ˜¯å¦é•‚空，背景色透明 ï¼ˆé»˜è®¤ false）
 * @property {Boolean}         disabled            æ˜¯å¦ç¦ç”¨ ï¼ˆé»˜è®¤ false）
 * @property {Boolean}         loading               æŒ‰é’®åç§°å‰æ˜¯å¦å¸¦ loading å›¾æ ‡(App-nvue å¹³å°ï¼Œåœ¨ ios ä¸Šä¸ºé›ªèŠ±ï¼ŒAndroid上为圆圈) ï¼ˆé»˜è®¤ false）
 * @property {String | Number}   loadingText            åŠ è½½ä¸­æç¤ºæ–‡å­—
 * @property {String}         loadingMode            åŠ è½½çŠ¶æ€å›¾æ ‡ç±»åž‹ ï¼ˆé»˜è®¤ 'spinner' ï¼‰
 * @property {String | Number}   loadingSize            åŠ è½½å›¾æ ‡å¤§å° ï¼ˆé»˜è®¤ 15 ï¼‰
 * @property {String}         openType            å¼€æ”¾èƒ½åŠ›ï¼Œå…·ä½“请看uniapp稳定关于button组件部分说明
 * @property {String}         formType            ç”¨äºŽ <form> ç»„件，点击分别会触发 <form> ç»„件的 submit/reset äº‹ä»¶
 * @property {String}         appParameter         æ‰“å¼€ APP æ—¶ï¼Œå‘ APP ä¼ é€’的参数，open-type=launchApp时有效 ï¼ˆæ³¨ï¼šåªå¾®ä¿¡å°ç¨‹åºã€QQ小程序有效）
 * @property {Boolean}         hoverStopPropagation   æŒ‡å®šæ˜¯å¦é˜»æ­¢æœ¬èŠ‚点的祖先节点出现点击态，微信小程序有效（默认 true ï¼‰
 * @property {String}         lang               æŒ‡å®šè¿”回用户信息的语言，zh_CN ç®€ä½“中文，zh_TW ç¹ä½“中文，en è‹±æ–‡ï¼ˆé»˜è®¤ en ï¼‰
 * @property {String}         sessionFrom            ä¼šè¯æ¥æºï¼ŒopenType="contact"时有效
 * @property {String}         sendMessageTitle      ä¼šè¯å†…消息卡片标题，openType="contact"时有效
 * @property {String}         sendMessagePath         ä¼šè¯å†…消息卡片点击跳转小程序路径，openType="contact"时有效
 * @property {String}         sendMessageImg         ä¼šè¯å†…消息卡片图片，openType="contact"时有效
 * @property {Boolean}         showMessageCard         æ˜¯å¦æ˜¾ç¤ºä¼šè¯å†…消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
 * @property {String}         dataName            é¢å¤–传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
 * @property {String | Number}   throttleTime         èŠ‚流，一定时间内只能触发一次 ï¼ˆé»˜è®¤ 0 )
 * @property {String | Number}   hoverStartTime         æŒ‰ä½åŽå¤šä¹…出现点击态，单位毫秒 ï¼ˆé»˜è®¤ 0 )
 * @property {String | Number}   hoverStayTime         æ‰‹æŒ‡æ¾å¼€åŽç‚¹å‡»æ€ä¿ç•™æ—¶é—´ï¼Œå•ä½æ¯«ç§’ ï¼ˆé»˜è®¤ 200 )
 * @property {String | Number}   text               æŒ‰é’®æ–‡å­—，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
 * @property {String}         icon               æŒ‰é’®å›¾æ ‡
 * @property {String}         iconColor            æŒ‰é’®å›¾æ ‡é¢œè‰²
 * @property {String}         color               æŒ‰é’®é¢œè‰²ï¼Œæ”¯æŒä¼ å…¥linear-gradient渐变色
 * @property {Object}         customStyle            å®šä¹‰éœ€è¦ç”¨åˆ°çš„外部样式
 *
 * @event {Function}   click         éžç¦æ­¢å¹¶ä¸”非加载中，才能点击
 * @event {Function}   getphonenumber   open-type="getPhoneNumber"时有效
 * @event {Function}   getuserinfo      ç”¨æˆ·ç‚¹å‡»è¯¥æŒ‰é’®æ—¶ï¼Œä¼šè¿”回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
 * @event {Function}   error         å½“使用开放能力时，发生错误的回调
 * @event {Function}   opensetting      åœ¨æ‰“开授权设置页并关闭后回调
 * @event {Function}   launchapp      æ‰“å¼€ APP æˆåŠŸçš„回调
 * @example <u-button>月落</u-button>
 */
export default {
    name: "u-button",
    // #ifdef MP
    mixins: [uni.$u.mpMixin, uni.$u.mixin, button, openType, props],
    // #endif
    // #ifndef MP
    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
    // #endif
    data() {
        return {};
    },
    computed: {
        // ç”Ÿæˆbem风格的类名
        bemClass() {
            // this.bem为一个computed变量，在mixin中
            if (!this.color) {
                return this.bem(
                    "button",
                    ["type", "shape", "size"],
                    ["disabled", "plain", "hairline"]
                );
            } else {
                // ç”±äºŽnvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
                return this.bem(
                    "button",
                    ["shape", "size"],
                    ["disabled", "plain", "hairline"]
                );
            }
        },
        loadingColor() {
            if (this.plain) {
                // å¦‚果有设置color值，则用color值，否则使用type主题颜色
                return this.color
                    ? this.color
                    : uni.$u.config.color[`u-${this.type}`];
            }
            if (this.type === "info") {
                return "#c9c9c9";
            }
            return "rgb(200, 200, 200)";
        },
        iconColorCom() {
            // å¦‚果是镂空状态，设置了color就用color值，否则使用主题颜色，
            // u-icon的color能接受一个主题颜色的值
         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) {
                // é’ˆå¯¹è‡ªå®šä¹‰äº†color颜色的情况，镂空状态下，就是用自定义的颜色
                style.color = this.plain ? this.color : "white";
                if (!this.plain) {
                    // éžé•‚空，背景色使用自定义的颜色
                    style["background-color"] = this.color;
                }
                if (this.color.indexOf("gradient") !== -1) {
                    // å¦‚果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
                    // weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
                    // å› ä¸ºweex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
                    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;
        },
        // nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
        nvueTextStyle() {
            let style = {};
            // é’ˆå¯¹è‡ªå®šä¹‰äº†color颜色的情况，镂空状态下，就是用自定义的颜色
            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) {
            // è¿›è¡ŒèŠ‚流控制，每this.throttle毫秒内，只在开始处执行
            uni.$u.throttle(() => {
               this.$emit("click");
            }, this.throttleTime);
            }
        },
        // ä¸‹é¢ä¸ºå¯¹æŽ¥uniapp官方按钮开放能力事件回调的对接
        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";

/* #ifndef APP-NVUE */
@import "./vue.scss";
/* #endif */

/* #ifdef APP-NVUE */
@import "./nvue.scss";
/* #endif */

$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;
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
    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 {
        /* #ifndef APP-NVUE */
        width: $u-button-large-width;
        /* #endif */
        height: $u-button-large-height;
        padding: $u-button-large-padding;
    }

    &--normal {
        padding: $u-button-normal-padding;
        font-size: $u-button-normal-font-size;
    }

    &--small {
        /* #ifndef APP-NVUE */
        min-width: $u-button-small-min-width;
        /* #endif */
        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;
        /* #ifndef APP-NVUE */
        min-width: $u-button-mini-min-width;
        /* #endif */
        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 {
        /* #ifndef APP-NVUE */
        min-width: $u-button-icon-min-width;
        line-height: inherit !important;
        vertical-align: top;
        /* #endif */
    }

    &--plain {
        background-color: $u-button-plain-background-color;
    }

    &--hairline {
        border-width: $u-button-hairline-border-width !important;
    }
}
</style>