看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,27 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+import { getColor } from '../../';
+
+/**
+ * actionSheet 操作菜单
+ * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ */
+export const ActionSheetItemProps = {
+    ...baseProps,
+    /** 标题 */
+    text: { type: String, default: '' },
+    /** 描述 */
+    subText: { type: String, default: '' },
+    /** 边距 */
+    padding: { type: [Number, String] as PropType<number | string>, default: '34rpx 0' },
+    /** 字体颜色 */
+    color: { type: String, default: () => getColor('mainColor') },
+    /** 字体大小 */
+    fontSize: { type: [String, Number], default: '32rpx' },
+    /** 是否禁用 */
+    disabled: { type: Boolean, default: false },
+    /** 是否异步关闭 */
+    asyncClose: { type: Boolean, default: false }
+};
+
+export type ActionSheetItemProps = ExtractPropTypes<typeof ActionSheetItemProps>;
@@ -0,0 +1,85 @@
+<template>
+    <view
+        class="u-action-sheet-item u-line-1"
+        :class="[!isLast ? 'u-border-bottom' : '', disabled ? 'u-action-sheet-item--disabled' : '', customClass]"
+        :style="$u.toStyle(itemStyle, customStyle)"
+        @click="handleClick"
+        @touchmove.stop.prevent
+        hover-class="u-hover-class"
+        :hover-stay-time="150"
+    >
+        <slot>
+            <text>{{ text }}</text>
+            <text class="u-action-sheet-item__subtext u-line-1" v-if="subText">{{ subText }}</text>
+        </slot>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-action-sheet-item',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ActionSheetItemProps } from './types';
+import { $u, useChildren } from '../../libs';
+
+const props = defineProps(ActionSheetItemProps);
+const emit = defineEmits(['click']);
+
+const { parent, parentExposed, childIndex, emitToParent } = useChildren('u-action-sheet-item', 'u-action-sheet');
+
+const isLast = computed(() => {
+    return (childIndex?.value ?? 0) + 1 >= (parent?.value?.getChildren()?.length ?? 0);
+});
+
+const itemStyle = computed(() => {
+    const style: Record<string, string> = {};
+    style.color = props.color || parentExposed?.value?.props?.color;
+    style.fontSize = $u.addUnit(props.fontSize || parentExposed?.value?.props?.fontSize);
+    style.padding = $u.addUnit(props.padding);
+    if (props.disabled) style.color = 'var(--u-light-color)';
+    return style;
+});
+
+function handleClick() {
+    if (props.disabled) return;
+    emit('click', childIndex?.value || 0);
+    if (!props.asyncClose && !parentExposed?.value?.props?.asyncClose) {
+        emitToParent('itemClick', childIndex?.value || 0);
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-action-sheet-item {
+    @include vue-flex;
+    line-height: 1;
+    justify-content: center;
+    align-items: center;
+    font-size: 32rpx;
+    padding: 34rpx 0;
+    flex-direction: column;
+}
+
+.u-action-sheet-item--disabled {
+    color: $u-light-color;
+}
+
+.u-action-sheet-item__subtext {
+    font-size: 24rpx;
+    color: $u-tips-color;
+    margin-top: 20rpx;
+}
+</style>