tmui-cli 2.0.0 → 2.0.2

package/data/examples/button.vue

@@ -0,0 +1,70 @@
+<template>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b ">按钮 TmButton</tm-text>
+        <view class="mb-n8">
+            <tm-text>样式丰富塑造性好。</tm-text>
+        </view>
+
+        <view class="gap-15 flex flex-col">
+            <tm-button block>正常</tm-button>
+            <tm-button block color="warn">警告</tm-button>
+            <tm-button block color="error">错误</tm-button>
+            <tm-button block color="success">成功</tm-button>
+            <tm-button block color="danger">危险</tm-button>
+            <tm-button block color="info">次要</tm-button>
+        </view>
+    </tm-sheet>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8">大小</tm-text>
+        <view class="flex flex-row flex-row-top-start flex-wrap gap-15 mt-16">
+            <tm-button size="xs">极小</tm-button>
+            <tm-button size="s">小</tm-button>
+            <tm-button size="m">中等</tm-button>
+            <tm-button>默认</tm-button>
+            <tm-button size="g">大按钮</tm-button>
+        </view>
+    </tm-sheet>
+
+    <tm-sheet class="gap-15 flex flex-col">
+        <tm-text font-size="36" class="text-weight-b flex mb-n8">状态</tm-text>
+        <tm-button block :loading="true">加载中</tm-button>
+        <tm-button block :disabled="true">禁用</tm-button>
+    </tm-sheet>
+
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8 d-block">图标按钮</tm-text>
+        <view class="flex flex-row flex-row-top-start flex-wrap gap-15">
+            <tm-button icon="thumb-up-fill" size="n" btnIcon width="80" rounded></tm-button>
+            <tm-button icon="reply-line" color="error" size="n" btnIcon width="80" rounded></tm-button>
+            <tm-button icon="verified-badge-fill" skin="outlined" iconSize="52" size="n" btnIcon width="80"
+                rounded></tm-button>
+            <tm-button loading skin="outlined" btnIcon width="80" rounded></tm-button>
+        </view>
+    </tm-sheet>
+
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8 d-block">按钮样式</tm-text>
+        <view class="flex flex-row flex-row-top-start flex-wrap gap-15">
+            <tm-button loading skin="outlined">加载中</tm-button>
+            <tm-button skin="dashed" :round="[20, 0, 20, 0]">异形</tm-button>
+            <tm-button color="#4300B1" :linear="['45deg', '#A531DC', '#4300B1']">渐变</tm-button>
+            <tm-button skin="text">文本</tm-button>
+            <tm-button skin="thin">浅色</tm-button>
+        </view>
+    </tm-sheet>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8 d-block">渐变按钮</tm-text>
+        <view class="gap-15 flex flex-col">
+            <tm-button block :linear="['to right', '#FFEB3A', '#4DEF8E']">按钮</tm-button>
+            <tm-button block :linear="['to right', '#00B960', '#00552C']">按钮</tm-button>
+            <tm-button block :linear="['to right', '#DD7BFF', '#FF6C6C']">按钮</tm-button>
+            <tm-button block :linear="['to right', '#FFC328', '#E20000']">按钮</tm-button>
+        </view>
+    </tm-sheet>
+</template>
+
+<script setup>
+import { ref } from "vue";
+</script>
+
+<style></style>

package/data/examples/calendar-multiple.vue

