uview-ultra-plus 1.0.0

package/uview-ultra/components/up-button/up-button.uvue

@@ -0,0 +1,609 @@
+<template>
+	<view style="position: relative"
+		:style="[baseColor, $upAddStyle(customStyle)]"
+		class="up-button"
+		:hover-class="!disabled && !loading ? 'up-button--active' : ''"
+		:class="bemClass">
+		<template v-if="loading">
+		    <up-loading-icon
+		        :mode="loadingMode"
+		        :size="$up.addUnit(loadingSize * 1.15)"
+		        :color="loadingColor"
+		    ></up-loading-icon>
+		    <text
+		        class="up-button__text up-button__loading-text"
+		        :style="[{ fontSize: textSize + 'px' }]"
+		        >{{ loadingText != '' ? loadingText : text }}</text
+		    >
+		</template>
+		<template v-else>
+		    <up-icon
+		        v-if="icon != ''"
+		        :name="icon"
+		        :color="iconColorCom"
+		        :size="$up.addUnit(parseInt($up.getPx(textSize)) * 1.35)"
+		        :customStyle="{ marginRight: '2px' }"
+		    ></up-icon>
+		    <slot>
+		        <text
+		            class="up-button__text"
+		            :style="[{ fontSize: textSize + 'px'}]"
+		            >
+		            {{ text }}
+		        </text>
+		    </slot>
+		</template>
+		<button
+			:hover-start-time="hoverStartTime"
+			:hover-stay-time="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"
+			:loading="loading"
+			:hover-class="!disabled && !loading ? 'up-button__button--active' : ''"
+			style="background: #fff;position: absolute;top:0;bottom:0;left:0;right:0;opacity: 0;"
+			class="up-reset-button"
+			@click="clickHandler"
+		>
+		</button>
+	</view>
+</template>
+
+<script setup lang="uts">
+import defProps from './button'
+import { computed } from 'vue'
+import { addStyle, addUnit, getPx, bem } from '../../libs/function/index'
+import { throttle } from '../../libs/function/throttle'
+import config from '../../libs/config/config'
+const props = defineProps({
+    // 是否显示按钮的细边框
+    hairline: {
+        type: Boolean,
+        default: () => defProps.getBoolean('button.hairline')
+    },
+    // 按钮的预置样式，info，primary，error，warning，success
+    type: {
+        type: String,
+        default: () => defProps.getString('button.type')
+    },
+    // 按钮尺寸，large，normal，mini
+    size: {
+        type: String,
+        default: () => defProps.getString('button.size')
+    },
+    // 按钮形状，circle（两边为半圆），square（带圆角）
+    shape: {
+        type: String,
+        default: () => defProps.getString('button.shape')
+    },
+    // 按钮是否镂空，背景色透明
+    plain: {
+        type: Boolean,
+        default: () => defProps.getBoolean('button.plain')
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: () => defProps.getBoolean('button.disabled')
+    },
+    // 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
+    loading: {
+        type: Boolean,
+        default: () => defProps.getBoolean('button.loading')
+    },
+    // 加载中提示文字
+    loadingText: {
+        type: String,
+        default: () => defProps.getString('button.loadingText')
+    },
+    // 加载状态图标类型
+    loadingMode: {
+        type: String,
+        default: () => defProps.getString('button.loadingMode')
+    },
+    // 加载图标大小
+    loadingSize: {
+        type: Number,
+        default: () => defProps.getNumber('button.loadingSize')
+    },
+    // 开放能力，具体请看uniapp稳定关于button组件部分说明
+    openType: {
+        type: String,
+        default: () => defProps.getString('button.openType')
+    },
+    // 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+    formType: {
+        type: String,
+        default: () => defProps.getString('button.formType')
+    },
+    // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+    appParameter: {
+        type: String,
+        default: () => defProps.getString('button.appParameter')
+    },
+    // 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+    hoverStopPropagation: {
+        type: Boolean,
+        default: () => defProps.getBoolean('button.hoverStopPropagation')
+    },
+    // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
+    lang: {
+        type: String,
+        default: () => defProps.getString('button.lang')
+    },
+    // 会话来源，openType="contact"时有效
+    sessionFrom: {
+        type: String,
+        default: () => defProps.getString('button.sessionFrom')
+    },
+    // 会话内消息卡片标题，openType="contact"时有效
+    sendMessageTitle: {
+        type: String,
+        default: () => defProps.getString('button.sendMessageTitle')
+    },
+    // 会话内消息卡片点击跳转小程序路径，openType="contact"时有效
+    sendMessagePath: {
+        type: String,
+        default: () => defProps.getString('button.sendMessagePath')
+    },
+    // 会话内消息卡片图片，openType="contact"时有效
+    sendMessageImg: {
+        type: String,
+        default: () => defProps.getString('button.sendMessageImg')
+    },
+    // 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效
+    showMessageCard: {
+        type: Boolean,
+        default: () => defProps.getBoolean('button.showMessageCard')
+    },
+    // 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+    dataName: {
+        type: String,
+        default: () => defProps.getString('button.dataName')
+    },
+    // 节流，一定时间内只能触发一次
+    throttleTime: {
+        type: [String, Number],
+        default: () => defProps.getNumber('button.throttleTime')
+    },
+    // 按住后多久出现点击态，单位毫秒
+    hoverStartTime: {
+        type: [String, Number],
+        default: () => defProps.getNumber('button.hoverStartTime')
+    },
+    // 手指松开后点击态保留时间，单位毫秒
+    hoverStayTime: {
+        type: [String, Number],
+        default: () => defProps.getNumber('button.hoverStayTime')
+    },
+    // 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
+    text: {
+        type: [String, Number],
+        default: () => defProps.getString('button.text')
+    },
+    // 按钮图标
+    icon: {
+        type: String,
+        default: () => defProps.getString('button.icon')
+    },
+    // 按钮图标颜色
+    iconColor: {
+        type: String,
+        default: () => defProps.getString('button.iconColor')
+    },
+    // 按钮颜色，支持传入linear-gradient渐变色
+    color: {
+        type: String,
+        default: () => defProps.getString('button.color')
+    }
+})
+
+const emit = defineEmits(['click', 'getphonenumber', 'getuserinfo', 'error', 'opensetting', 'launchapp'])
+
+// 生成bem风格的类名
+const bemClass = computed(() => {
+    let ret = ""
+    if (props.color == '') {
+        ret = bem(
+            "button",
+            [props.type, props.shape, props.size] ,
+            [
+                ["disabled", props.disabled],
+                ["plain", props.plain],
+                ["hairline", props.hairline],
+            ]
+        );
+    } else {
+        // 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
+        ret = bem(
+            "button",
+            [props.shape, props.size] ,
+            [
+                ["disabled", props.disabled],
+                ["plain", props.plain],
+                ["hairline", props.hairline],
+            ]
+        );
+    }
+    return ret
+});
+
+const loadingColor = computed(() => {
+    if (props.plain) {
+        // 如果有设置color值，则用color值，否则使用type主题颜色
+        return props.color != ''
+            ? props.color
+            : config.getString(`color.up-${props.type}`) as string;
+    }
+    if (props.type == "info") {
+        return "#c9c9c9";
+    }
+    return "rgb(200, 200, 200)";
+});
+
+const iconColorCom = computed(() => {
+    // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
+    // up-icon的color能接受一个主题颜色的值
+    if (props.iconColor != '') return props.iconColor;
+    if (props.plain) {
+        return props.color != '' ? props.color : props.type;
+    } else {
+        return "";
+    }
+});
+
+const baseColor = computed(() => {
+    let style = {
+    } as UTSJSONObject;
+    // if (props.color != '') {
+        // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+        // style['color'] = props.plain ? props.color : "white";
+        if (!props.plain) {
+            // 非镂空，背景色使用自定义的颜色
+            style["backgroundColor"] = props.color;
+        }
+        if ((props.color.toString()).indexOf("gradient") != -1) {
+            // 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
+            // weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
+            // 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
+            style['borderWidth'] = 0;
+            if (!props.plain) {
+                style['backgroundImage'] = props.color;
+            }
+        } else {
+            // 非渐变色，则设置边框相关的属性
+            style['borderColor'] = props.color;
+            style['borderWidth'] = "1px";
+            style['borderStyle'] = "solid";
+        }
+    // }
+    return style;
+});
+
+// 字体大小
+const textSize = computed(() => {
+    let fontSize = '14px';
+    if (props.size === "large") fontSize = '16px';
+    if (props.size === "normal") fontSize = '14px';
+    if (props.size === "small") fontSize = '12px';
+    if (props.size === "mini") fontSize = '10px';
+    return fontSize;
+});
+
+const clickHandler = (): void => {
+    // 非禁止并且非加载中，才能点击
+    if (!props.disabled && !props.loading) {
+        // 进行节流控制，每throttle毫秒内，只在开始处执行
+        throttle(() => {
+            emit("click")
+        }, parseInt(props.throttleTime.toString()))
+    } else {
+        console.log('禁止点击')
+    }
+};
+
+// 对接uniapp官方按钮开放能力事件回调
+const getphonenumber = (res: UniEvent): void => {
+    emit("getphonenumber", res)
+};
+
+const getuserinfo = (res: UniEvent): void => {
+    emit("getuserinfo", res)
+};
+
+const error = (res: UniEvent): void => {
+    emit("error", res)
+};
+
+const opensetting = (res: UniEvent): void => {
+    emit("opensetting", res)
+};
+
+const launchapp = (res: UniEvent): void => {
+    emit("launchapp", res)
+};
+</script>
+
+<style lang="scss" scoped>
+$up-button-up-button-height: 40px !default;
+$up-button-text-font-size: 15px !default;
+$up-button-loading-text-font-size: 15px !default;
+$up-button-loading-text-margin-left: 4px !default;
+$up-button-large-width: 100% !default;
+$up-button-large-height: 50px !default;
+$up-button-normal-padding: 0 12px !default;
+$up-button-large-padding: 0 15px !default;
+$up-button-normal-font-size: 14px !default;
+$up-button-small-min-width: 60px !default;
+$up-button-small-height: 30px !default;
+$up-button-small-padding: 0px 8px !default;
+$up-button-mini-padding: 0px 8px !default;
+$up-button-small-font-size: 12px !default;
+$up-button-mini-height: 22px !default;
+$up-button-mini-font-size: 10px !default;
+$up-button-mini-min-width: 50px !default;
+$up-button-disabled-opacity: 0.5 !default;
+$up-button-info-color: #323233 !default;
+$up-button-info-background-color: #fff !default;
+$up-button-info-border-color: #ebedf0 !default;
+$up-button-info-border-width: 1px !default;
+$up-button-info-border-style: solid !default;
+$up-button-success-color: #fff !default;
+$up-button-success-background-color: $up-success !default;
+$up-button-success-border-color: $up-button-success-background-color !default;
+$up-button-success-border-width: 1px !default;
+$up-button-success-border-style: solid !default;
+$up-button-primary-color: #fff !default;
+$up-button-primary-background-color: $up-primary !default;
+$up-button-primary-border-color: $up-button-primary-background-color !default;
+$up-button-primary-border-width: 1px !default;
+$up-button-primary-border-style: solid !default;
+$up-button-error-color: #fff !default;
+$up-button-error-background-color: $up-error !default;
+$up-button-error-border-color: $up-button-error-background-color !default;
+$up-button-error-border-width: 1px !default;
+$up-button-error-border-style: solid !default;
+$up-button-warning-color: #fff !default;
+$up-button-warning-background-color: $up-warning !default;
+$up-button-warning-border-color: $up-button-warning-background-color !default;
+$up-button-warning-border-width: 1px !default;
+$up-button-warning-border-style: solid !default;
+$up-button-block-width: 100% !default;
+$up-button-circle-border-top-right-radius: 100px !default;
+$up-button-circle-border-top-left-radius: 100px !default;
+$up-button-circle-border-bottom-left-radius: 100px !default;
+$up-button-circle-border-bottom-right-radius: 100px !default;
+$up-button-square-border-top-right-radius: 3px !default;
+$up-button-square-border-top-left-radius: 3px !default;
+$up-button-square-border-bottom-left-radius: 3px !default;
+$up-button-square-border-bottom-right-radius: 3px !default;
+$up-button-icon-min-width: 4px !default;
+$up-button-plain-background-color: #fff !default;
+$up-button-hairline-border-width: 0.5px !default;
+$up-button-active-opacity:0.75 !default;
+$up-button-before-top:50% !default;
+$up-button-before-left:50% !default;
+$up-button-before-width:100% !default;
+$up-button-before-height:100% !default;
+$up-button-before-transform:translate(-50%, -50%) !default;
+$up-button-before-opacity:0 !default;
+$up-button-before-background-color:#000 !default;
+$up-button-before-border-color:#000 !default;
+$up-button-active-before-opacity:.15 !default;
+$up-button-icon-margin-left:4px !default;
+$up-button-plain-up-button-info-color:#000000 !default;
+$up-button-plain-up-button-success-color:$up-success !default;
+$up-button-plain-up-button-error-color:$up-error !default;
+$up-button-plain-up-button-warning-color:$up-error !default;
+
+.up-button {
+    height: $up-button-up-button-height;
+    position: relative;
+	box-sizing: border-box;
+	@include flex;
+	align-items: center;
+	justify-content: center;
+
+	&__text {
+		font-size: $up-button-text-font-size;
+		color: #fff;
+	}
+	
+	&__loading-text {
+		font-size: $up-button-loading-text-font-size;
+		margin-left: $up-button-loading-text-margin-left;
+	}
+	
+	&--large {
+		width: $up-button-large-width;
+		height: $up-button-large-height;
+		padding: $up-button-large-padding;
+	}
+	
+	&--normal {
+		padding: $up-button-normal-padding;
+		.up-button__text {
+			font-size: $up-button-normal-font-size;
+		}
+	}
+	
+	&--small {
+		min-width: $up-button-small-min-width;
+		height: $up-button-small-height;
+		padding: $up-button-small-padding;
+		.up-button__text {
+			font-size: $up-button-small-font-size;
+		}
+	}
+	
+	&--mini {
+		height: $up-button-mini-height;
+		.up-button__text {
+			font-size: $up-button-mini-font-size;
+		}
+		min-width: $up-button-mini-min-width;
+		padding: $up-button-mini-padding;
+	}
+	
+	&--disabled {
+		opacity: $up-button-disabled-opacity;
+	}
+	
+	&--active {
+		opacity: $up-button-active-opacity;
+	}
+	
+	&--info {
+		.up-button__text {
+			color: $up-button-info-color;
+		}
+		background-color: $up-button-info-background-color !important;
+		border-color: $up-button-info-border-color !important;
+		border-width: $up-button-info-border-width !important;
+		border-style: $up-button-info-border-style !important;
+	}
+	
+	&--success {
+		.up-button__text {
+			color: $up-button-success-color;
+		}
+		background-color: $up-button-success-background-color !important;
+		border-color: $up-button-success-border-color !important;
+		border-width: $up-button-success-border-width !important;
+		border-style: $up-button-success-border-style !important;
+	}
+	
+	&--primary {
+		.up-button__text {
+			color: $up-button-primary-color;
+		}
+		background-color: $up-button-primary-background-color !important;
+		border-color: $up-button-primary-border-color !important;
+		border-width: $up-button-primary-border-width !important;
+		border-style: $up-button-primary-border-style !important;
+	}
+	
+	&--error {
+		.up-button__text {
+			color: $up-button-error-color;
+		}
+		background-color: $up-button-error-background-color !important;
+		border-color: $up-button-error-border-color !important;
+		border-width: $up-button-error-border-width !important;
+		border-style: $up-button-error-border-style !important;
+	}
+	
+	&--warning {
+		.up-button__text {
+			color: $up-button-warning-color;
+		}
+		background-color: $up-button-warning-background-color !important;
+		border-color: $up-button-warning-border-color !important;
+		border-width: $up-button-warning-border-width !important;
+		border-style: $up-button-warning-border-style !important;
+	}
+	
+	&--block {
+		@include flex;
+		width: $up-button-block-width;
+	}
+	
+	&--circle {
+		border-top-right-radius: $up-button-circle-border-top-right-radius;
+		border-top-left-radius: $up-button-circle-border-top-left-radius;
+		border-bottom-left-radius: $up-button-circle-border-bottom-left-radius;
+		border-bottom-right-radius: $up-button-circle-border-bottom-right-radius;
+	}
+	
+	&--square {
+		border-bottom-left-radius: $up-button-square-border-top-right-radius;
+		border-bottom-right-radius: $up-button-square-border-top-left-radius;
+		border-top-left-radius: $up-button-square-border-bottom-left-radius;
+		border-top-right-radius: $up-button-square-border-bottom-right-radius;
+	}
+	
+	&__icon {
+		min-width: $up-button-icon-min-width;
+		// line-height: inherit !important;
+		// vertical-align: top;
+	}
+	
+	&--plain {
+		background-color: $up-button-plain-background-color !important;
+		&.up-button--primary {
+			.up-button__text {
+				color: $up-primary;
+			}
+		}
+		&.up-button--info {
+			.up-button__text {
+				color:$up-button-plain-up-button-info-color;
+			}
+		}
+		&.up-button--success {
+			.up-button__text {
+				color:$up-button-plain-up-button-success-color;
+			}
+		}
+		&.up-button--error {
+			.up-button__text {
+				color:$up-button-plain-up-button-error-color;
+			}
+		}
+		&.up-button--warning {
+			.up-button__text {
+				color:$up-button-plain-up-button-warning-color;
+			}
+		}
+	}
+	
+	&--hairline {
+		border-width: $up-button-hairline-border-width !important;
+	}
+	
+	&:before {
+		position: absolute;
+		top:$up-button-before-top;
+		left:$up-button-before-left;
+		width:$up-button-before-width;
+		height:$up-button-before-height;
+		/* #ifndef UNI-APP-X */
+		border: inherit;
+		border-radius: inherit;
+		/* #endif */
+		transform:$up-button-before-transform;
+		opacity:$up-button-before-opacity;
+		// content: " ";
+		background-color:$up-button-before-background-color !important;
+		border-color:$up-button-before-border-color !important;
+	}
+	
+	&__button--active {
+		opacity: .2 !important;
+		&:before {
+			opacity: .15
+		}
+	}
+	
+	/* #ifndef UNI-APP-X */
+	&__icon+&__text:not(:empty),
+	/* #endif */
+	&__loading-text {
+		margin-left:$up-button-icon-margin-left;
+	}
+}
+
+</style>