realty/virgo.wzfrontend/workark_wx/uni_modules/uv-button/components/uv-button/uv-button.vue

<template>
	<view class="uv-button-wrapper" :style="[btnWrapperStyle]">
		<!-- #ifndef APP-NVUE -->
		<!-- #ifdef MP -->
		<!-- 为了解决微信小程序动态设置hover-class点击态不消失的BUG -->
		<view class="uv-button-wrapper--dis" v-if="disabled || loading"></view>
		<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="onGetPhoneNumber"
			@getuserinfo="onGetUserInfo" @error="onError" @opensetting="onOpenSetting" @launchapp="onLaunchApp"
			@contact="onContact" @chooseavatar="onChooseavatar" @agreeprivacyauthorization="onAgreeprivacyauthorization"
			@addgroupapp="onAddgroupapp" @chooseaddress="onChooseaddress" @subscribe="onSubscribe" @login="onLogin"
			@im="onIm" hover-class="uv-button--active" class="uv-button uv-reset-button"
			:style="[baseColor, $uv.addStyle(customStyle)]" @tap="clickHandler" :class="bemClass">
		<!-- #endif -->
			<!-- #ifndef MP -->
			<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"
				:hover-class="!disabled && !loading ? 'uv-button--active' : ''" class="uv-button uv-reset-button"
				:style="[baseColor, $uv.addStyle(customStyle)]" @tap="clickHandler" :class="bemClass">
			<!-- #endif -->
				<template v-if="loading">
					<uv-loading-icon :mode="loadingMode" :size="loadingSize * 1.15"
						:color="loadingColor"></uv-loading-icon>
					<text class="uv-button__loading-text" :style="[
							{ fontSize: textSize + 'px' },
							$uv.addStyle(customTextStyle)
						]">{{ loadingText || text }}</text>
				</template>
				<template v-else>
					<uv-icon v-if="icon" :name="icon" :color="iconColorCom" :size="getIconSize"
						:customStyle="{ marginRight: '2px' }"></uv-icon>
					<slot>
						<text class="uv-button__text" :style="[
							{ fontSize: textSize + 'px' },
							$uv.addStyle(customTextStyle)
						]">{{ text }}</text>
					</slot>
					<slot name="suffix"></slot>
				</template>
			</button>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<view :hover-start-time="Number(hoverStartTime)" :hover-stay-time="Number(hoverStayTime)" class="uv-button"
				:hover-class="
        !disabled && !loading && !color && (plain || type === 'info')
          ? 'uv-button--active--plain'
          : !disabled && !loading && !plain
          ? 'uv-button--active'
          : ''
      " @tap="clickHandler" :class="bemClass" :style="[baseColor, $uv.addStyle(customStyle)]">
				<template v-if="loading">
					<uv-loading-icon :mode="loadingMode" :size="loadingSize * 1.15"
						:color="loadingColor"></uv-loading-icon>
					<text class="uv-button__loading-text" :style="[nvueTextStyle,$uv.addStyle(customTextStyle)]"
						:class="[plain && `uv-button__text--plain--${type}`]">{{ loadingText || text }}</text>
				</template>
				<template v-else>
					<uv-icon v-if="icon" :name="icon" :color="iconColorCom" :size="getIconSize"></uv-icon>
					<text class="uv-button__text" :style="[
            {
              marginLeft: icon ? '2px' : 0,
            },
            nvueTextStyle,
						$uv.addStyle(customTextStyle)
          ]" :class="[plain && `uv-button__text--plain--${type}`]">{{ text }}</text>
					<slot name="suffix"></slot>
				</template>
			</view>
			<!-- #endif -->
	</view>
</template>

