tmui-cli 2.0.3 → 2.0.4

package/data/uniappx/component/uni-ui-x/uni-nav-bar.md

@@ -0,0 +1,173 @@
+source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-nav-bar
+
+::: sourceCode
+## uni-nav-bar
+
+自定义导航栏组件
+
+> 本 Component 是 uni ext component，需下载插件：[uni-nav-bar](https://ext.dcloud.net.cn/plugin?id=27897)
+
+自定义导航栏组件
+
+在页面pages.json中关闭原生导航栏后，即使用`"style": {"navigationStyle": "custom"}`，可以使用本组件实现自定义导航栏。
+
+同时注意在pages.json中配置页面style增加属性`disableScroll:true`，即禁止页面滚动。此时只有uni-nav-bar组件的下方才可以滚动。否则页面的回弹bounce效果会把自定义导航栏也拉下来。
+
+本组件自动适配顶部安全区。用padding-top让出顶部状态栏的高度。除去状态栏高度后，本组件的高度为44px。
+
+本组件左右两边默认各让出了6px的边距。也可以在left-class和right-class中自定义边距。
+
+本组件分为left、mid、right 3个区域。
+
+- left区域默认显示一个返回箭头，大小为44*44px。可以通过属性hideDefaultBack来隐藏，也可以传入一个slot name='left'来替代。可以通过left-class来修饰样式。
+- mid区域默认显示title属性设置的标题。也可以传入一个slot name='mid'来替代。其默认宽度为屏幕宽度-两边默认边距-left区域默认宽度-right区域默认宽度。可以通过mid-class来修饰样式。
+- right区域默认不显示内容，可以传入一个slot name='right'来显示自定义内容。right区域默认width也是44px，可以通过right-class来修饰样式。
+
+支持属性：
+- hideDefaultBack: 隐藏返回箭头
+- title: 通过属性方便设置标题。如果传入mid slot，则不生效
+- navigationBarTextStyle: 返回箭头和属性设置的标题，它们的颜色均由该属性控制，可选 white|black
+
+本组件默认没有背景色，即透明，会透显页面的背景色。开发者可通过组件的class自行设置背景色
+
+在小程序端，如果需要规避右上角胶囊按钮，可以参考下方代码设置 margin-right 让出胶囊按钮的宽度和右侧间距。
+
+```html
+<template>
+	<uni-nav-bar title="标题" right-class="nav-right">
+		<template #right>
+			<view :style="{ transform: 'translateX(-' + rightMargin + 'px)' }">
+				<text class="txt-button">right</text>
+			</view>
+		</template>
+	</uni-nav-bar>
+</template>
+
+<style>
+	.nav-right {
+		overflow: visible;
+	}
+
+	.txt-button {
+		width: 44px;
+		height: 44px;
+		line-height: 44px;
+		text-align: center;
+	}
+</style>
+```
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 描述 |
+| :- | :- | :- | :- |
+| hideDefaultBack | boolean | false | 是否隐藏默认的返回箭头。为 true 时需要通过 left 插槽自定义返回按钮 |
+| title | string | "" | 导航栏中间显示的标题文字，若使用 mid 插槽则该属性无效 |
+| navigationBarTextStyle | String as PropType\<"white" \| "black" \| ""> | "" | 导航栏前景色（文字和返回箭头颜色）。非小程序端未传入时会自动读取 pageStyle 的 navigationBarTextStyle |
+| leftClass | string(string.ClassString) | "" | 左侧区域的自定义样式类 |
+| midClass | string(string.ClassString) | "" | 中间区域的自定义样式类 |
+| rightClass | string(string.ClassString) | "" | 右侧区域的自定义样式类 |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/nav-bar/nav-bar.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/nav-bar/nav-bar.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/nav-bar/nav-bar
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/nav-bar/nav-bar
+
+>示例
+```vue
+<template>
+	<uni-nav-bar class="uni-theme-root"></uni-nav-bar>
+	<scroll-view class="page uni-theme-root" style="padding-bottom: var(--uni-safe-area-inset-bottom);">
+		
+		<uni-nav-bar navigationBarTextStyle="black" title="黑色标题"></uni-nav-bar>
+		<uni-nav-bar navigationBarTextStyle="white" title="青色背景白色标题" style="background-color: cyan;"></uni-nav-bar>
+		<uni-nav-bar title="下边带灰线" style="border-bottom: 0.5px #ccc solid;"></uni-nav-bar>
+		<uni-nav-bar hideDefaultBack title="隐藏左侧返回箭头"></uni-nav-bar>
+		<uni-nav-bar title="标题居左" mid-class="left-title"></uni-nav-bar>
+		<uni-nav-bar title="右边有按钮">
+			<template #right>
+				<text class="txt-button" @click="clickButton">⋯</text>
+			</template>
+		</uni-nav-bar>
+		<uni-nav-bar title="右边有2个按钮" right-class="two-buttons">
+			<template #right>
+				<text class="txt-button" @click="clickButton">+</text>
+				<text class="txt-button" @click="clickButton">⋯</text>
+			</template>
+		</uni-nav-bar>
+		<uni-nav-bar title="左边有按钮">
+			<template #left>
+				<text class="txt-button" @click="clickButton">+</text>
+			</template>
+		</uni-nav-bar>
+		<uni-nav-bar title="左右各1个按钮">
+			<template #left>
+				<text class="txt-button" @click="clickButton">+</text>
+			</template>
+			<template #right>
+				<text class="txt-button" @click="clickButton">⋯</text>
+			</template>
+		</uni-nav-bar>
+		<uni-nav-bar>
+			<template #mid>
+				<text class="uni-theme-text">插槽右箭头可以点</text>
+				<text style="padding: 3px;font-size: 10px;" class="uni-theme-text" @click="clickButton">▼</text>
+			</template>
+		</uni-nav-bar>
+		<uni-nav-bar>
+			<template #left>
+				<text class="txt-button" @click="clickButton">+</text>
+			</template>
+			<template #mid>
+				<input class="slot-input" placeholder="左中右都是插槽，中间是input"/>
+			</template>
+			<template #right>
+				<text class="txt-button" @click="clickButton">⋯</text>
+			</template>
+		</uni-nav-bar>
+	</scroll-view>
+</template>
+
+<style>
+.page {
+	flex: 1;
+}
+.left-title{
+	justify-content: flex-start;
+}
+.two-buttons{
+	width: 88px;
+}
+.txt-button{
+	font-weight: bold;
+	width: 44px;
+	height: 44px;
+	line-height: 44px;
+	text-align: center;
+	color: var(--text-color);
+}
+.slot-input {
+	color: #333333;
+	background-color: #ffffff;
+	border-width: 0.5px;
+	border-style: solid;
+	border-color: #cccccc;
+}
+@media (prefers-color-scheme: dark) {
+	.slot-input {
+		color: #ffffff;
+		background-color: #2d2d2d;
+		border-color: rgba(255, 255, 255, 0.2);
+	}
+}
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-nav-bar)

package/data/uniappx/component/uni-ui-x/uni-number-box.md

@@ -0,0 +1,234 @@
+source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-number-box
+
+::: sourceCode
+## uni-number-box
+
+带加减按钮的数字输入框，常见于购物车商品数量选择
+
+> 本 Component 是 uni ext component，需下载插件：[uni-number-box](https://ext.dcloud.net.cn/plugin?id=27896)
+
+带加减按钮的数字输入框，常见于购物车商品数量选择。
+
+### 基本用法
+
+```html
+<uni-number-box v-model="value" />
+```
+
+### 设置范围
+
+```html
+<uni-number-box v-model="value" :min="5" :max="20" />
+```
+
+### 设置步长
+
+```html
+
+<uni-number-box v-model="value" :step="5" />
+
+<uni-number-box v-model="value" :step="0.1" />
+```
+
+### 禁用状态
+
+```html
+<uni-number-box :value="5" :disabled="true" />
+```
+
+### 自定义样式
+
+通过 `btn-class`、`input-class`、`icon-class` 自定义组件样式：
+
+```html
+<uni-number-box v-model="value" btn-class="custom-btn" input-class="custom-input" icon-class="custom-icon" />
+```
+
+```css
+.custom-btn {
+  background-color: #007aff;
+}
+.custom-input {
+  background-color: #e8f4ff;
+  color: #007aff;
+}
+.custom-icon {
+  background-color: #fff;
+}
+```
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 值改变时触发 | value: number |
+| focus | 输入框聚焦时触发 | event: UniInputFocusEvent |
+| blur | 输入框失焦时触发 | event: UniInputBlurEvent |
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |
+
+### 属性 
+| 名称 | 类型 | 描述 |
+| :- | :- | :- |
+| value | number | 输入框当前值，不使用 v-model 时通过该属性传入初始值 |
+| modelValue | number | v-model 绑定值，支持双向绑定 |
+| min | number | 允许输入的最小值 |
+| max | number | 允许输入的最大值 |
+| step | number | 每次点击加/减按钮改变的步长，支持小数 |
+| disabled | boolean | 是否禁用组件，禁用时输入框和加减按钮都不可操作 |
+| btnClass | string(string.ClassString) | 加减按钮的自定义样式类 |
+| inputClass | string(string.ClassString) | 输入框的自定义样式类 |
+| iconClass | string(string.ClassString) | 加减按钮内部图标的自定义样式类 |
+| @change | Function | 值改变时触发，参数为当前值，类型为 number |
+| @focus | Function | 输入框聚焦时触发，参数为事件对象，类型为 UniInputFocusEvent |
+| @blur | Function | 输入框失焦时触发，参数为事件对象，类型为 UniInputBlurEvent |
+| @update:modelValue | Event | v-model 绑定值变化事件，参数为当前值，类型为 number |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/number-box/number-box.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/number-box/number-box.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/number-box/number-box
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/number-box/number-box
+
+>示例
+```vue
+<template>
+	
+	<scroll-view style="flex: 1; padding: 15px;">
+	
+	
+	<view style="padding: 15px;">
+	
+		<text class="page-title">NumberBox 数字输入框</text>
+
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">基础用法：</text>
+			<uni-number-box v-model="data.value1" @change="onChange" />
+			<text class="hint">当前值：{{ data.value1 }}</text>
+		</view>
+
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">设置范围 (min=5, max=20)：</text>
+			<uni-number-box v-model="data.value2" :min="5" :max="20" />
+			<text class="hint">当前值：{{ data.value2 }}</text>
+		</view>
+
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">步长为5 (step=5)：</text>
+			<uni-number-box v-model="data.value3" :step="5" />
+			<text class="hint">当前值：{{ data.value3 }}</text>
+		</view>
+
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">小数步长 (step=0.1)：</text>
+			<uni-number-box v-model="data.value4" :step="0.1" :min="0" :max="10" />
+			<text class="hint">当前值：{{ data.value4 }}</text>
+		</view>
+
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">禁用状态：</text>
+			<uni-number-box :value="5" :disabled="true" />
+		</view>
+
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">自定义按钮样式 (btn-class)：</text>
+			<uni-number-box v-model="data.value5" btn-class="custom-btn" />
+		</view>
+
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">自定义输入框样式 (input-class)：</text>
+			<uni-number-box v-model="data.value6" input-class="custom-input" />
+		</view>
+
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">自定义样式组合 (蓝色主题)：</text>
+			<uni-number-box v-model="data.value7" btn-class="blue-btn" input-class="blue-input" icon-class="blue-icon" />
+		</view>
+
+		
+		<view style="margin-bottom: 20px; background-color: #1a1a1a; padding: 15px; border-radius: 8px;">
+			<text style="color: #fff; margin-bottom: 10px;">暗黑模式：</text>
+			<uni-number-box v-model="data.value8" btn-class="dark-btn" input-class="dark-input" icon-class="dark-icon" />
+			<text style="color: #999; margin-top: 5px;">当前值：{{ data.value8 }}</text>
+		</view>
+
+	
+	</scroll-view>
+	
+	
+	</view>
+	
+</template>
+
+<style>
+.page-title {
+	font-size: 18px;
+	font-weight: bold;
+	color: var(--text-color, #333333);
+	margin-bottom: 20px;
+}
+
+.label {
+	color: var(--text-color, #333333);
+	opacity: 0.75;
+	margin-bottom: 10px;
+}
+
+.hint {
+	color: var(--text-color, #333333);
+	opacity: 0.6;
+	margin-top: 5px;
+}
+
+.custom-btn {
+	background-color: #28a745;
+}
+
+.custom-input {
+	background-color: #fff3cd;
+	color: #856404;
+	width: 80px;
+}
+
+.dark-btn {
+	background-color: #333;
+}
+
+.dark-input {
+	background-color: #333;
+	color: #fff;
+}
+
+.dark-icon {
+	background-color: #fff;
+}
+
+.blue-btn {
+	background-color: #007aff;
+}
+
+.blue-input {
+	background-color: #e8f4ff;
+	color: #007aff;
+}
+
+.blue-icon {
+	background-color: #fff;
+}
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-number-box)

package/data/uniappx/component/uni-ui-x/uni-rate.md

@@ -0,0 +1,151 @@
+source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-rate
+
+::: sourceCode
+## uni-rate
+
+评分组件
+
+> 本 Component 是 uni ext component，需下载插件：[uni-rate](https://ext.dcloud.net.cn/plugin?id=27900)
+
+评分组件，多用于购买商品后，对商品进行评价等场景
+
+### 文件路径
+项目下有一个 /pages/uni-ui/rate/rate.uvue 页面，里面演示了rate组件的各种用法。
+
+### 设计
+
+rate组件是投票评分使用的组件。它使用unicode字符实现，通过修改字体的样式，实现各种效果。
+
+它分2个版本，一个版本是高性能版本，只有一层，不显示灰星，仅显示亮星，亮星不支持小数点，不能点击。适于长列表中显示。
+另一个版本是普通版本，由背景灰星和前景亮星叠加而成，支持小数点，支持点击。
+这2个版本通过属性full来切换。
+
+本组件支持v-model绑定响应式数据。
+
+rate组件有如下属性：
+- full
+	是否显示全部5颗星。当黄色不够5星时，是否填充灰星以达到5星的固定长度。不填充灰星性能更高
+- readonly
+	是否响应点击变化。full属性为false时不生效，即无灰星时一定只读
+- plain
+	灰星是否镂空
+- star-class
+	星星的样式
+- star-style
+	星星的样式
+- star-active-class
+	选中的星星的样式
+- star-active-style
+	选中的星星的样式
+
+rate组件有onChange事件，事件回调中会给出点击触发的新评分值。
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |
+
+### 属性 
+| 名称 | 类型 | 描述 |
+| :- | :- | :- |
+| value | number | 当前评分，取值范围 0~5 的数字 |
+| modelValue | number | v-model 绑定值，支持双向绑定，优先级高于 value |
+| full | boolean | 是否显示完整 5 颗星。为 true 时用灰星填充未选中位置；为 false 时仅显示亮星，性能更高但不支持点击交互 |
+| readonly | boolean | 是否只读，为 true 时不响应点击评分（full 为 false 时始终只读） |
+| plain | boolean | 灰星是否使用镂空样式（☆），为 false 时使用实心灰星（★） |
+| starClass | string(string.ClassString) | 灰星（未选中）的自定义样式类 |
+| starStyle | string | 灰星（未选中）的内联样式 |
+| starActiveClass | string(string.ClassString) | 亮星（选中）的自定义样式类 |
+| starActiveStyle | string | 亮星（选中）的内联样式 |
+| @change | Event | 评分变化事件，参数为评分值，类型为 number |
+| @update:modelValue | Event | v-model 绑定值变化事件，参数为评分值，类型为 number |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/rate/rate.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/rate/rate.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/rate/rate
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/rate/rate
+
+>示例
+```vue
+<template>
+	
+	<scroll-view style="flex: 1;padding: 15px 15px 30px 15px;">
+	
+	
+	<view style="padding: 15px 15px 30px 15px;">
+	
+		<text class="desc">评分组件用于商品评价打分、服务态度评价、用户满意度等场景。\n
+		高性能模式仅有一个text组件，不可修改评分，适合长列表中显示的场景。\n
+		普通模式可以通过点击星星进行评分，且专门调大字号、调宽间距以适合点击。
+		</text>
+		
+		<text class="title">只读评分文字</text>
+		<text style="color: #ffca3e;">★★★★</text>
+		
+		<text class="title">高性能：只读，不显示灰星，不支持小数</text>
+			<uni-rate :value="3.6"/>
+		<text class="title">只读，显示灰星</text>
+			<uni-rate full readonly/>
+		<text class="title">只读，小数4.3</text>
+			<uni-rate full readonly :value="4.3"/>
+		<text class="title">只读，value大于5超限测试</text>
+			<uni-rate full readonly :value="100"/>
+		<text class="title">只读，value小于0超限测试</text>
+			<uni-rate full readonly :value="-1"/>
+		<text class="title">未选中的星星为镂空状态" </text>
+			<uni-rate full :value="3.5" :plain="true" star-class="tap-rate-star" star-active-class="tap-rate-star" />
+		<text class="title">未选中的星星为实心且响应change事件</text>
+			<uni-rate full star-class="tap-rate-star" star-active-class="tap-rate-star" @change="onRateChange" />
+		<text class="title">响应点击并双向绑定响应式变量</text>
+			<uni-rate full v-model="data.vModelRateValue" star-class="tap-rate-star" star-active-class="tap-rate-star" />
+			<text>{{data.vModelRateValue}}</text>
+		<text class="title">只读，不触发change" </text>
+			<uni-rate readonly :value="5" @change="onRateChange" />
+		<text class="title">高性能只读，自定义大小和颜色（style方式）</text>
+			<uni-rate style="font-size: 32px" star-active-style="color:red" :value="4.6" />
+			
+		<text class="title">高性能只读，自定义间隔letter-space（class方式）" </text>
+			<uni-rate :value="4" star-active-class="star-active-class"/>
+		<text class="title">自定义默认颜色和选中颜色 class方式</text>
+			<uni-rate :value="3" full star-class="custom-default tap-rate-star" star-active-class="custom-selected tap-rate-star"/>
+		<text class="title">自定义默认颜色和选中颜色 style方式</text>
+			<uni-rate :value="3" full star-style="color:lightgreen;letter-spacing:8px" star-active-style="color:green"/>
+		<text class="title">只读，程序动态赋值，不触发change</text>
+			<uni-rate :value="data.rateValue" @change="onRateChange"/>
+	
+	</scroll-view>
+	
+	
+	</view>
+	
+</template>
+
+<style>
+.desc {
+	color: var(--text-color, #333333);
+}
+.custom-default{
+	color:black
+}
+.custom-selected{
+	color:red
+}
+.title{
+	font-weight: bold;
+	margin-top: 10px;
+	color: var(--text-color, #333333);
+}
+.star-active-class{
+	letter-spacing: 5px;
+}
+.tap-rate-star{
+	font-size: 32px;
+	letter-spacing: 8px;
+}
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-rate)