@@ -0,0 +1,57 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">日历 tmCalendarMultiple</tm-text>
+			<tm-text class="" color="#999999">
+				可以多选，单选，同天不可选（酒店）模式
+			</tm-text>
+		</tm-sheet>
+
+
+		<tm-sheet :padding="0" class="overflow">
+            <tm-calendar-multiple head-bg-color="primary" v-model:currentDate="currentDate" 
+			:date-style="dateStyle"
+			head-font-color="#fff" :seekDay="6" v-model="dates" model="range" ></tm-calendar-multiple>
+			<view class="pa-16">
+				<tm-button block @click="setdate">赋值</tm-button>
+			</view>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">单选模式</tm-text>
+			<tm-text class="mb-n8" color="#999999">
+				{{days}}
+			</tm-text>
+		</tm-sheet>
+		<tm-sheet :padding="0" class="overflow">
+			<tm-calendar-multiple color="error" head-bg-color="error" head-font-color="#fff" :multipleMax="1" :seekDay="6" v-model="days" model="day" ></tm-calendar-multiple>
+		</tm-sheet>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref,nextTick } from "vue"
+const dateStyle = ref<TM.tmCalendarDateStyle_type[]>([])
+const dates = ref<string[]>([])
+const currentDate = ref<string>('')
+const days = ref<string[]>([])
+
+const setdate = ()=> {
+	dates.value = ['2024-5-1','2024-5-8']
+	currentDate.value = "2024-5-1"
+	nextTick(()=>{
+		dateStyle.value = [
+			{ date: '2024-5-3', color: '#00aa7f', label: '推荐', fontColor: 'white' },
+			{ date: '2024-5-20', label: '完成', fontColor: 'orange' },
+			{ date: '2024-5-21', label: '爆满', fontColor: 'red' },
+			{ date: '2024-5-31', label: '禁用' },
+			{ date: '2024-5-18', dot: true },
+			{ date: '2024-5-17', dot: true, dotColor: "orange", dotLabel: "36" },
+			{ date: '2024-5-1', dot: true, dotColor: "#52c428", dotLabel: "假", label: "劳动节", fontColor: "#52c428" },
+			{ date: '2024-5-4', dot: true, dotColor: "#aa55ff", dotLabel: "休", label: "劳动节", fontColor: "#52c428" },
+		]
+	})
+}
+
+</script>
+
+<style></style>

package/data/examples/cell.vue

@@ -0,0 +1,39 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b d-block">列表 tmCell</tm-text>
+			<tm-text class="" color="#999999">
+				承载通用列表使用
+			</tm-text>
+		</tm-sheet>
+		<tm-cell url="/pages/index/button" icon="apps-line" title="常见组件库"></tm-cell>
+		<tm-cell url="/pages/index/icon" icon="archive-2-line" label="+￥32非卡片模式非卡片模式" label-color="red"
+			icon-color="red"></tm-cell>
+		<tm-cell title="APP赊购" url="/pages/index/tag" icon="price-tag-3-line" label="tmx测试"
+			icon-color="green"></tm-cell>
+
+		<tm-sheet :margin="['24']">
+			<tm-text font-size="32" class=" text-weight-b d-block">非卡片模式 Cell</tm-text>
+			<tm-text class="" color="#999999">
+				底边线可以左对齐或者右内对齐。
+			</tm-text>
+		</tm-sheet>
+
+		<tm-sheet :padding="['0']" class="overflow">
+			<tm-cell :bottomBorderInsert="true" :card="false" url="/pages/index/button" icon="stack-line"
+				desc="UTS版本tmui组件库,高质量库" title="常见组件库"></tm-cell>
+			<tm-cell title="程序设置" :bottomBorderInsert="true" :card="false" url="/pages/index/icon"
+				icon="price-tag-3-line" label="+￥32" label-color="red" icon-color="red"></tm-cell>
+			<tm-cell title="美丽的国度" :bottomBorderInsert="true" :card="false" icon="chat-smile-2-line"
+				url="/pages/index/tag" label="tmx测试" icon-color="orange"></tm-cell>
+			<tm-cell title="标签页面" :bottomBorderInsert="true" :card="false" :show-bottom-border="false"
+				icon="calendar-schedule-line" url="/pages/index/tag" label="tmx测试" icon-color="orange"></tm-cell>
+		</tm-sheet>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+</script>
+
+<style></style>

package/data/examples/checkbox.vue