<script>
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import button from '@/uni_modules/uv-ui-tools/libs/mixin/button.js'
	import openType from '@/uni_modules/uv-ui-tools/libs/mixin/openType.js'
	import props from "./props.js";
	/**
	 * button 按钮
	 * @description Button 按钮
	 * @tutorial https://www.uvui.cn/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 <uv-button>月落</uv-button>
	 */
	export default {
		name: "uv-button",
		// #ifdef MP
		mixins: [mpMixin, mixin, button, openType, props],
		// #endif
		// #ifndef MP
		mixins: [mpMixin, mixin, props],
		// #endif
		emits: ['click'],
		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 : '#3c9cff';
				}
				if (this.type === "info") {
					return "#c9c9c9";
				}
				return "rgb(200, 200, 200)";
			},
			iconColorCom() {
				// 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
				// uv-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;
			},
			// 设置图标大小
			getIconSize() {
				const size = this.iconSize ? this.iconSize : this.textSize * 1.35;
				return this.$uv.addUnit(size);
			},
			// 设置外层盒子的宽度，其他样式不需要
			btnWrapperStyle() {
				const style = this.$uv.addStyle(this.customStyle);
				return style;
			}
		},
		methods: {
			clickHandler() {
				// 非禁止并且非加载中，才能点击
				if (!this.disabled && !this.loading) {
					// 进行节流控制，每this.throttle毫秒内，只在开始处执行
					throttle(() => {
						this.$emit("click");
					}, this.throttleTime);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$show-reset-button: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

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

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

	$uv-button-uv-button-height: 40px !default;
	$uv-button-text-font-size: 15px !default;
	$uv-button-loading-text-font-size: 15px !default;
	$uv-button-loading-text-margin-left: 4px !default;
	$uv-button-large-width: 100% !default;
	$uv-button-large-height: 50px !default;
	$uv-button-normal-padding: 0 12px !default;
	$uv-button-large-padding: 0 15px !default;
	$uv-button-normal-font-size: 14px !default;
	$uv-button-small-min-width: 60px !default;
	$uv-button-small-height: 30px !default;
	$uv-button-small-padding: 0px 8px !default;
	$uv-button-mini-padding: 0px 8px !default;
	$uv-button-small-font-size: 12px !default;
	$uv-button-mini-height: 22px !default;
	$uv-button-mini-font-size: 10px !default;
	$uv-button-mini-min-width: 50px !default;
	$uv-button-disabled-opacity: 0.5 !default;
	$uv-button-info-color: #323233 !default;
	$uv-button-info-background-color: #fff !default;
	$uv-button-info-border-color: #ebedf0 !default;
	$uv-button-info-border-width: 1px !default;
	$uv-button-info-border-style: solid !default;
	$uv-button-success-color: #fff !default;
	$uv-button-success-background-color: $uv-success !default;
	$uv-button-success-border-color: $uv-button-success-background-color !default;
	$uv-button-success-border-width: 1px !default;
	$uv-button-success-border-style: solid !default;
	$uv-button-primary-color: #fff !default;
	$uv-button-primary-background-color: $uv-primary !default;
	$uv-button-primary-border-color: $uv-button-primary-background-color !default;
	$uv-button-primary-border-width: 1px !default;
	$uv-button-primary-border-style: solid !default;
	$uv-button-error-color: #fff !default;
	$uv-button-error-background-color: $uv-error !default;
	$uv-button-error-border-color: $uv-button-error-background-color !default;
	$uv-button-error-border-width: 1px !default;
	$uv-button-error-border-style: solid !default;
	$uv-button-warning-color: #fff !default;
	$uv-button-warning-background-color: $uv-warning !default;
	$uv-button-warning-border-color: $uv-button-warning-background-color !default;
	$uv-button-warning-border-width: 1px !default;
	$uv-button-warning-border-style: solid !default;
	$uv-button-block-width: 100% !default;
	$uv-button-circle-border-top-right-radius: 100px !default;
	$uv-button-circle-border-top-left-radius: 100px !default;
	$uv-button-circle-border-bottom-left-radius: 100px !default;
	$uv-button-circle-border-bottom-right-radius: 100px !default;
	$uv-button-square-border-top-right-radius: 3px !default;
	$uv-button-square-border-top-left-radius: 3px !default;
	$uv-button-square-border-bottom-left-radius: 3px !default;
	$uv-button-square-border-bottom-right-radius: 3px !default;
	$uv-button-icon-min-width: 1em !default;
	$uv-button-plain-background-color: #fff !default;
	$uv-button-hairline-border-width: 0.5px !default;

	.uv-button {
		height: $uv-button-uv-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: $uv-button-text-font-size;
		}

		&__loading-text {
			font-size: $uv-button-loading-text-font-size;
			margin-left: $uv-button-loading-text-margin-left;
		}

		&--large {
			/* #ifndef APP-NVUE */
			width: $uv-button-large-width;
			/* #endif */
			height: $uv-button-large-height;
			padding: $uv-button-large-padding;
		}

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

		&--small {
			/* #ifndef APP-NVUE */
			min-width: $uv-button-small-min-width;
			/* #endif */
			height: $uv-button-small-height;
			padding: $uv-button-small-padding;
			font-size: $uv-button-small-font-size;
		}

		&--mini {
			height: $uv-button-mini-height;
			font-size: $uv-button-mini-font-size;
			/* #ifndef APP-NVUE */
			min-width: $uv-button-mini-min-width;
			/* #endif */
			padding: $uv-button-mini-padding;
		}

		&--disabled {
			opacity: $uv-button-disabled-opacity;
		}

		&--info {
			color: $uv-button-info-color;
			background-color: $uv-button-info-background-color;
			border-color: $uv-button-info-border-color;
			border-width: $uv-button-info-border-width;
			border-style: $uv-button-info-border-style;
		}

		&--success {
			color: $uv-button-success-color;
			background-color: $uv-button-success-background-color;
			border-color: $uv-button-success-border-color;
			border-width: $uv-button-success-border-width;
			border-style: $uv-button-success-border-style;
		}

		&--primary {
			color: $uv-button-primary-color;
			background-color: $uv-button-primary-background-color;
			border-color: $uv-button-primary-border-color;
			border-width: $uv-button-primary-border-width;
			border-style: $uv-button-primary-border-style;
		}

		&--error {
			color: $uv-button-error-color;
			background-color: $uv-button-error-background-color;
			border-color: $uv-button-error-border-color;
			border-width: $uv-button-error-border-width;
			border-style: $uv-button-error-border-style;
		}

		&--warning {
			color: $uv-button-warning-color;
			background-color: $uv-button-warning-background-color;
			border-color: $uv-button-warning-border-color;
			border-width: $uv-button-warning-border-width;
			border-style: $uv-button-warning-border-style;
		}

		&--block {
			@include flex;
			width: $uv-button-block-width;
		}

		&--circle {
			border-top-right-radius: $uv-button-circle-border-top-right-radius;
			border-top-left-radius: $uv-button-circle-border-top-left-radius;
			border-bottom-left-radius: $uv-button-circle-border-bottom-left-radius;
			border-bottom-right-radius: $uv-button-circle-border-bottom-right-radius;
		}

		&--square {
			border-bottom-left-radius: $uv-button-square-border-top-right-radius;
			border-bottom-right-radius: $uv-button-square-border-top-left-radius;
			border-top-left-radius: $uv-button-square-border-bottom-left-radius;
			border-top-right-radius: $uv-button-square-border-bottom-right-radius;
		}

		&__icon {
			/* #ifndef APP-NVUE */
			min-width: $uv-button-icon-min-width;
			line-height: inherit !important;
			vertical-align: top;
			/* #endif */
		}

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

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