tmui-cli 2.0.0 → 2.0.2

package/data/examples/slider-menu.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="flex-1 flex flex-col" style="height: 100%;">
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b d-block">侧边菜单 TmSliderMenu</tm-text>
+			<view>
+				<tm-text>方便侧边菜单右边内容管理，示例写了个双向定位展示的样板，方便大家复制直接使用。样式非常灵活，可以任意定制你想要的格式，也兼容PC端</tm-text>
+			</view>
+		</tm-sheet>
+		<view class="flex-1 mx-n6 round-4 overflow">
+			<tm-slider-menu
+				v-model="defaultSelected"
+				height="100%"
+				:list='list'
+				slider-bg-color="#efefef"
+			>
+				<template v-slot:default="{item}">
+					<view class="sticky t-0 l-0 fulled px-20 white flex flex-row flex-row-center-start text-weight-b"
+						  style="height: 88rpx;background-color: white;">
+						<tm-text font-size="32">#{{item.id}}{{item.title}}</tm-text>
+					</view>
+					<view class="px-20 white flex flex-wrap flex-row gap-10">
+						<view class="flex-shrink flex flex-center"
+							  style="height:120px;width:calc(33% - 20rpx);background-color: #f5f5f5;"
+							  v-for="(item2,index2) in 8" :key="index2">
+							{{item2}}
+						</view>
+					</view>
+				</template>
+
+			</tm-slider-menu>
+		</view>
+	</view>
+
+</template>
+<script setup lang="ts">
+import { ref } from "vue"
+const defaultSelected = ref(2)
+const list = ref([
+	{ id: 1, title: "水果" },
+	{ id: 2, title: "蔬菜" },
+	{ id: 3, title: "肉类" },
+	{ id: 4, title: "海鲜" },
+	{ id: 5, title: "酒水" },
+	{ id: 6, title: "饮料" },
+	{ id: 7, title: "零食" },
+	{ id: 8, title: "水果" },
+	{ id: 9, title: "蔬菜" },
+	{ id: 10, title: "肉类" },
+	{ id: 11, title: "海鲜" },
+	{ id: 12, title: "酒水" },
+	{ id: 13, title: "饮料" },
+	{ id: 14, title: "零食" },
+	{ id: 15, title: "水果" },
+])
+</script>
+
+<style lang="scss">
+page,
+body,
+html {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+</style>

package/data/examples/slider.vue

@@ -0,0 +1,51 @@
+<template>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b d-block">单向滑块 TmSlider</tm-text>
+        <view>
+            <tm-text>分单向和双向滑动条</tm-text>
+        </view>
+    </tm-sheet>
+    
+    <tm-sheet>
+        <view class="mt-n8">
+            <tm-slider v-model="val" ></tm-slider>
+        </view>
+        <view class="mt-n16">
+            <tm-slider v-model="val" color="success" ></tm-slider>
+        </view>
+        <view class="mt-n16">
+            <tm-slider v-model="val" size="36" color="error" btn-size="36" round="36"></tm-slider>
+        </view>
+        <view class="mt-n16">
+            <tm-button @click="val=80" block>手动赋值</tm-button>
+        </view>
+    </tm-sheet>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8 d-block">显示标签及渐变背景</tm-text>
+        <view class="mt-n16">
+            <tm-slider showLabel color="#4DEF8E" btn-size="50" linear-color="linear-gradient(to right, #FFEB3A 0%, #4DEF8E 100%)"></tm-slider>
+        </view>
+    </tm-sheet>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8 d-block">步进值20</tm-text>
+        <view class="mt-n16">
+            <tm-slider showLabel  color="error" :step="20" ></tm-slider>
+        </view>
+    </tm-sheet>
+    <tm-sheet>
+        <tm-text font-size="36"  class="text-weight-b d-block ">双向向滑块 TmSlider</tm-text>
+    </tm-sheet>
+
+     <tm-sheet>
+        <view class="mt-n16">
+            <tm-slider-double showLabel color="#4DEF8E" btn-size="50" linear-color="linear-gradient(to right, #FFEB3A 0%, #4DEF8E 100%)"></tm-slider-double>
+        </view>
+    </tm-sheet>
+    <view style="height: 80px;"></view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const val = ref(50)
+</script>
+<style lang="scss"></style>

package/data/examples/stepper.vue

@@ -0,0 +1,44 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">步进器 Stepper</tm-text>
+            <tm-text class="" color="#999999">可整数，小数步进</tm-text>
+        </tm-sheet>
+
+        <tm-sheet class="flex fletm-row">
+            <tm-stepper width="220"></tm-stepper>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b d-block ">小数点</tm-text>
+        </tm-sheet>
+        <tm-sheet class="flex fletm-row">
+            <tm-stepper :decimal-len="1" :step="0.1" width="220"></tm-stepper>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b d-block ">圆角类型</tm-text>
+        </tm-sheet>
+        <tm-sheet class="flex fletm-row">
+            <tm-stepper :splitBtn="true" :model-value="50" width="220"></tm-stepper>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b d-block ">自动隐藏减号</tm-text>
+        </tm-sheet>
+        <tm-sheet class="flex fletm-row">
+            <tm-stepper :autoHideBtn="true" :splitBtn="true"  width="220"></tm-stepper>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b d-block ">更换颜色</tm-text>
+        </tm-sheet>
+        <tm-sheet class="flex fletm-row">
+            <tm-stepper darkBtnColor="primary" btn-color="primary" btn-font-color="white" font-color="primary"
+                :splitBtn="true" :model-value="10" width="220"></tm-stepper>
+        </tm-sheet>
+
+
+
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+</script>

package/data/examples/steps.vue

@@ -0,0 +1,77 @@
+<!--
+  - Copyright (c) 2025. tmzdy by @https://tmui.design
+  -->
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const current = ref(3)
+const  onChange = (index:number)=>{
+	console.log(index)
+}
+</script>
+
+<template>
+	<tm-sheet>
+		<tm-text class=" text-weight-b  d-block" font-size="32">步骤条 tmSteps</tm-text>
+		<tm-text class="" color="#999999">
+			子组件独立，方便灵活自定义。
+		</tm-text>
+	</tm-sheet>
+
+	<tm-sheet>
+		<tm-text class=" text-weight-b mb-n8 d-block" font-size="32">隐藏标签</tm-text>
+		<tm-steps :model-value="2" :show-footer="false">
+			<tm-steps-item v-for="item in 5" :key="item"></tm-steps-item>
+		</tm-steps>
+	</tm-sheet>
+	<tm-sheet>
+		<tm-text class=" text-weight-b mb-n8 d-block" font-size="32">完全自定义状态</tm-text>
+		<tm-steps :model-value="1" :show-footer="false" icon-size="36">
+			<tm-steps-item v-for="item in 5" :key="item">
+				<template v-slot:icon="{active}" >
+					<tm-sheet
+						:color="active?'primary':'#f5f5f5'"
+						class="flex flex-center" height="100%" margin="0" padding="0" round="50%" width="100%">
+						<tm-text :color="active?'#fff':'#888'" fontSize="22" >{{item}}</tm-text>
+					</tm-sheet>
+				</template>
+			</tm-steps-item>
+		</tm-steps>
+	</tm-sheet>
+	<tm-sheet>
+		<tm-text class=" text-weight-b  d-block" font-size="32">显示标签</tm-text>
+		<tm-text class="mb-n8" color="#999999">
+			自定状态及进度。并允许点击交互改变进度。
+		</tm-text>
+		<tm-steps v-model="current" :disabled="false">
+			<tm-steps-item>注册帐号</tm-steps-item>
+			<tm-steps-item >审核</tm-steps-item>
+			<tm-steps-item active-color="error" active-icon="user-unfollow-line">发放牌证</tm-steps-item>
+			<tm-steps-item active-color="error" active-icon="close-circle-line">结算</tm-steps-item>
+		</tm-steps>
+	</tm-sheet>
+
+	<tm-sheet>
+		<tm-text class=" text-weight-b  d-block" font-size="32">显示标签</tm-text>
+		<tm-text class="mb-n8" color="#999999">
+			自定状态及进度。并允许点击交互改变进度。
+		</tm-text>
+		<tm-steps v-model="current" :disabled="false" :reverse="true" :vertical="true" @change="onChange">
+			<tm-steps-item>注册帐号</tm-steps-item>
+			<tm-steps-item >
+				<template v-slot:default="{active}">
+					<tm-sheet :color="active?'primary':'#fff'" :margin="[0,0,0,16]" shadow="20">
+						<tm-text :color="active?'#fff':''">自定义布局外观</tm-text>
+					</tm-sheet>
+				</template>
+			</tm-steps-item>
+			<tm-steps-item active-color="error" active-icon="user-unfollow-line" desc="发放失败，资料不齐全，请重新提交资料">发放牌证</tm-steps-item>
+			<tm-steps-item active-color="error" active-icon="close-circle-line" desc="无法结算">结算</tm-steps-item>
+		</tm-steps>
+	</tm-sheet>
+</template>
+
+<style scoped>
+
+</style>

package/data/examples/sticky.vue

@@ -0,0 +1,46 @@
+<template>
+  <view >
+    <tm-sticky>
+      <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b  d-block">粘性布局 TmStikcy</tm-text>
+        <view>
+          <tm-text>可以当作页面根节点悬浮,也可以当作局部悬浮总之方便.如果当页面根节点也不影响性能因为只有一个节点.</tm-text>
+        </view>
+      </tm-sheet>
+
+      <tm-sticky-header>
+        <tm-sheet color="success" height="44px" :margin="[24, 0]" :padding="[24, 0]"
+          class="flex flex-row flex-row-center-start">
+          <tm-text color="white" font-size="28" class="text-weight-b d-block ">滑动我被悬浮</tm-text>
+        </tm-sheet>
+      </tm-sticky-header>
+      <tm-sheet margin="24" :height="150"></tm-sheet>
+
+      <tm-sheet :margin="24">
+        <tm-text font-size="28" class="text-weight-b d-block ">通过修改偏移量保持在上个下方</tm-text>
+      </tm-sheet>
+      <tm-sticky-header top="44px">
+        <tm-sheet color="primary" height="44px" :margin="[24, 0]" :padding="[24, 0]"
+          class="flex flex-row flex-row-center-start">
+          <tm-text font-size="28" color="white" class="text-weight-b d-block ">我会在上个悬浮下方</tm-text>
+        </tm-sheet>
+      </tm-sticky-header>
+      <tm-sheet margin="24" height="150"></tm-sheet>
+      <tm-sticky-header>
+        <tm-sheet color="error" height="44px" :margin="[24, 0]" :padding="[24, 0]"
+          class="flex flex-row flex-row-center-start">
+          <tm-text font-size="28" color="white" class="text-weight-b d-block ">我会盖住第一个上方</tm-text>
+        </tm-sheet>
+      </tm-sticky-header>
+
+      <view style="height: 1500px;"></view>
+    </tm-sticky>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+</script>
+
+<style></style>

package/data/examples/switch-slider.vue

@@ -0,0 +1,113 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b mb-8">左滑菜单 SwitchSlider</tm-text>
+			<tm-text class="" color="#999999"> 通过插槽可完全自定义布局，自由度非常高。如果子菜单无法定宽或者被挤夺请写style:flex-shrink: 0;避免。 </tm-text>
+		</tm-sheet>
+		<tm-sheet :padding="['0px']" class="overflow">
+			<tm-switch-slider
+				:status="item.opened"
+				@open="onopen(index)"
+				@close="onclose(index)"
+				height="116"
+				@disabledScrollChange="disablechange"
+				@click="onclick(index)"
+				v-for="(item, index) in testList"
+				:key="index"
+				:disabled="item.disabled"
+			>
+				<tm-cell
+					round="0"
+					tbPadding="16"
+					minHeight="100"
+					:showBottomBorder="false"
+					:card="false"
+					:title="item.title"
+					:desc="item.subtext"
+				></tm-cell>
+				<template #menu>
+					<view class="flex flex-row flex-row-center-end" style="height: 100%">
+						<view @click="share" class="flex flex-row flex-row-center-center" style="width: 110px; background: black; height: 100%">
+							<text class="text-white">分享</text>
+						</view>
+						<view @click="remvoe" class="flex flex-row flex-row-center-center" style="width: 110px; background: red; height: 100%">
+							<text class="text-white">删除</text>
+						</view>
+					</view>
+				</template>
+			</tm-switch-slider>
+		</tm-sheet>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+
+const testList = ref<
+	{
+		title: string
+		subtext: string
+		disabled: boolean
+		opened: boolean
+	}[]
+>([])
+const closeAll = () => {
+	let oldlist = testList.value.slice(0)
+	oldlist = oldlist.map((el, from: number) => {
+		el.opened = false
+		return el
+	})
+	testList.value = oldlist.slice(0)
+}
+const onopen = (index: number) => {
+	let oldlist = testList.value.slice(0)
+	oldlist = oldlist.map((el, from: number) => {
+		if (from != index) {
+			el.opened = false
+		} else {
+			el.opened = true
+		}
+		return el
+	})
+	testList.value = oldlist.slice(0)
+}
+const onclose = (index: number) => {
+	console.log(index)
+}
+const disablechange = () => {
+	console.log('disablechange')
+}
+const onclick = (index: number) => {
+	console.log(index, '--')
+	closeAll()
+}
+const share = () => {
+	console.log('share')
+    uni.showToast({
+        title: '分享',
+        icon: 'success'
+    })
+    closeAll()
+}
+const remvoe = () => {
+	console.log('remvoe')
+    uni.showToast({
+        title: '删除',
+        icon: 'success'
+    })
+    closeAll()
+}
+
+onMounted(() => {
+	for (let i = 0; i < 6; i++) {
+		testList.value.push({
+			title: '标题' + i,
+			subtext: i == 1 ? '被禁用' : '描述' + i,
+			disabled: i == 1,
+			opened: false
+		})
+	}
+})
+</script>
+
+<style lang="scss"></style>

package/data/examples/switch.vue

@@ -0,0 +1,62 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b d-block">开关 tmSwitch</tm-text>
+			<tm-text class="" color="#999999">样式可全局配置，统一修改风格</tm-text>
+		</tm-sheet>
+		<tm-sheet class="flex flex-row gap-10">
+			<tm-switch size="small"></tm-switch>
+			<tm-switch ></tm-switch>
+			<tm-switch @change="onchange" v-model="kaiguan" size="large"></tm-switch>
+		</tm-sheet>
+
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b mb-n8">显示内文字</tm-text>
+			<tm-sheet padding="0" margin="0" class="flex flex-row gap-10">
+				<tm-switch :label='["开", "关"]'></tm-switch>
+				<tm-switch  :label='["ON", "OFF"]'></tm-switch>
+			</tm-sheet>
+		</tm-sheet>
+		
+
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b mb-n8">修改颜色</tm-text>
+			<tm-sheet padding="0" margin="0" class="flex flex-row gap-10">
+				<tm-switch :modelValue="true" color="danger"></tm-switch>
+				<tm-switch :modelValue="true"  color="success"></tm-switch>
+				<tm-switch :modelValue="true" color="error"></tm-switch>
+			</tm-sheet>
+		</tm-sheet>
+		
+
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b mb-n8">状态</tm-text>
+			<tm-sheet padding="0" margin="0"  class="flex flex-row gap-10">
+				<tm-switch :modelValue="true" :disabled="true"></tm-switch>
+				<tm-switch :modelValue="true"  :loading="true"></tm-switch>
+			</tm-sheet>
+		</tm-sheet>
+		
+
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b mb-n8">圆角风格,及修改间隙</tm-text>
+			<tm-sheet padding="0" margin="0"  class="flex flex-row gap-10">
+				<tm-switch round="4" space="6px"></tm-switch>
+				<tm-switch round="6" ></tm-switch>
+			</tm-sheet>
+		</tm-sheet>
+		
+
+		<view class="py-20"></view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+const kaiguan = ref(false)
+const onchange = (open: boolean) => {
+
+}
+</script>
+
+<style></style>

package/data/examples/tabbar.vue

@@ -0,0 +1,41 @@
+<!--
+  - Copyright (c) 2025. tmzdy by @https://tmui.design
+  -->
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const outIndex = ref(2)
+const list: TM.TABBAR_ITEM_INFO[] = [
+	{ title: '首页', icon: 'home-smile-2-line', selectedIcon: 'home-smile-2-fill', dotType: 'dot' },
+	{ title: '分类', icon: 'cloud-line', selectedIcon: 'cloud-fill' },
+	{ title: '购物车', icon: 'shopping-basket-line', selectedIcon: 'shopping-basket-fill' },
+	{ title: '统计数据', icon: 'bar-chart-2-line', selectedIcon: 'bar-chart-2-fill', dotLabel: '99+' },
+	{ title: '我的', icon: 'group-line', selectedIcon: 'group-fill' }
+]
+</script>
+
+<template>
+	
+	<tm-sheet >
+		<tm-text font-size="36" class="text-weight-b d-block">底部导航 TmTabbar</tm-text>
+		<view class="mb-n8">
+		    <tm-text>可以设置凸起，也可以关闭，用于底部导航使用，多页面导航等。</tm-text>
+		</view>
+		<tm-button block @click="outIndex = 3">切换outIndex</tm-button>
+	</tm-sheet>
+	<tm-tabbar
+		:list="list"
+		:outIndex="outIndex"
+		color="rgba(0,0,0,0.64)"
+		out-bg-color="#000000"
+		out-icon-color="#eeeeee"
+		position="fixed"
+		selected-color="#000000"
+	>
+	</tm-tabbar>
+</template>
+
+<style scoped>
+
+</style>

package/data/examples/tabs.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, PropType } from 'vue';
+const data2 = ref(['待配送', '售后中', { id: 'tmui', title: '待收款', dot: 'hot' }])
+const data3 = ref(['待配送', { id: 'tmui', title: '待收款', dot: 22 }, '售后中'])
+const data = ref(['全部',{title:'禁用项',disabled:true}, { id: 'tmui', title: '待收款', dot: 'hot' }, '待配送', '售后中', { title: '已退款', dot: 3 }, '待配送', '售后中', '已退款'])
+
+</script>
+<template>
+    <view>
+        <tm-sheet :margin="['0', '0', 0, 20]">
+            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">标签导航 tmTabs</tm-text>
+            <tm-text class="" color="#999999">tabs标签导航组件,样式非常丰富可以完成你想要的自定义样式.</tm-text>
+        </tm-sheet>
+        <tm-tabs :list="data"></tm-tabs>
+        <tm-sheet :margin="['0', '20', 0, 20]">
+            <tm-text font-size="36" class="text-weight-b">均分</tm-text>
+        </tm-sheet>
+        <tm-tabs item-width="33.33%" :list="data2"></tm-tabs>
+        <tm-sheet :margin="['0', '20', 0, 20]">
+            <tm-text font-size="36" class="text-weight-b">均分线等宽修改激活色</tm-text>
+        </tm-sheet>
+        <tm-tabs item-width="33.33%" gap="0" line-full line-height="2px" active-title-color="warn"
+            :list="data2"></tm-tabs>
+        <tm-sheet :margin="['0', '20', 0, 20]">
+            <tm-text font-size="36" class="text-weight-b">自定背景相关</tm-text>
+        </tm-sheet>
+        <tm-tabs item-width="33.33%" gap="0" line-full line-height="2px" color="primary" dot-bg-color="warn"
+            title-color="#acdaff" active-title-color="white" :list="data3"></tm-tabs>
+        <tm-sheet :margin="['0', '20', 0, 20]">
+            <tm-text font-size="36" class="text-weight-b">使用自定style完全覆盖样式</tm-text>
+        </tm-sheet>
+        <tm-tabs 
+        custom-item-style="color:#000;"
+        active-item-style="background:#f5f5f5"
+        :list="data"></tm-tabs>
+    </view>
+</template>
+<style scoped>
+.tmTabsWrapBox {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 200px;
+    height: 44px;
+}
+</style>