@@ -0,0 +1,71 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">单选框</tm-text>
+			<tm-text class="mb-n8" color="#999999">
+				可单单独使用,也可单选框组合使用
+			</tm-text>
+		</tm-sheet>
+
+		<tm-sheet :margin="['24']">
+			<tm-text font-size="32" class=" text-weight-b d-block mb-n8">单独使用</tm-text>
+			<view class="flex flex-row flex-row-center-start gap-10">
+				<tm-checkbox label="苹果"></tm-checkbox>
+				<tm-checkbox color="success" label="梨子"></tm-checkbox>
+				<tm-checkbox color="error" label="香蕉"></tm-checkbox>
+				<tm-checkbox color="warn" label="地瓜"></tm-checkbox>
+			</view>
+		</tm-sheet>
+		<tm-sheet :margin="['24']">
+			<tm-text font-size="32" class=" text-weight-b d-block mb-n8">联合Group使用</tm-text>
+			<tm-checkbox-group @change="onchange" v-model="checkboxValue">
+				<tm-checkbox v-for="(item, index) in ['苹果', '梨子', '香蕉', '地瓜', '花生']" :key="index" :value="item"
+					:label="item"></tm-checkbox>
+			</tm-checkbox-group>
+			<tm-sheet color="info" padding="24" :margin="[0, 24, 0, 0]"><tm-text>{{ checkboxValue }}</tm-text>
+			</tm-sheet>
+		</tm-sheet>
+
+		<tm-sheet :margin="['24']">
+			<tm-text font-size="32" class="text-weight-b d-block">竖向排列(并自定义样式)</tm-text>
+		</tm-sheet>
+		<tm-checkbox-group v-model="checkboxValue2" direction="column">
+			<tm-sheet :color="checkboxValue2.includes(item.id) ? 'primary' : 'white'" v-for="(item, index) in listview"
+				:key="index" :margin="[24, 0]" padding="0" class="flex-1">
+				<tm-checkbox class="pa-20" :color="checkboxValue2.includes(item.id) ? 'warn' : 'primary'"
+					:value="item.id">
+					<template v-slot:label="checked">
+						<tm-text :color="checkboxValue2.includes(item.id) ? '#fff' : '#333'">{{ item.text }}</tm-text>
+					</template>
+				</tm-checkbox>
+			</tm-sheet>
+		</tm-checkbox-group>
+
+		<tm-sheet :margin="['24']">
+			<tm-text font-size="32" class=" text-weight-b d-block mb-n8">限制数量为2</tm-text>
+			<tm-checkbox-group :max="2">
+				<tm-checkbox v-for="(item, index) in ['苹果', '梨子', '香蕉', '地瓜', '花生']" :key="index" :value="item"
+					:label="item"></tm-checkbox>
+			</tm-checkbox-group>
+
+		</tm-sheet>
+
+		<view class="py-20"></view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+const checkboxValue = ref<string[]>([])
+const checkboxValue2 = ref<Array<string | number | boolean>>([])
+const listview = ref<Array<Record<string, any>>>([
+	{ text: "科技创新引领制造业高质量发展", id: 1 },
+	{ text: "明确提出“建立保持制造业合理比重投入机制”。这些都为以科技创新引领制造业高质量发展指明了道路和方向。", id: 2 },
+	{ text: "改造提升传统产业，培育壮大新兴产业，布局建设未来产业，完善现代化产业体系", id: 3 },
+])
+const onchange = (val: any) => {
+	// console.log(val,'**')
+}
+</script>
+
+<style></style>

package/data/examples/circle-progress.vue

