first commit
This commit is contained in:
lingxiao865
47
uni_modules/tdesign-uniapp/components/result/README.en-US.md
Normal file
47
uni_modules/tdesign-uniapp/components/result/README.en-US.md
Normal file
@@ -0,0 +1,47 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### Result Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
description | String | - | \- | N
|
||||
icon | String / Boolean / Object | true | \- | N
|
||||
image | String | - | \- | N
|
||||
theme | String | default | options: default/success/warning/error | N
|
||||
title | String | '' | \- | N
|
||||
|
||||
### Result Slots
|
||||
|
||||
name | Description
|
||||
-- | --
|
||||
description | \-
|
||||
image | \-
|
||||
title | \-
|
||||
|
||||
### Result External Classes
|
||||
|
||||
className | Description
|
||||
-- | --
|
||||
t-class | \-
|
||||
t-class-description | \-
|
||||
t-class-image | \-
|
||||
t-class-title | \-
|
||||
|
||||
### CSS Variables
|
||||
|
||||
The component provides the following CSS variables, which can be used to customize styles.
|
||||
Name | Default Value | Description
|
||||
-- | -- | --
|
||||
--td-result-description-color | @text-color-secondary | -
|
||||
--td-result-description-font | @font-body-medium | -
|
||||
--td-result-description-margin-top | @spacer | -
|
||||
--td-result-icon-default-color | @brand-color | -
|
||||
--td-result-icon-error-color | @error-color | -
|
||||
--td-result-icon-success-color | @success-color | -
|
||||
--td-result-icon-warning-color | @warning-color | -
|
||||
--td-result-title-color | @text-color-primary | -
|
||||
--td-result-title-font | @font-title-extraLarge | -
|
||||
--td-result-title-margin-top | @spacer-1 | -
|
||||
88
uni_modules/tdesign-uniapp/components/result/README.md
Normal file
88
uni_modules/tdesign-uniapp/components/result/README.md
Normal file
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Result 结果
|
||||
description: 反馈结果状态。
|
||||
spline: data
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 引入
|
||||
|
||||
可在 `main.ts` 或在需要使用的页面或组件中引入。
|
||||
|
||||
```js
|
||||
import TResult from '@tdesign/uniapp/result/result.vue';
|
||||
```
|
||||
|
||||
### 组件类型
|
||||
|
||||
基础结果
|
||||
|
||||
{{ theme }}
|
||||
|
||||
带描述的结果
|
||||
|
||||
{{ description }}
|
||||
|
||||
自定义结果
|
||||
|
||||
{{ custom }}
|
||||
|
||||
## 常见问题
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
本地图片无法正确引用?
|
||||
<span class="icon">👇</span>
|
||||
</summary>
|
||||
<p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
|
||||
建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。
|
||||
</p>
|
||||
</details>
|
||||
|
||||
## API
|
||||
|
||||
### Result Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | 自定义样式 | N
|
||||
description | String | - | 描述文字 | N
|
||||
icon | String / Boolean / Object | true | 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 | N
|
||||
image | String | - | 图片地址 | N
|
||||
theme | String | default | 内置主题。可选项：default/success/warning/error | N
|
||||
title | String | '' | 标题 | N
|
||||
|
||||
### Result Slots
|
||||
|
||||
名称 | 描述
|
||||
-- | --
|
||||
description | 自定义 `description` 显示内容
|
||||
image | 自定义 `image` 显示内容
|
||||
title | 自定义 `title` 显示内容
|
||||
|
||||
### Result External Classes
|
||||
|
||||
类名 | 描述
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
t-class-description | 描述样式类
|
||||
t-class-image | 图片样式类
|
||||
t-class-title | 标题样式类
|
||||
|
||||
### CSS Variables
|
||||
|
||||
组件提供了下列 CSS 变量，可用于自定义样式。
|
||||
名称 | 默认值 | 描述
|
||||
-- | -- | --
|
||||
--td-result-description-color | @text-color-secondary | -
|
||||
--td-result-description-font | @font-body-medium | -
|
||||
--td-result-description-margin-top | @spacer | -
|
||||
--td-result-icon-default-color | @brand-color | -
|
||||
--td-result-icon-error-color | @error-color | -
|
||||
--td-result-icon-success-color | @success-color | -
|
||||
--td-result-icon-warning-color | @warning-color | -
|
||||
--td-result-title-color | @text-color-primary | -
|
||||
--td-result-title-font | @font-title-extraLarge | -
|
||||
--td-result-title-margin-top | @spacer-1 | -
|
||||
36
uni_modules/tdesign-uniapp/components/result/props.ts
Normal file
36
uni_modules/tdesign-uniapp/components/result/props.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdResultProps } from './type';
|
||||
export default {
|
||||
/** 描述文字 */
|
||||
description: {
|
||||
type: String,
|
||||
},
|
||||
/** 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 */
|
||||
icon: {
|
||||
type: [String, Boolean, Object],
|
||||
default: true as TdResultProps['icon'],
|
||||
},
|
||||
/** 图片地址 */
|
||||
image: {
|
||||
type: String,
|
||||
},
|
||||
/** 内置主题 */
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'default' as TdResultProps['theme'],
|
||||
validator(val: TdResultProps['theme']): boolean {
|
||||
if (!val) return true;
|
||||
return ['default', 'success', 'warning', 'error'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 标题 */
|
||||
title: {
|
||||
type: String,
|
||||
default: '' as TdResultProps['title'],
|
||||
},
|
||||
};
|
||||
35
uni_modules/tdesign-uniapp/components/result/result.css
Normal file
35
uni_modules/tdesign-uniapp/components/result/result.css
Normal file
@@ -0,0 +1,35 @@
|
||||
.t-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.t-result__icon) {
|
||||
font-size: 160rpx;
|
||||
}
|
||||
.t-result__title {
|
||||
font: var(--td-result-title-font, var(--td-font-title-extraLarge, 600 40rpx / 56rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
color: var(--td-result-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.t-result__thumb:not(:empty) + .t-result__title:not(:empty) {
|
||||
margin-top: var(--td-result-title-margin-top, var(--td-spacer-1, 24rpx));
|
||||
}
|
||||
.t-result__description {
|
||||
text-align: center;
|
||||
color: var(--td-result-description-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
|
||||
font: var(--td-result-description-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
}
|
||||
.t-result__title + .t-result__description:not(:empty) {
|
||||
margin-top: var(--td-result-description-margin-top, var(--td-spacer, 16rpx));
|
||||
}
|
||||
.t-result--theme-default {
|
||||
color: var(--td-result-icon-default-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-result--theme-success {
|
||||
color: var(--td-result-icon-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
|
||||
}
|
||||
.t-result--theme-warning {
|
||||
color: var(--td-result-icon-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
|
||||
}
|
||||
.t-result--theme-error {
|
||||
color: var(--td-result-icon-error-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
128
uni_modules/tdesign-uniapp/components/result/result.vue
Normal file
128
uni_modules/tdesign-uniapp/components/result/result.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="[
|
||||
classPrefix + ' ' + classPrefix + '--theme-' + theme,
|
||||
tClass
|
||||
]"
|
||||
>
|
||||
<view
|
||||
:aria-hidden="true"
|
||||
:class="classPrefix + '__thumb'"
|
||||
>
|
||||
<t-image
|
||||
v-if="image"
|
||||
:t-class="tClassImage"
|
||||
:src="image"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<block
|
||||
v-else-if="_icon"
|
||||
name="icon"
|
||||
>
|
||||
<t-icon
|
||||
:custom-style="_icon.style || ''"
|
||||
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (_icon.activeIdx == _icon.index ? 'active ' : ' ')"
|
||||
:prefix="_icon.prefix"
|
||||
:name="_icon.name"
|
||||
:size="_icon.size"
|
||||
:color="_icon.color"
|
||||
:aria-hidden="!!_icon.ariaHidden"
|
||||
:aria-label="_icon.ariaLabel"
|
||||
:aria-role="_icon.ariaRole"
|
||||
/>
|
||||
</block>
|
||||
<slot name="image" />
|
||||
</view>
|
||||
<view
|
||||
:class="[
|
||||
classPrefix + '__title ',
|
||||
tClassTitle
|
||||
]"
|
||||
>
|
||||
<block v-if="title">
|
||||
{{ title }}
|
||||
</block>
|
||||
<slot name="title" />
|
||||
</view>
|
||||
<view
|
||||
:class="[
|
||||
classPrefix + '__description ',
|
||||
tClassDescription
|
||||
]"
|
||||
>
|
||||
<block v-if="description">
|
||||
{{ description }}
|
||||
</block>
|
||||
<slot name="description" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TIcon from '../icon/icon';
|
||||
import TImage from '../image/image';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import props from './props';
|
||||
import { prefix } from '../common/config';
|
||||
import { calcIcon } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
|
||||
|
||||
const name = `${prefix}-result`;
|
||||
const THEME_ICON = {
|
||||
default: 'error-circle',
|
||||
success: 'check-circle',
|
||||
warning: 'error-circle',
|
||||
error: 'close-circle',
|
||||
};
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-image`,
|
||||
`${prefix}-class-title`,
|
||||
`${prefix}-class-description`,
|
||||
],
|
||||
components: {
|
||||
TIcon,
|
||||
TImage,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
tools,
|
||||
|
||||
_icon: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
icon: 'initIcon',
|
||||
theme: 'initIcon',
|
||||
},
|
||||
mounted() {
|
||||
this.initIcon();
|
||||
},
|
||||
methods: {
|
||||
initIcon() {
|
||||
const {
|
||||
icon,
|
||||
theme,
|
||||
} = this;
|
||||
this._icon = calcIcon(icon, THEME_ICON[theme]);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './result.css';
|
||||
</style>
|
||||
31
uni_modules/tdesign-uniapp/components/result/type.ts
Normal file
31
uni_modules/tdesign-uniapp/components/result/type.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
export interface TdResultProps {
|
||||
/**
|
||||
* 描述文字
|
||||
*/
|
||||
description?: string;
|
||||
/**
|
||||
* 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标
|
||||
* @default true
|
||||
*/
|
||||
icon?: string | boolean | object;
|
||||
/**
|
||||
* 图片地址
|
||||
*/
|
||||
image?: string;
|
||||
/**
|
||||
* 内置主题
|
||||
* @default default
|
||||
*/
|
||||
theme?: 'default' | 'success' | 'warning' | 'error';
|
||||
/**
|
||||
* 标题
|
||||
* @default ''
|
||||
*/
|
||||
title?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user