feat(Toast): add className props (#1432)

src/toast/demos/theme.vue

@@ -13,6 +13,8 @@ import { ErrorCircleIcon } from 'tdesign-icons-vue-next';
 
 const showSuccessToast = () => {
   Toast({
+    className: 'toast-root--success',
+    duration: 50000,
     theme: 'success',
     direction: 'column',
     message: '轻提示文字内容',

src/toast/props.ts

@@ -8,6 +8,11 @@ import { TdToastProps } from './type';
 import { PropType } from 'vue';
 
 export default {
+  /** 类名 */
+  className: {
+    type: String,
+    default: '',
+  },
   /** 图标排列方式 */
   direction: {
     type: String as PropType<TdToastProps['direction']>,

src/toast/toast.en-US.md

@@ -1,18 +1,21 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Toast Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-direction | String | row | options：row/column | N
+className | String | - | \- | N
+direction | String | row | options: row/column | N
 duration | Number | 2000 | \- | N
 icon | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 message | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 overlayProps | Object | {} | Typescript：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/toast/type.ts) | N
+placement | String | middle | options:  top/middle/bottom | N
 preventScrollThrough | Boolean | false | \- | N
 showOverlay | Boolean | false | \- | N
-theme | String | - | options：loading/success/error | N
+theme | String | - | options: loading/success/error | N
 onClose | Function |  | Typescript：`() => void`<br/> | N
 onDestroy | Function |  | Typescript：`() => void`<br/> | N
 
@@ -21,10 +24,10 @@ onDestroy | Function |  | Typescript：`() => void`<br/> | N
 name | params | description
 -- | -- | --
 close | \- | \-
-Destroy | \- | \-
-
+destroy | \- | \-
 
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -33,4 +36,4 @@ Name | Default Value | Description
 --td-toast-column-icon-size | 32px | - 
 --td-toast-max-width | 187px | - 
 --td-toast-radius | 4px | - 
---td-toast-row-icon-size | 24px | - 
+--td-toast-row-icon-size | 24px | -

src/toast/toast.md

@@ -1,10 +1,12 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Toast Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+className | String | - | 类名 | N
 direction | String | row | 图标排列方式。可选项：row/column | N
 duration | Number | 2000 | 弹窗显示毫秒数 | N
 icon | String / Slot / Function | - | 自定义图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -24,8 +26,8 @@ onDestroy | Function |  | TS 类型：`() => void`<br/>轻提示销毁的时候
 close | \- | 轻提示隐藏的时候触发
 destroy | \- | 轻提示销毁的时候触发
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -34,4 +36,4 @@ destroy | \- | 轻提示销毁的时候触发
 --td-toast-column-icon-size | 32px | - 
 --td-toast-max-width | 187px | - 
 --td-toast-radius | 4px | - 
---td-toast-row-icon-size | 24px | - 
+--td-toast-row-icon-size | 24px | -

src/toast/toast.tsx

@@ -104,7 +104,7 @@ export default defineComponent({
 
     return () => {
       return (
-        <div>
+        <div class={props.className}>
           <TOverlay {...customOverlayProps.value} />
 
           <div class={classes.value} style={computedStyle.value}>

src/toast/type.ts

@@ -4,10 +4,15 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdOverlayProps } from '../overlay/type';
+import { OverlayProps } from '../overlay';
 import { TNode } from '../common';
 
 export interface TdToastProps {
+  /**
+   * 类名
+   * @default ''
+   */
+  className?: string;
   /**
    * 图标排列方式
    * @default row
@@ -30,7 +35,7 @@ export interface TdToastProps {
    * 遮罩层属性，透传至 Overlay
    * @default {}
    */
-  overlayProps?: TdOverlayProps;
+  overlayProps?: OverlayProps;
   /**
    * 弹窗展示位置
    * @default middle