@@ -0,0 +1,69 @@
+<!--
+  - Copyright (c) 2025. tmzdy by @https://tmui.design
+  -->
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>
+
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="32" class=" text-weight-b mb-16 d-block">圆环进度条 TmCircleProgress</tm-text>
+            <tm-text class="" color="#999999">
+                配置灵活，自由度高。
+            </tm-text>
+        </tm-sheet>
+
+
+        <tm-sheet class="flex gap-10 flex-row">
+            <tm-circle-progress :model-value="50" line-width="20" color="primary"></tm-circle-progress>
+            <tm-circle-progress :model-value="50" line-width="16" color="warn"></tm-circle-progress>
+            <tm-circle-progress :model-value="50" line-width="8" color="error"></tm-circle-progress>
+            <tm-circle-progress :model-value="50" label-color="#FF6C6C"
+            linear-color="linear-gradient(to right, #DD7BFF 0%, #FF6C6C 100%)"></tm-circle-progress>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="32" class=" text-weight-b mb-n8 d-block">改变它的起始角度</tm-text>
+
+            <view class="flex gap-10">
+                <tm-circle-progress :model-value="50" :start-angle="-90"></tm-circle-progress>
+                <tm-circle-progress :model-value="50" :start-angle="90"></tm-circle-progress>
+                <tm-circle-progress :model-value="50" :start-angle="180"></tm-circle-progress>
+            </view>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="32" class=" text-weight-b n8 d-block">受控及动画演示</tm-text>
+            <tm-text color="#999999" class=" mb-n8 ">
+                演示标签插槽，状态自定义，渐变，自定颜色等属性。
+            </tm-text>
+            <view class="flex flex-row gap-10 mt-n8">
+                <tm-circle-progress v-model="value"></tm-circle-progress>
+                <tm-circle-progress v-model="value" :color="value > 50 ? 'success' : 'primary'"></tm-circle-progress>
+                <tm-circle-progress v-model="value" :color="value > 50 ? 'success' : 'warn'">
+                    <template v-slot:default="{ value, percentage }">
+                        <tm-icon color="success" v-if="percentage > 80" name="checkbox-circle-line"></tm-icon>
+                        <tm-icon color="warn" v-else name="close-circle-line"></tm-icon>
+                    </template>
+                </tm-circle-progress>
+                <tm-circle-progress v-model="value" label-color="#4DEF8E"
+                    linear-color="linear-gradient(to right, #FFEB3A 0%, #4DEF8E 100%)"></tm-circle-progress>
+
+            </view>
+            <view class="flex flex-row gap-10 mt-n8">
+                <tm-tag @click="value = 10">10</tm-tag>
+                <tm-tag @click="value = 50">50</tm-tag>
+                <tm-tag @click="value = 100">100</tm-tag>
+            </view>
+        </tm-sheet>
+
+
+    </view>
+
+</template>
+
+<style scoped></style>

package/data/examples/code-input.vue

@@ -0,0 +1,36 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-8">验证码输入 tmCodeInput</tm-text>
+			<tm-text class="" color="#999999">提供了两种方式，自带输入框输入，以及配合我的keyborad键盘。</tm-text>
+		</tm-sheet>
+
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">自动拉起系统键盘</tm-text>
+			<tm-code-input v-model="value" @confirm="ok" gutter="4" :maxlength="6" width="88" height="88"
+				:autoFocus="true"></tm-code-input>
+		</tm-sheet>
+
+		<!-- 		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">关闭系统键盘使用组件键盘</tm-text>
+			<tm-code-input place-shape="line" @click="showkey=true" @confirm="showkey = false" v-model="value" :useSysKeyborad="false" skin="fill"></tm-code-input>
+		</tm-sheet>
+		<tm-keyboard-number :max-len="4" v-model:modelShow="showkey" v-model="value"></tm-keyboard-number> -->
+		<view style="height: 400px;"></view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { onReady } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+const value = ref("")
+const ok = () => {
+	uni.showToast({
+		title: "验证成功",
+		mask: true
+	})
+}
+
+</script>
+
+<style></style>

package/data/examples/collapse.vue

