版本发布
This commit is contained in:
icssoa
661
uni_modules/cool-ui/components/cl-button/cl-button.uvue
Normal file
661
uni_modules/cool-ui/components/cl-button/cl-button.uvue
Normal file
@@ -0,0 +1,661 @@
|
||||
<template>
|
||||
<view
|
||||
class="cl-button"
|
||||
:class="[
|
||||
`cl-button--${size}`,
|
||||
`cl-button--${type} `,
|
||||
{
|
||||
'cl-button--loading': loading,
|
||||
'cl-button--disabled': disabled,
|
||||
'cl-button--text': text,
|
||||
'cl-button--border': border,
|
||||
'cl-button--rounded': rounded,
|
||||
'cl-button--icon': isIcon,
|
||||
'cl-button--hover': isHover,
|
||||
'is-dark': isDark
|
||||
},
|
||||
isHover ? hoverClass : '',
|
||||
pt.className
|
||||
]"
|
||||
:key="cache.key"
|
||||
:style="buttonStyle"
|
||||
@tap.stop="onTap"
|
||||
>
|
||||
<button
|
||||
class="cl-button__clicker"
|
||||
:disabled="isDisabled"
|
||||
:hover-class="hoverClass"
|
||||
:hover-stop-propagation="hoverStopPropagation"
|
||||
:hover-start-time="hoverStartTime"
|
||||
:hover-stay-time="hoverStayTime"
|
||||
:form-type="formType"
|
||||
:open-type="openType"
|
||||
:lang="lang"
|
||||
:session-from="sessionFrom"
|
||||
:send-message-title="sendMessageTitle"
|
||||
:send-message-path="sendMessagePath"
|
||||
:send-message-img="sendMessageImg"
|
||||
:show-message-card="showMessageCard"
|
||||
:app-parameter="appParameter"
|
||||
:group-id="groupId"
|
||||
:guild-id="guildId"
|
||||
:public-id="publicId"
|
||||
:phone-number-no-quota-toast="phoneNumberNoQuotaToast"
|
||||
:createliveactivity="createliveactivity"
|
||||
@getuserinfo="onGetUserInfo"
|
||||
@contact="onContact"
|
||||
@getphonenumber="onGetPhoneNumber"
|
||||
@error="onError"
|
||||
@opensetting="onOpenSetting"
|
||||
@launchapp="onLaunchApp"
|
||||
@chooseavatar="onChooseAvatar"
|
||||
@chooseaddress="onChooseAddress"
|
||||
@chooseinvoicetitle="onChooseInvoiceTitle"
|
||||
@addgroupapp="onAddGroupApp"
|
||||
@subscribe="onSubscribe"
|
||||
@login="onLogin"
|
||||
@getrealtimephonenumber="onGetRealtimePhoneNumber"
|
||||
@agreeprivacyauthorization="onAgreePrivacyAuthorization"
|
||||
@touchstart="onTouchStart"
|
||||
@touchend="onTouchEnd"
|
||||
@touchcancel="onTouchCancel"
|
||||
></button>
|
||||
|
||||
<cl-loading
|
||||
:color="loadingIcon.color"
|
||||
:size="loadingIcon.size"
|
||||
:pt="{
|
||||
className: parseClass(['mr-[10rpx]', pt.loading?.className])
|
||||
}"
|
||||
v-if="loading && !disabled"
|
||||
></cl-loading>
|
||||
|
||||
<cl-icon
|
||||
:name="icon"
|
||||
:color="leftIcon.color"
|
||||
:size="leftIcon.size"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
{
|
||||
'mr-[8rpx]': !isIcon
|
||||
},
|
||||
pt.icon?.className
|
||||
])
|
||||
}"
|
||||
v-if="icon"
|
||||
></cl-icon>
|
||||
|
||||
<template v-if="!isIcon">
|
||||
<cl-text
|
||||
:color="textColor"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'cl-button__label',
|
||||
{
|
||||
'!text-sm': size == 'small'
|
||||
},
|
||||
pt.label?.className
|
||||
])
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</cl-text>
|
||||
|
||||
<slot name="content"></slot>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, useSlots, type PropType } from "vue";
|
||||
import { get, isDark, parseClass, parsePt, useCache } from "@/cool";
|
||||
import type { ClIconProps } from "../cl-icon/props";
|
||||
import type { ClButtonType, PassThroughProps, Size } from "../../types";
|
||||
import type { ClLoadingProps } from "../cl-loading/props";
|
||||
|
||||
defineOptions({
|
||||
name: "cl-button"
|
||||
});
|
||||
|
||||
// 组件属性定义
|
||||
const props = defineProps({
|
||||
// 样式穿透
|
||||
pt: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
// 按钮类型
|
||||
type: {
|
||||
type: String as PropType<ClButtonType>,
|
||||
default: "primary"
|
||||
},
|
||||
// 字体、图标颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 图标
|
||||
icon: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 文本按钮
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 圆角按钮
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 边框按钮
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 加载状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 禁用状态
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 按钮尺寸
|
||||
size: {
|
||||
type: String as PropType<Size>,
|
||||
default: "normal"
|
||||
},
|
||||
// 按钮点击态样式类
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 是否阻止点击态冒泡
|
||||
hoverStopPropagation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 按住后多久出现点击态
|
||||
hoverStartTime: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
// 手指松开后点击态保留时间
|
||||
hoverStayTime: {
|
||||
type: Number,
|
||||
default: 70
|
||||
},
|
||||
// 表单提交类型
|
||||
formType: {
|
||||
type: String as PropType<"submit" | "reset">,
|
||||
default: ""
|
||||
},
|
||||
// 开放能力类型
|
||||
openType: {
|
||||
type: String as PropType<
|
||||
| "agreePrivacyAuthorization"
|
||||
| "feedback"
|
||||
| "share"
|
||||
| "getUserInfo"
|
||||
| "contact"
|
||||
| "getPhoneNumber"
|
||||
| "launchApp"
|
||||
| "openSetting"
|
||||
| "chooseAvatar"
|
||||
| "getAuthorize"
|
||||
| "lifestyle"
|
||||
| "contactShare"
|
||||
| "openGroupProfile"
|
||||
| "openGuildProfile"
|
||||
| "openPublicProfile"
|
||||
| "shareMessageToFriend"
|
||||
| "addFriend"
|
||||
| "addColorSign"
|
||||
| "addGroupApp"
|
||||
| "addToFavorites"
|
||||
| "chooseAddress"
|
||||
| "chooseInvoiceTitle"
|
||||
| "login"
|
||||
| "subscribe"
|
||||
| "favorite"
|
||||
| "watchLater"
|
||||
| "openProfile"
|
||||
| "liveActivity"
|
||||
| "getRealtimePhoneNumber"
|
||||
>,
|
||||
default: ""
|
||||
},
|
||||
// 语言
|
||||
lang: {
|
||||
type: String as PropType<"en" | "zh_CN" | "zh_TW">,
|
||||
default: "zh_CN"
|
||||
},
|
||||
// 会话来源
|
||||
sessionFrom: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 会话标题
|
||||
sendMessageTitle: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 会话路径
|
||||
sendMessagePath: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 会话图片
|
||||
sendMessageImg: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 显示会话卡片
|
||||
showMessageCard: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 打开 APP 时，向 APP 传递的参数
|
||||
appParameter: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 群ID
|
||||
groupId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 公会ID
|
||||
guildId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 公众号ID
|
||||
publicId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 手机号获取失败时是否弹出错误提示
|
||||
phoneNumberNoQuotaToast: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否创建直播活动
|
||||
createliveactivity: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
// 事件定义
|
||||
const emit = defineEmits([
|
||||
"click",
|
||||
"tap",
|
||||
"getuserinfo",
|
||||
"contact",
|
||||
"getphonenumber",
|
||||
"error",
|
||||
"opensetting",
|
||||
"launchapp",
|
||||
"chooseavatar",
|
||||
"chooseaddress",
|
||||
"chooseinvoicetitle",
|
||||
"addgroupapp",
|
||||
"subscribe",
|
||||
"login",
|
||||
"getrealtimephonenumber",
|
||||
"agreeprivacyauthorization"
|
||||
]);
|
||||
|
||||
const slots = useSlots();
|
||||
const { cache } = useCache(() => [props.type, props.text, props.disabled, props.loading]);
|
||||
|
||||
// 样式穿透类型
|
||||
type PassThrough = {
|
||||
className?: string;
|
||||
label?: PassThroughProps;
|
||||
icon?: ClIconProps;
|
||||
loading?: ClLoadingProps;
|
||||
};
|
||||
|
||||
// 样式穿透计算
|
||||
const pt = computed(() => parsePt<PassThrough>(props.pt));
|
||||
|
||||
// 是否是图标按钮
|
||||
const isIcon = computed(() => get(slots, "default") == null && get(slots, "content") == null);
|
||||
|
||||
// 文本颜色
|
||||
const textColor = computed(() => {
|
||||
if (props.color != "") {
|
||||
return props.color;
|
||||
}
|
||||
|
||||
let color = "light";
|
||||
|
||||
if (props.text) {
|
||||
color = props.type;
|
||||
|
||||
if (props.disabled) {
|
||||
color = "disabled";
|
||||
}
|
||||
}
|
||||
|
||||
if (props.type == "light") {
|
||||
if (!isDark.value) {
|
||||
color = "dark";
|
||||
}
|
||||
}
|
||||
|
||||
return color;
|
||||
});
|
||||
|
||||
// 图标信息
|
||||
const leftIcon = computed<ClIconProps>(() => {
|
||||
let color = textColor.value;
|
||||
let size: number | string;
|
||||
|
||||
switch (props.size) {
|
||||
case "small":
|
||||
size = 26;
|
||||
break;
|
||||
default:
|
||||
size = 32;
|
||||
break;
|
||||
}
|
||||
|
||||
const ptIcon = pt.value.icon;
|
||||
|
||||
if (ptIcon != null) {
|
||||
color = ptIcon.color ?? color;
|
||||
size = ptIcon.size ?? size;
|
||||
}
|
||||
|
||||
return {
|
||||
size,
|
||||
color
|
||||
};
|
||||
});
|
||||
|
||||
// 加载图标信息
|
||||
const loadingIcon = computed<ClLoadingProps>(() => {
|
||||
let color = textColor.value;
|
||||
let size: number | string;
|
||||
|
||||
switch (props.size) {
|
||||
case "small":
|
||||
size = 22;
|
||||
break;
|
||||
default:
|
||||
size = 24;
|
||||
break;
|
||||
}
|
||||
|
||||
const ptIcon = pt.value.loading;
|
||||
|
||||
if (ptIcon != null) {
|
||||
color = ptIcon.color ?? color;
|
||||
size = ptIcon.size ?? size;
|
||||
}
|
||||
|
||||
return {
|
||||
size,
|
||||
color
|
||||
};
|
||||
});
|
||||
|
||||
// 按钮样式
|
||||
const buttonStyle = computed(() => {
|
||||
const style = new Map<string, string>();
|
||||
|
||||
if (props.color != "") {
|
||||
style.set("border-color", props.color);
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
|
||||
// 是否禁用状态
|
||||
const isDisabled = computed(() => props.disabled || props.loading);
|
||||
|
||||
// 点击事件处理
|
||||
function onTap(e: UniPointerEvent) {
|
||||
if (isDisabled.value) return;
|
||||
|
||||
emit("click", e);
|
||||
emit("tap", e);
|
||||
}
|
||||
|
||||
// 获取用户信息事件处理
|
||||
function onGetUserInfo(e: UniEvent) {
|
||||
emit("getuserinfo", e);
|
||||
}
|
||||
|
||||
// 客服消息事件处理
|
||||
function onContact(e: UniEvent) {
|
||||
emit("contact", e);
|
||||
}
|
||||
|
||||
// 获取手机号事件处理
|
||||
function onGetPhoneNumber(e: UniEvent) {
|
||||
emit("getphonenumber", e);
|
||||
}
|
||||
|
||||
// 错误事件处理
|
||||
function onError(e: UniEvent) {
|
||||
emit("error", e);
|
||||
}
|
||||
|
||||
// 打开设置事件处理
|
||||
function onOpenSetting(e: UniEvent) {
|
||||
emit("opensetting", e);
|
||||
}
|
||||
|
||||
// 打开APP事件处理
|
||||
function onLaunchApp(e: UniEvent) {
|
||||
emit("launchapp", e);
|
||||
}
|
||||
|
||||
// 选择头像事件处理
|
||||
function onChooseAvatar(e: UniEvent) {
|
||||
emit("chooseavatar", e);
|
||||
}
|
||||
|
||||
// 选择收货地址事件处理
|
||||
function onChooseAddress(e: UniEvent) {
|
||||
emit("chooseaddress", e);
|
||||
}
|
||||
|
||||
// 选择发票抬头事件处理
|
||||
function onChooseInvoiceTitle(e: UniEvent) {
|
||||
emit("chooseinvoicetitle", e);
|
||||
}
|
||||
|
||||
// 添加群应用事件处理
|
||||
function onAddGroupApp(e: UniEvent) {
|
||||
emit("addgroupapp", e);
|
||||
}
|
||||
|
||||
// 订阅消息事件处理
|
||||
function onSubscribe(e: UniEvent) {
|
||||
emit("subscribe", e);
|
||||
}
|
||||
|
||||
// 登录事件处理
|
||||
function onLogin(e: UniEvent) {
|
||||
emit("login", e);
|
||||
}
|
||||
|
||||
// 获取实时手机号事件处理
|
||||
function onGetRealtimePhoneNumber(e: UniEvent) {
|
||||
emit("getrealtimephonenumber", e);
|
||||
}
|
||||
|
||||
// 同意隐私授权事件处理
|
||||
function onAgreePrivacyAuthorization(e: UniEvent) {
|
||||
emit("agreeprivacyauthorization", e);
|
||||
}
|
||||
|
||||
// 点击态状态
|
||||
const isHover = ref(false);
|
||||
|
||||
// 触摸开始事件处理
|
||||
function onTouchStart() {
|
||||
if (!isDisabled.value) {
|
||||
isHover.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 触摸结束事件处理
|
||||
function onTouchEnd() {
|
||||
isHover.value = false;
|
||||
}
|
||||
|
||||
// 触摸取消事件处理
|
||||
function onTouchCancel() {
|
||||
isHover.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin button-type($color) {
|
||||
@apply bg-#{$color}-500;
|
||||
|
||||
&.cl-button--hover {
|
||||
@apply bg-#{$color}-600;
|
||||
}
|
||||
|
||||
&.cl-button--text {
|
||||
background-color: transparent;
|
||||
|
||||
&.cl-button--hover {
|
||||
@apply bg-transparent opacity-50;
|
||||
}
|
||||
}
|
||||
|
||||
&.cl-button--border {
|
||||
@apply border-#{$color}-500;
|
||||
}
|
||||
}
|
||||
|
||||
.cl-button {
|
||||
@apply flex flex-row items-center justify-center relative;
|
||||
@apply border border-transparent border-solid;
|
||||
overflow: visible;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: background-color, border-color, opacity;
|
||||
|
||||
&__clicker {
|
||||
@apply absolute p-0 m-0;
|
||||
@apply w-full h-full;
|
||||
@apply opacity-0;
|
||||
@apply z-10;
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&.cl-button--icon {
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&--normal {
|
||||
padding: 10rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
&.cl-button--icon {
|
||||
padding: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding: 14rpx 32rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&.cl-button--icon {
|
||||
padding: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&--rounded {
|
||||
@apply rounded-full;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
@include button-type("primary");
|
||||
}
|
||||
|
||||
&--warn {
|
||||
@include button-type("yellow");
|
||||
}
|
||||
|
||||
&--error {
|
||||
@include button-type("red");
|
||||
}
|
||||
|
||||
&--info {
|
||||
@include button-type("surface");
|
||||
}
|
||||
|
||||
&--success {
|
||||
@include button-type("green");
|
||||
}
|
||||
|
||||
&--light {
|
||||
@apply border-surface-700;
|
||||
|
||||
&.cl-button--hover {
|
||||
@apply bg-surface-100;
|
||||
}
|
||||
}
|
||||
|
||||
&--dark {
|
||||
@apply bg-surface-700;
|
||||
|
||||
&.cl-button--hover {
|
||||
@apply bg-surface-800;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
@apply bg-surface-300;
|
||||
|
||||
&.cl-button--border {
|
||||
@apply border-surface-300;
|
||||
}
|
||||
}
|
||||
|
||||
&--loading {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
&.cl-button--disabled {
|
||||
@apply bg-surface-400;
|
||||
|
||||
&.cl-button--border {
|
||||
@apply border-surface-500;
|
||||
}
|
||||
}
|
||||
|
||||
&.cl-button--text {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
&.cl-button--light {
|
||||
@apply border-surface-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cl-button {
|
||||
& + .cl-button {
|
||||
@apply ml-2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user