package/data/examples/tag.vue

@@ -0,0 +1,69 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mt-16">标签 TmTag</tm-text>
+            <view class="">
+                <tm-text>样式丰富塑造性好。</tm-text>
+            </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-tag size="xs">极小</tm-tag>
+                <tm-tag size="s">小</tm-tag>
+                <tm-tag size="m">中等</tm-tag>
+                <tm-tag>默认</tm-tag>
+                <tm-tag size="g">大标签</tm-tag>
+            </view>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b flex d-block mb-n8">状态及样式</tm-text>
+            <view class="flex flex-row flex-row-top-start flex-wrap gap-15">
+                <tm-tag :disabled="true">禁用</tm-tag>
+                <tm-tag skin="outlined">outlined</tm-tag>
+                <tm-tag skin="thin">thin</tm-tag>
+                <tm-tag skin="dashed">dashed</tm-tag>
+                <tm-tag>normal</tm-tag>
+                <tm-tag skin="text">text</tm-tag>
+
+            </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-tag icon="thumb-up-fill" round="42" style="padding: 0 24rpx;">图标</tm-tag>
+                <tm-tag icon="reply-line" color="error" size="n">回复</tm-tag>
+                <tm-tag icon="verified-badge-fill" skin="outlined" iconSize="52" size="n" btnIcon></tm-tag>
+                <tm-tag skin="thin" icon="thumb-up-fill">为您点赞</tm-tag>
+                <tm-tag skin="thin" color="info" icon="verified-badge-line">这是一个非常长的小标签</tm-tag>
+                <tm-tag skin="outlined" icon="thumb-up-fill">为您点赞</tm-tag>
+                <tm-tag skin="dashed" color="success" icon="thumb-up-fill">为您点赞</tm-tag>
+
+            </view>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mb-n8 d-block">其它自定样式</tm-text>
+            <view class="flex flex-wrap gap-15">
+                <tm-tag skin="outlined" :round="[20, 0, 20, 0]">加载中</tm-tag>
+                <tm-tag skin="dashed" :round="[20, 0, 20, 0]">圆角半径</tm-tag>
+                <tm-tag color="#4300B1" :linear="['45deg', '#A531DC', '#4300B1']" :round="[20, 0, 20, 0]">渐变</tm-tag>
+                <tm-tag skin="thin">浅色</tm-tag>
+                <tm-tag :linear="['to right', '#FFEB3A', '#4DEF8E']">渐变</tm-tag>
+                <tm-tag :linear="['to right', '#FFC328', '#E20000']">渐变</tm-tag>
+                <tm-tag :linear="['to right', '#DD7BFF', '#FF6C6C']">渐变</tm-tag>
+
+            </view>
+        </tm-sheet>
+
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+</script>
+
+<style></style>