@@ -0,0 +1,76 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-8">折叠面板 Collapse</tm-text>
+            <tm-text class="" color="#999999">允许单开，和多开。同步的值不管你提供的是什么类型,最终会被同步成数组.</tm-text>
+        </tm-sheet>
+        <tm-sheet :padding="0" class=" overflow">
+            <tm-collapse>
+                <tm-collapse-item left-icon="settings-line" name="1" title="系统设置">
+                    <tm-text class="line-10">
+                        在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+                        根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+                    </tm-text>
+                    <view class="fletm-1">
+                        <tm-image width="100%"
+                            src="https://picsum.photos/800/400?random=9"></tm-image>
+                    </view>
+                </tm-collapse-item>
+                <tm-collapse-item :showBottomLine="false" left-icon="question-line" name="2"
+                    title="交易帮助信息提示交易帮助信息提示交易交易帮助信息提示帮助信息提示交易帮助信息提示">
+                    <tm-text class="line-10">
+                        在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+                        根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+                    </tm-text>
+                </tm-collapse-item>
+            </tm-collapse>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b ">只能展开一个</tm-text>
+        </tm-sheet>
+
+        <tm-sheet :padding="0" class=" overflow">
+            <tm-collapse :multiple="false">
+                <tm-collapse-item left-icon="mail-open-fill" name="3" title="如何提高低成本的效率">
+                    <tm-text class="">
+                        在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+                        根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+                    </tm-text>
+                </tm-collapse-item>
+                <tm-collapse-item left-icon="mail-send-fill" name="1" title="如何使用本UI组件库,会很难吗？">
+                    <tm-text class="line-10">
+                        在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+                        根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+
+                    </tm-text>
+                    <view class="">
+                        <tm-image width="100%"
+                            src="https://picsum.photos/800/400?random=9"></tm-image>
+                    </view>
+                </tm-collapse-item>
+                <tm-collapse-item :disabled="true" left-icon="cloud-fill" name="6" title="如何使用本UI组件库,会很难吗？">
+                    <tm-text class="line-10">
+                        在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+                        根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+                    </tm-text>
+
+                </tm-collapse-item>
+                <tm-collapse-item :showBottomLine="false" left-icon="bar-chart-2-fill" name="2" title="如何提高低成本的效率">
+                    <tm-text class="line-10">
+
+                        在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+                        根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+                    </tm-text>
+                </tm-collapse-item>
+            </tm-collapse>
+        </tm-sheet>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+</script>
+
+<style></style>

package/data/examples/countdown.vue

@@ -0,0 +1,39 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-8">倒计时 tmCountdown</tm-text>
+			<tm-text class=""  color="#999999" >倒计时，可以精确到秒，毫秒，尽量通过插槽来布局样式。</tm-text>
+		</tm-sheet>
+		<tm-sheet >
+			<view class="flex flex-row flex-row-center-center" >
+				<tm-countdown font-size="40" color="primary" :time="1000*59" v-model:actions="actions"></tm-countdown>
+			</view>
+			<view class="flex flex-row flex-row-center-center mt-n8">
+				<tm-button width="26%" @click="actions = 'play'">开始</tm-button>
+				<tm-button width="26%" @click="actions = 'pause'" class="mx-20">暂停</tm-button>
+				<tm-button width="26%" @click="actions = 'reset'">重置</tm-button>
+			</view>
+		</tm-sheet>
+		
+		<tm-sheet >
+			<view class="flex flex-row flex-row-center-center" >
+				<tm-countdown  font-size="40" color="error" unit="ms" format="SS:MS" :time="1000*5" v-model:actions="actions2"></tm-countdown>
+			</view>
+			<view class="flex flex-row flex-row-center-center mt-n8">
+				<tm-button width="26%" @click="actions2 = 'play'">开始</tm-button>
+				<tm-button width="26%" @click="actions2 = 'pause'" class="mx-20">暂停</tm-button>
+				<tm-button width="26%" @click="actions2 = 'reset'">重置</tm-button>
+			</view>
+		</tm-sheet>
+</view>
+</template>
+
+
+<script lang="ts" setup>
+import {ref} from "vue"
+const actions = ref<"pause" | "play" | "reset" | "">("")
+const actions2 = ref<"pause" | "play" | "reset" | "">("")
+</script>
+<style lang="scss">
+
+</style>

