lingxiao/mini-yu
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
uni_modules/tdesign-uniapp/components/action-sheet/README.en-US.md Normal file
View File

@@ -0,0 +1,60 @@
:: BASE_DOC ::
## API
### ActionSheet Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
align | String | center | options: center/left | N
cancel-text | String | - | \- | N
count | Number | 8 | \- | N
description | String | - | \- | N
items | Array | [] | Typescript: `Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; description?: string; color?: string; disabled?: boolean; icon?: string; suffixIcon?: string }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
popup-props | Object | {} | Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
show-cancel | Boolean | true | \- | N
show-overlay | Boolean | true | \- | N
theme | String | list | options: list/grid | N
using-custom-navbar | Boolean | false | \- | N
visible | Boolean | false | `v-model:visible` is supported | N
default-visible | Boolean | false | uncontrolled property | N
### ActionSheet Events
name | params | description
-- | -- | --
cancel | \- | \-
close | `(context: { trigger: ActionSheetTriggerSource })` | [see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
selected | `(context: { selected: ActionSheetItem \| string, index: number })` | \-
### ActionSheet Slots
name | Description
-- | --
\- | \-
### ActionSheet External Classes
className | Description
-- | --
t-class | \-
t-class-cancel | \-
t-class-content | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-action-sheet-border-color | @component-stroke | -
--td-action-sheet-border-radius | @radius-extraLarge | -
--td-action-sheet-cancel-color | @text-color-primary | -
--td-action-sheet-color | @text-color-primary | -
--td-action-sheet-description-color | @text-color-placeholder | -
--td-action-sheet-description-font | @font-body-medium | -
--td-action-sheet-disabled-color | @text-color-disabled | -
--td-action-sheet-dot-active-color | @brand-color | -
--td-action-sheet-dot-color | @text-color-disabled | -
--td-action-sheet-dot-size | 16rpx | -
--td-action-sheet-gap-color | @bg-color-page | -

131
uni_modules/tdesign-uniapp/components/action-sheet/README.md Normal file
View File

@@ -0,0 +1,131 @@
---
title: ActionSheet 动作面板
description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。
spline: data
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TActionSheet from '@tdesign/uniapp/action-sheet/action-sheet.vue';
```
### 组件类型
列表型动作面板
{{ list }}
宫格型动作面板
{{ grid }}
### 组件状态
宫格型动作面板
{{ status }}
### 组件样式
列表型对齐方式
{{ align }}
### 支持指令调用
```javascript
import ActionSheet, { ActionSheetTheme } from '@tdesign/uniapp/action-sheet/index';
// 指令调用不同于组件引用不需要传入visible
const basicListOption: ActionSheetShowOption = {
theme: ActionSheetTheme.List,
selector: '#t-action-sheet',
items: [
{
label: '默认选项',
},
{
label: '失效选项',
disabled: true,
},
{
label: '警告选项',
color: '#e34d59',
},
],
};
const handler = ActionSheet.show(basicListOption);
```
指令调用的关闭如下
```javascript
handler.close();
```
## API
### ActionSheet Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
align | String | center | 水平对齐方式。可选项：center/left | N
cancel-text | String | - | 设置取消按钮的文本 | N
count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
description | String | - | 动作面板描述文字 | N
items | Array | [] | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; description?: string; color?: string; disabled?: boolean; icon?: string; suffixIcon?: string }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
show-cancel | Boolean | true | 是否显示取消按钮 | N
show-overlay | Boolean | true | 是否显示遮罩层 | N
theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
visible | Boolean | false | 显示与隐藏。支持语法糖 `v-model:visible` | N
default-visible | Boolean | false | 显示与隐藏。非受控属性 | N
### ActionSheet Events
名称 | 参数 | 描述
-- | -- | --
cancel | \- | 点击取消按钮时触发
close | `(context: { trigger: ActionSheetTriggerSource })` | 关闭时触发。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
selected | `(context: { selected: ActionSheetItem \| string, index: number })` | 选择菜单项时触发
### ActionSheet Slots
名称 | 描述
-- | --
\- | 默认插槽，自定义内容区域内容
### ActionSheet External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-cancel | 取消样式类
t-class-content | 内容样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-action-sheet-border-color | @component-stroke | -
--td-action-sheet-border-radius | @radius-extraLarge | -
--td-action-sheet-cancel-color | @text-color-primary | -
--td-action-sheet-color | @text-color-primary | -
--td-action-sheet-description-color | @text-color-placeholder | -
--td-action-sheet-description-font | @font-body-medium | -
--td-action-sheet-disabled-color | @text-color-disabled | -
--td-action-sheet-dot-active-color | @brand-color | -
--td-action-sheet-dot-color | @text-color-disabled | -
--td-action-sheet-dot-size | 16rpx | -
--td-action-sheet-gap-color | @bg-color-page | -

