常用组件
容器 TmSheet
像一张纸张一样，用于包裹内容区域,可塑性高,可以快速用来布局.
🌶️ 示例
查看模拟效果＋
示例模板
vue
<template>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b mb-16 d-block">容器 TmSheet</tm-text>
<view>
<tm-text>非常方便快速布局，可全局配置间隙投影，圆角这些。</tm-text>
</view>
</tm-sheet>
<tm-sheet color="primary" :round="[0, 20]">
<tm-text color="white">更改圆角</tm-text>
</tm-sheet>
<tm-sheet borderWidth="4" :borderColor="['#8A88FB', '#D079EE']" :round="[0, 20]">
<tm-text>边线</tm-text>
</tm-sheet>
<tm-sheet :linear="['220.55deg', '#8A88FB', '#D079EE']" :round="[0, 20]">
<tm-text color="white">渐变</tm-text>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b">允许让内容加载中...</tm-text>
</tm-sheet>
<tm-sheet :loading="true">
<tm-sheet color="warn" :round="[0, 20]">
<tm-text color="white">让内容处理加载中</tm-text>
</tm-sheet>
</tm-sheet>
</template>
<script setup lang="ts"></script>
<style lang="scss"></style>🌶️ 兼容性
平台兼容
| H5 | uniAPP | 小程序 | version |
|---|---|---|---|
| ☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| borderColor | string|Array<string> | "" | 遵循规则：string或者[x]：全部边线[x,x]左右边线，上下边线[x,x,x]左，上，右[x,x,x,x]左，上，右,下 |
| darkBorderColor | string|Array<string> | "transparent" | - |
| borderWidth | string|number|Array<string | number> | 0 | 规则同borderColor |
| borderStyle | string|Array<string> | "solid" | 规则同borderColor |
| round | string|number|Array<string | number> | '' | 规则同borderColor左上，右上，右下，左下 |
| margin | string|number|Array<string | number> | '' | 遵循规则：填写0关闭,填写空值取全局string,number,或者[x]：全部[x,x]左右，上下[x,x,x]左，上，右[x,x,x,x]左，上，右,下 |
| padding | string|number|Array<string | number> | '' | 遵循规则：填写0关闭,填写空值取全局string,number,或者[x]：全部[x,x]左右，上下[x,x,x]左，上，右[x,x,x,x]左，上，右,下 |
| width | string|number | "" | - |
| height | string|number | "" | - |
| loading | boolean | false | - |
| flowTheme | boolean | false | 是否跟随主题背景色下方的color失效 |
| color | string | "white" | 背景主题 |
| darkBgColor | string | "" | 自定义暗黑背景空值时取全局配置 |
| linear | Array<string> | ()=>[] | 渐变，前面的color,bgColor,darkBgColor失效 |
| shadow | string|number|Array<string> | '' | 数字或者字符串时自动计算投影,它会投影大小数组时(必须为4),第一个x,第二为y,第三个为大小,第四个为投影颜色空字符串时,取全局配置,如果不想投影设置为none即可. |
🌹 事件
| 事件名 | 参数 | 返回数据 | 描述 |
|---|---|---|---|
| click | 名称：evt,事件参数, | - | 点击事件 |
🌽 slot插槽
| 插槽名 | 数据 | 描述 |
|---|---|---|
| default | - | 默认插槽 |
🥗 ref方法
| 方法名 | 参数 | 返回值 | 描述 |
|---|