package/data/examples/drawer.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref } from "vue"
+const show = ref(false)
+const beforeClose = () => {
+    return new Promise<boolean>((resolve) => {
+        setTimeout(() => {
+            resolve(true)
+        }, 3000)
+    })
+}
+</script>
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">抽屉 Drawer</tm-text>
+            <tm-text class="mb-n8" color="#999999">
+                提供四个方向的弹出，如果要居中显示，请使用overlay组件。可以设置高为auto,百分比,最大值
+                可以是插槽触发或者变量控制触发
+            </tm-text>
+        </tm-sheet>
+        <tm-sheet class="flex flex-row flex-row-center-between">
+            <tm-drawer style="width:24%" size="80%" position="left">
+                <template #trigger><tm-button :block="true">左弹出</tm-button></template>
+                <tm-picker-date>
+                    <tm-button :block="true">左弹出</tm-button>
+                </tm-picker-date>
+            </tm-drawer>
+            <tm-drawer style="width:24%" position="right">
+                <template #trigger><tm-button :block="true">右弹出</tm-button></template>
+            </tm-drawer>
+            <tm-drawer :swiper-len-close="100" style="width:24%" :show-title="false" :show-close="true" position="top">
+                <tm-text>此弹层有内容开启了事件协商和手势关闭,向上滑一定的距离能关闭弹层。</tm-text>
+                <template #trigger><tm-button :block="true">顶弹出</tm-button></template>
+            </tm-drawer>
+            <tm-drawer style="width:24%" :show-close="true" position="bottom">
+                <template #trigger>
+                    <tm-button :block="true">底弹出</tm-button>
+                </template>
+            </tm-drawer>
+        </tm-sheet>
+
+
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-n8 d-block">嵌套</tm-text>
+            <tm-drawer :show-footer="true" size="auto">
+                <template v-slot:trigger><tm-button color="success" :block="true">打开嵌套</tm-button></template>
+				
+                <tm-drawer size="auto">
+                    <template v-slot:trigger><tm-button :block="true">打开嵌套1</tm-button></template>
+                    <tm-text class="text-size-m text-grey  line-8">当前弹层内容为自动高度</tm-text>
+                    <tm-drawer size="auto">
+                        <template v-slot:trigger><tm-button color="success" :block="true">打开嵌套2</tm-button></template>
+                        <tm-text class="text-size-m text-grey  line-8">当前弹层内容为自动高度</tm-text>
+                    </tm-drawer>
+                </tm-drawer>
+            </tm-drawer>
+
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-n8 d-block">确认前异步执行beforeClose</tm-text>
+            <tm-drawer :beforeClose="beforeClose" :show-footer="true">
+                <template v-slot:trigger><tm-button color="warn" :block="true">打开</tm-button></template>
+                <tm-text>点确认 按钮，会等待3秒再关闭。</tm-text>
+            </tm-drawer>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-10 d-block">默认高度，禁用遮罩关闭</tm-text>
+            <tm-text color="#999999" class="mb-n8 d-block">
+                点击遮罩禁用关闭,同时内容出现弹跳提示
+            </tm-text>
+
+            <tm-drawer :overlayClick="false" :show-close="true" :showCancel="false" size="550rpx" title="请阅读协议"
+                confirmText="我已阅读" position="right">
+                <template #trigger><tm-button :block="true" color="error">禁用遮罩,弹跳提醒</tm-button></template>
+                <tm-text color="#999999">
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                </tm-text>
+            </tm-drawer>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-n8 d-block">底部插槽及变量控制显示</tm-text>
+            <tm-button @click="show = true" :block="true">打开</tm-button>
+            <tm-drawer v-model:show="show" title="内容可滚动" size="30%" position="bottom" :show-footer="true">
+                <tm-text color="#999999">
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                    精致美观的对话框，可全局配置风格
+                </tm-text>
+                <template #footer>
+                    <tm-button @click="show = false" :block="true" color="red" class="flex-1">定义底部插槽</tm-button>
+                </template>
+            </tm-drawer>
+        </tm-sheet>
+
+        <view style="height:50px"></view>
+
+    </view>
+</template>