162
uni_modules/tdesign-uniapp/components/action-sheet/action-sheet.css Normal file
View File

@@ -0,0 +1,162 @@
.t-action-sheet__content {
color: var(--td-action-sheet-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extraLarge, 24rpx));
border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extraLarge, 24rpx));
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
overflow: hidden;
}
.t-action-sheet__content:focus {
outline: 0;
}
.t-action-sheet--grid {
padding-top: var(--td-spacer, 16rpx);
}
.t-action-sheet--grid .t-action-sheet__description::after {
display: none;
}
.t-action-sheet--left .t-action-sheet__description {
text-align: left;
}
.t-action-sheet--left .t-action-sheet__list-item-content,
.t-action-sheet--left .t-action-sheet__list-item-desc {
justify-content: start;
}
.t-action-sheet--left .t-action-sheet__list-item-icon--suffix {
margin-left: auto;
}
.t-action-sheet__grid {
padding-bottom: 16rpx;
}
.t-action-sheet__grid--swiper {
padding-bottom: 48rpx;
}
.t-action-sheet__description {
color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
font: var(--td-action-sheet-description-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
text-align: center;
padding: var(--td-spacer-1, 24rpx) var(--td-spacer-2, 32rpx);
position: relative;
}
.t-action-sheet__description:focus {
outline: 0;
}
.t-action-sheet__description::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__description::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-action-sheet__list-item {
flex-direction: column;
padding: var(--td-spacer-2, 32rpx);
display: flex;
align-items: center;
justify-content: center;
}
.t-action-sheet__list-item:not(:last-child) {
position: relative;
}
.t-action-sheet__list-item:not(:last-child)::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__list-item:not(:last-child)::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-action-sheet__list-item:focus {
outline: 0;
}
.t-action-sheet__list-item--disabled {
color: var(--td-action-sheet-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-action-sheet__list-item-content,
.t-action-sheet__list-item-desc {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.t-action-sheet__list-item-text {
font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
}
.t-action-sheet__list-item-desc {
font: var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
margin-top: var(--td-spacer, 16rpx);
}
.t-action-sheet__list-item-text,
.t-action-sheet__list-item-desc {
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-action-sheet__list-item-icon {
font-size: 48rpx;
margin-right: var(--td-spacer, 16rpx);
}
.t-action-sheet__list-item-icon--suffix {
margin-right: 0;
margin-left: var(--td-spacer, 16rpx);
}
.t-action-sheet__swiper-wrap {
margin-top: 8rpx;
position: relative;
}
.t-action-sheet__footer {
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
}
.t-action-sheet__gap-list {
height: 16rpx;
background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-gray-color-1, #f3f3f3)));
}
.t-action-sheet__gap-grid {
height: 1rpx;
background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__cancel {
padding: var(--td-spacer-1, 24rpx) var(--td-spacer-2, 32rpx);
font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
color: var(--td-action-sheet-cancel-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
display: flex;
align-items: center;
justify-content: center;
}
.t-action-sheet__dots {
position: absolute;
left: 50%;
bottom: var(--td-spacer-2, 32rpx);
transform: translateX(-50%);
display: flex;
flex-direction: row;
}
.t-action-sheet__dots-item {
width: var(--td-action-sheet-dot-size, 16rpx);
height: var(--td-action-sheet-dot-size, 16rpx);
background-color: var(--td-action-sheet-dot-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
border-radius: 50%;
margin: 0 var(--td-spacer, 16rpx);
transition: all 0.4s ease-in;
}
.t-action-sheet__dots-item.t-is-active {
background-color: var(--td-action-sheet-dot-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}

350
uni_modules/tdesign-uniapp/components/action-sheet/action-sheet.vue Normal file
View File

@@ -0,0 +1,350 @@
<template>
<view
:id="classPrefix"
:style="tools._style([rootCustomStyle])"
:class="tools.cls(classPrefix, [dataAlign, dataTheme, ['no-description', !description]]) + ' ' + tClass"
>
<t-popup
:visible="dataVisible"
placement="bottom"
:using-custom-navbar="dataUsingCustomNavbar"
:custom-navbar-height="customNavbarHeight"
:show-overlay="dataShowOverlay"
:z-index="(dataPopupProps && dataPopupProps.zIndex) || defaultPopUpzIndex"
:overlay-props="(dataPopupProps && dataPopupProps.overlayProps) || defaultPopUpProps"
@visible-change="onPopupVisibleChange"
>
<view
:class="classPrefix + '__content ' + tClassContent"
tabindex="0"
>
<view
v-if="dataDescription"
tabindex="0"
:class="classPrefix + '__description'"
>
{{ dataDescription }}
</view>
<block v-if="gridThemeItems.length">
<block v-if="gridThemeItems.length === 1">
<t-grid
align="center"
:t-class="classPrefix + '__grid'"
:column="dataCount / 2"
:class="classPrefix + '__single-wrap'"
>
<t-grid-item
v-for="(item, index) in gridThemeItems[0]"
:key="index"
:t-class="classPrefix + '__grid-item ' + classPrefix + '__square'"
:data-index="index"
:icon="{ name: item.icon, color: item.color }"
:text="item.label || ''"
:description="item.description || ''"
:image="item.image || ''"
:style="'--td-grid-item-text-color: ' + item.color"
@click="onSelect($event, { index })"
/>
</t-grid>
</block>
<block v-else-if="gridThemeItems.length > 1">
<view :class="classPrefix + '__swiper-wrap'">
<swiper
:style="heightStyle"
:autoplay="false"
:current="currentSwiperIndex"
@change="onSwiperChange"
>
<swiper-item
v-for="(item, index) in gridThemeItems"
:key="index"
>
<t-grid
align="center"
:t-class="classPrefix + '__grid ' + classPrefix + '__grid--swiper'"
:column="dataCount / 2"
:custom-style="gridStyle"
>
<t-grid-item
v-for="(item, index1) in item"
:key="index1"
:t-class="classPrefix + '__grid-item'"
:class="classPrefix + '__square'"
:data-index="index"
:icon="{ name: item.icon, color: item.color }"
:text="item.label || ''"
:description="item.description || ''"
:image="item.image || ''"
:style="'--td-grid-item-text-color: ' + item.color"
@click="onSelect($event, { index })"
/>
</t-grid>
</swiper-item>
</swiper>
<view :class="classPrefix + '__nav'">
<view :class="classPrefix + '__dots'">
<view
v-for="(item, index) in gridThemeItems.length"
:key="index"
:class="classPrefix + '__dots-item ' + (index === currentSwiperIndex ? prefix + '-is-active' : '')"
/>
</view>
</view>
</view>
</block>
</block>
<view
v-else-if="dataItems && dataItems.length"
:class="classPrefix + '__list'"
>
<block
v-for="(item, index) in dataItems"
:key="index"
>
<view
:data-index="index"
:style="item.color ? 'color: ' + item.color : ''"
:class="tools.cls(classPrefix + '__list-item', [['disabled', item.disabled]])"
:aria-role="ariaRole || 'button'"
:aria-label="item.label || item"
tabindex="0"
@click="() => onSelect(item, { index })"
>
<view :class="classPrefix + '__list-item-content'">
<t-icon
v-if="item.icon"
:name="item.icon"
:t-class="classPrefix + '__list-item-icon'"
:custom-style="iconCustomStyle"
/>
<view :class="classPrefix + '__list-item-text'">
{{ item.label || item }}
</view>
<t-icon
v-if="item.suffixIcon"
:name="item.suffixIcon"
:t-class="classPrefix + '__list-item-icon ' + classPrefix + '__list-item-icon--suffix'"
style="margin-left: auto;"
:custom-style="suffixIconCustomStyle"
/>
</view>
<view
v-if="item.description"
:class="classPrefix + '__list-item-desc'"
>
{{ item.description }}
</view>
</view>
</block>
</view>
</view>
<slot />
<view
v-if="dataShowCancel"
:class="classPrefix + '__footer'"
>
<view :class="classPrefix + '__gap-' + dataTheme" />
<view
:class="classPrefix + '__cancel ' + tClassCancel"
:hover-class="classPrefix + '__cancel--hover'"
hover-stay-time="70"
aria-role="button"
@click="onCancel"
>
{{ dataCancelText || '取消' }}
</view>
</view>
</t-popup>
</view>
</template>
<script>
import TIcon from '../icon/icon';
import TPopup from '../popup/popup';
import TGrid from '../grid/grid';
import TGridItem from '../grid-item/grid-item';
import { chunk } from '../common/utils';
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import { actionSheetTheme } from './show';
import props from './props';
import useCustomNavbar from '../mixins/using-custom-navbar';
import tools from '../common/utils.wxs';
import { getFunctionalMixin } from '../common/functional/mixin';
const name = `${prefix}-action-sheet`;
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
controlledProps: [{
key: 'visible',
event: 'visible-change',
}],
externalClasses: [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-cancel`,
],
mixins: [getFunctionalMixin(props), useCustomNavbar],
components: {
TIcon,
TPopup,
TGrid,
TGridItem,
},
props: {
...props,
},
emits: [
'visible-change',
'update:visible',
],
data() {
return {
prefix,
classPrefix: name,
gridThemeItems: [],
currentSwiperIndex: 0,
defaultPopUpProps: {},
defaultPopUpzIndex: 11500,
tools,
heightStyle: 'height: 456rpx;',
};
},
computed: {
rootCustomStyle() {
return tools._style([
this.customStyle,
this.dataTheme === 'grid' ? 'padding-bottom: 16rpx' : '',
]);
},
iconCustomStyle() {
return 'margin-right: 8px;';
},
suffixIconCustomStyle() {
return 'margin-right: 8px;margin-left: auto;';
},
gridStyle() {
return `${this.heightStyle}padding-bottom: 48rpx;`;
},
},
watch: {
dataVisible: {
handler(e) {
if (e) {
this.init();
}
},
immediate: true,
},
dataItems: {
handler() {
if (this.dataVisible) {
this.init();
}
},
immediate: true,
},
},
methods: {
init() {
this.memoInitialData();
this.splitGridThemeActions();
},
memoInitialData() {
this.initialData = {
};
},
splitGridThemeActions() {
if (this.dataTheme !== actionSheetTheme.Grid) return;
this.gridThemeItems = chunk(this.dataItems, this.dataCount);
},
/** 指令调用显示 */
show(options) {
const defaultOptions = [
'align',
'cancelText',
'count',
'description',
'items',
'popupProps',
'showCancel',
'showOverlay',
'theme',
'usingCustomNavbar',
].reduce((acc, key) => ({
...acc,
[key]: props[key].default,
}));
this.setData({
...defaultOptions,
...options,
visible: true,
});
this.splitGridThemeActions();
this.autoClose = true;
this._trigger('visible-change', { visible: true });
},
/** 指令调用隐藏 */
close() {
this.$emit('close', { trigger: 'command' });
this._trigger('visible-change', { visible: false });
},
/** 默认点击遮罩关闭 */
onPopupVisibleChange(detail) {
if (!detail.visible) {
this.$emit('close', { trigger: 'overlay' });
this._trigger('visible-change', { visible: false });
}
if (this.autoClose) {
this.dataVisible = false;
this.autoClose = false;
}
},
onSwiperChange(e) {
const { current } = e.detail;
this.currentSwiperIndex = current;
},
onSelect(event, { index }) {
const { currentSwiperIndex, dataItems, gridThemeItems, dataCount, dataTheme } = this;
const isSwiperMode = dataTheme === actionSheetTheme.Grid;
const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : dataItems[index];
const realIndex = isSwiperMode ? index + currentSwiperIndex * dataCount : index;
if (item) {
this.$emit('selected', { selected: item, index: realIndex });
if (!item.disabled) {
this.$emit('close', { trigger: 'select' });
this._trigger('visible-change', { visible: false });
}
}
},
onCancel() {
this.$emit('cancel');
if (this.autoClose) {
this.dataVisible = false;
this.autoClose = false;
}
},
},
});
</script>
<style scoped>
@import './action-sheet.css';
</style>

15
uni_modules/tdesign-uniapp/components/action-sheet/computed.js Normal file
View File

@@ -0,0 +1,15 @@
export const getListThemeItemClass = function (props) {
const { classPrefix } = props;
const { item } = props;
const { prefix } = props;
const classList = [`${classPrefix}__list-item`];
if (item.disabled) {
classList.push(`${prefix}-is-disabled`);
}
return classList.join(' ');
};
export const isImage = function (name) {
return name.indexOf('/') !== -1;
};

11
uni_modules/tdesign-uniapp/components/action-sheet/index.d.ts vendored Normal file
View File

@@ -0,0 +1,11 @@
import type { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption } from './show.d.ts';
export { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption };
declare type Instance = any;
declare const Handler: {
show(options: ActionSheetShowOption): Instance;
close(options: ActionSheetShowOption): void;
};
export default Handler;

13
uni_modules/tdesign-uniapp/components/action-sheet/index.js Normal file
View File

@@ -0,0 +1,13 @@
import { show, close, ActionSheetTheme, actionSheetTheme } from './show';
export { ActionSheetTheme, actionSheetTheme };
export default {
show(options) {
return show(options);
},
close(options) {
return close(options);
},
};

86
uni_modules/tdesign-uniapp/components/action-sheet/props.ts Normal file
View File

@@ -0,0 +1,86 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdActionSheetProps } from './type';
export default {
/** 水平对齐方式 */
align: {
type: String,
default: 'center' as TdActionSheetProps['align'],
validator(val: TdActionSheetProps['align']): boolean {
if (!val) return true;
return ['center', 'left'].includes(val);
},
},
/** 设置取消按钮的文本 */
cancelText: {
type: String,
default: '',
},
/** 设置每页展示菜单的数量，仅当 type=grid 时有效 */
count: {
type: Number,
default: 8,
},
/** 动作面板描述文字 */
description: {
type: String,
default: '',
},
/** 菜单项 */
items: {
type: Array,
default: (): TdActionSheetProps['items'] => [],
},
/** 透传 Popup 组件全部属性 */
popupProps: {
type: Object,
default: () => ({}),
},
/** 是否显示取消按钮 */
showCancel: {
type: Boolean,
default: true,
},
/** 是否显示遮罩层 */
showOverlay: {
type: Boolean,
default: true,
},
/** 展示类型，列表和表格形式展示 */
theme: {
type: String,
default: 'list' as TdActionSheetProps['theme'],
validator(val: TdActionSheetProps['theme']): boolean {
if (!val) return true;
return ['list', 'grid'].includes(val);
},
},
/** 是否使用了自定义导航栏 */
usingCustomNavbar: Boolean,
/** 显示与隐藏 */
visible: {
type: Boolean,
default: undefined,
},
/** 显示与隐藏，非受控属性 */
defaultVisible: Boolean,
/** 点击取消按钮时触发 */
onCancel: {
type: Function,
default: () => ({}),
},
/** 关闭时触发 */
onClose: {
type: Function,
default: () => ({}),
},
/** 选择菜单项时触发 */
onSelected: {
type: Function,
default: () => ({}),
},
};

28
uni_modules/tdesign-uniapp/components/action-sheet/show.d.ts vendored Normal file
View File

@@ -0,0 +1,28 @@
import { ActionSheetItem } from './type';
export { ActionSheetItem };
declare type Instance = any;
declare type Context = any;
export declare enum ActionSheetTheme {
List = 'list',
Grid = 'grid'
}
interface ActionSheetProps {
align: 'center' | 'left';
cancelText?: string;
count?: number;
description: string;
items: Array<string | ActionSheetItem>;
showCancel?: boolean;
theme?: ActionSheetTheme;
visible: boolean;
defaultVisible?: boolean;
}
export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
context?: Context;
selector?: string;
}
export declare const show: (options: ActionSheetShowOption) => Instance;
export declare const close: (options: ActionSheetShowOption) => void;

33
uni_modules/tdesign-uniapp/components/action-sheet/show.js Normal file
View File

@@ -0,0 +1,33 @@
import { getInstance } from '../common/utils';
export const ActionSheetTheme = {
List: 'list',
Grid: 'grid',
};
export const actionSheetTheme = {
List: ActionSheetTheme.List,
Grid: ActionSheetTheme.Grid,
} ;
export const show = function (options) {
const { context, selector = '#t-action-sheet', ...otherOptions } = { ...options };
const instance = getInstance(context, selector);
if (instance) {
instance.show({
...otherOptions,
});
return instance;
}
console.error('未找到组件,请确认 selector && context 是否正确');
};
export const close = function (options) {
const { context, selector = '#t-action-sheet' } = { ...options };
const instance = getInstance(context, selector);
if (instance) {
instance.close();
}
};

93
uni_modules/tdesign-uniapp/components/action-sheet/type.ts Normal file
View File

@@ -0,0 +1,93 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdPopupProps as PopupProps } from '../popup/type';
export interface TdActionSheetProps {
/**
* 水平对齐方式
* @default center
*/
align?: 'center' | 'left';
/**
* 设置取消按钮的文本
* @default ''
*/
cancelText?: string;
/**
* 设置每页展示菜单的数量，仅当 type=grid 时有效
* @default 8
*/
count?: number;
/**
* 动作面板描述文字
* @default ''
*/
description?: string;
/**
* 菜单项
* @default []
*/
items?: Array<string | ActionSheetItem>;
/**
* 透传 Popup 组件全部属性
* @default {}
*/
popupProps?: PopupProps;
/**
* 是否显示取消按钮
* @default true
*/
showCancel?: boolean;
/**
* 是否显示遮罩层
* @default true
*/
showOverlay?: boolean;
/**
* 展示类型，列表和表格形式展示
* @default list
*/
theme?: 'list' | 'grid';
/**
* 是否使用了自定义导航栏
* @default false
*/
usingCustomNavbar?: boolean;
/**
* 显示与隐藏
* @default false
*/
visible?: boolean;
/**
* 显示与隐藏，非受控属性
* @default false
*/
defaultVisible?: boolean;
/**
* 点击取消按钮时触发
*/
onCancel?: () => void;
/**
* 关闭时触发
*/
onClose?: (context: { trigger: ActionSheetTriggerSource }) => void;
/**
* 选择菜单项时触发
*/
onSelected?: (context: { selected: ActionSheetItem | string; index: number }) => void;
}
export interface ActionSheetItem {
label: string;
description?: string;
color?: string;
disabled?: boolean;
icon?: string;
suffixIcon?: string;
}
export type ActionSheetTriggerSource = 'overlay' | 'command' | 'select';