package/data/examples/text.vue

@@ -0,0 +1,38 @@
+<template>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8 d-block">文本 TmText</tm-text>
+        <view>
+            <tm-text>事实上，如果你没有特殊要求可以不用此组件，用自带的text配合我的css库一样比较方便轻巧</tm-text>
+            <tm-text @item-click="testClick" class="line-10" :heightLight="['高亮显示', '正则', '邮箱']"
+                label="支持多文本高亮显示，比如根据正则高亮电话号码，邮箱等，点击后打电话，发邮件。"></tm-text>
+        </view>
+    </tm-sheet>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8 d-block">高亮文本,可自定样式</tm-text>
+        <view>
+            <tm-text>正则电话，邮箱高亮</tm-text>
+            <tm-text @item-click="testClick" height-light-color="red" :height-light-reg="[
+                '1[3456789]\\d{9}',
+                '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}',
+                '《(.*?)》',
+            ]" label="邮箱等，点击后打电话:17970689633，发邮件:qq@qq.com。高文本可以被点击触《服务隐私协议》发事件,高亮事件触发目《隐私协议》前uniappx 3.99有bug待官方修复.">
+            </tm-text>
+        </view>
+    </tm-sheet>
+
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b mb-n8 d-block">使用插槽功能丢失</tm-text>
+        <view>
+            <tm-text :lines="2">
+                使用插槽，当作普通text标签使用，高亮功能和后续的拓展将会失效。
+                使用插槽，当作普通text标签使用，高亮功能和后续的拓展将会失效。
+            </tm-text>
+        </view>
+    </tm-sheet>
+</template>
+<script setup lang="ts">
+const testClick = (text: string) => {
+    uni.showToast({ title: text, icon: "none" });
+};
+</script>
+<style lang="scss"></style>