tmui-cli 2.0.3 → 2.0.4

package/data/uniappx/component/form.md

@@ -0,0 +1,378 @@
+::: sourceCode
+## form
+
+> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-form
+
+> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-form
+
+> 组件类型：UniFormElement 
+
+ 表单
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 3.97 | 4.11 | 4.61 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| disabled | boolean | false | Web 4.0 / 微信小程序 x / Android 3.97 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 是否禁用 |
+| report-submit | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 是否返回 formId 用于发送模板消息 |
+| report-submit-timeout | number |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId |
+| @submit | (event: [UniFormSubmitEvent](#uniformsubmitevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.97 / iOS 4.11 / HarmonyOS 4.61 | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |
+| @reset | (event: [UniFormResetEvent](#uniformresetevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.97 / iOS 4.11 / HarmonyOS 4.61 | 表单重置时会触发 reset 事件 |
+
+### 事件
+#### UniFormSubmitEvent
+
+```mermaid
+graph LR
+  
+UniFormSubmitEvent -- Extends --> UniCustomEvent&ltUniFormSubmitEventDetail&gt
+  style UniCustomEvent&ltUniFormSubmitEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniFormSubmitEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniFormSubmitEventDetail
+
+###### UniFormSubmitEventDetail 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| value | UTSJSONObject | 是 |
+
+#### UniFormResetEvent
+
+```mermaid
+graph LR
+  
+UniFormResetEvent -- Extends --> UniCustomEvent&ltUniFormResetEventDetail&gt
+  style UniCustomEvent&ltUniFormResetEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniFormResetEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+
+## form内容项控制逻辑
+
+form组件的内容子组件包括：input、textarea、checkbox、radio、switch、slider，以及负责提交或重置的button组件。
+
+button可以设置form-type属性为submit或reset，点击时会分别触发form的提交或重置。
+
+在表单submit或reset时，这些表单内容子组件的值会被提交或重置。
+
+注意：目前不支持上述组件之外自行添加表单内容子组件。如有自定义组件，则不能使用form组件提交，需自行通过绑定data的方式获取组件值并自行编码提交数据。
+
+### submit策略差异
+
+form 组件的表单提交，微信小程序的实现策略，与浏览器W3C的策略略有差异。目前uni-app(x)在submit时，app和web上的实现与微信小程序相同。具体是：
+
+- uni-app表单提交的数据是一个对象`{"name": "value"}`。而浏览器标准form是数组，每项为 pair，pair[0] 对应name，pair[1] 对应value 。
+- 多个表单子项如果 name 相同，仅保留最后一个表单子项。而浏览器标准form整体是数组，不存在覆盖的情况。
+- 设置 disabled 属性的表单子项，仍然会提交。而浏览器标准form提交时会忽略disabled的表单子项。
+
+注意uni-app(x)编译到web平台，也是按uni-app(x)的策略，而不是浏览器的策略。uni-app(x) 的 web平台使用 uni-app 自己的 form 组件，而不是浏览器的 form 标签。
+
+### reset策略差异
+
+reset在浏览器W3C的策略是还原、重置。
+
+在uni-app(x)中，不同平台的策略不同，有的是`还原`，有的是`清空`。
+
+各平台策略如下：
+
+**uni-app-x**
+
+|App				|Web				|
+|:-:				|:-:				|
+|还原(3.97+)	|还原(4.0+)	|
+
+**uni-app**
+
+|App	|Web	|微信小程序	|支付宝小程序	|百度小程序	|抖音小程序	|
+|:-:	|:-:	|:-:			|:-:				|:-:			|:-:			|
+|清空	|清空	|清空			|还原				|清空			|清空			|
+
+1. 还原初始值
+
+```html
+
+<input name="input1" value="name" />
+
+<switch name="switch1" :checked="true" />
+
+<slider name="slider1" :value="50" :min="10" :max="110" />
+
+<checkbox-group name="loves">
+  <view>
+    <checkbox value="0" /><text>读书</text>
+  </view>
+  <view>
+    <checkbox value="1" :checked="true" /><text>写字</text>
+  </view>
+</checkbox-group>
+```
+
+2. 清空已有值(含初始值和改变后的值)
+
+```html
+
+<input name="input1" value="name" />
+
+<switch name="switch1" :checked="true" />
+
+<slider name="slider1" :value="50" :min="10" :max="110" />
+
+<checkbox-group name="loves">
+  <view>
+    <checkbox value="0" /><text>读书</text>
+  </view>
+  <view>
+    <checkbox value="1" :checked="true" /><text>写字</text>
+  </view>
+</checkbox-group>
+```
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/form/form.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/form/form.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/form/form
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/form/form
+
+>示例
+```vue
+<template>
+  
+  <scroll-view class="scroll-view uni-theme-root">
+  
+    <view class="page uni-theme-root">
+      <form @submit="onFormSubmit" @reset="onFormReset">
+        <view class="uni-form-item">
+          <text class="title">姓名</text>
+          <input class="uni-input form-input" name="nickname" :value="data.nickname" placeholder="请输入姓名" :maxlength="-1" />
+        </view>
+        <view class="uni-form-item">
+          <text class="title">性别</text>
+          <radio-group name="gender" class="flex-row">
+            <view class="group-item">
+              <radio value="0" :checked="data.gender=='0'" /><text class="form-text">男</text>
+            </view>
+            <view class="group-item">
+              <radio value="1" :checked="data.gender=='1'" /><text class="form-text">女</text>
+            </view>
+          </radio-group>
+        </view>
+        <view class="uni-form-item">
+          <text class="title">爱好</text>
+          <checkbox-group name="loves" class="flex-row">
+            <view class="group-item">
+              <checkbox value="0" :checked="data.loves.indexOf('0')>-1" /><text class="form-text">读书</text>
+            </view>
+            <view class="group-item">
+              <checkbox value="1" :checked="data.loves.indexOf('1')>-1" /><text class="form-text">写字</text>
+            </view>
+          </checkbox-group>
+        </view>
+        <view class="uni-form-item">
+          <text class="title">年龄</text>
+          <slider name="age" :value="data.age" :show-value="true"></slider>
+        </view>
+        <view class="uni-form-item">
+          <text class="title">保留选项</text>
+          <view style="display: flex;flex-direction: row;">
+            <switch name="switch" :checked="data.switch" />
+          </view>
+        </view>
+        <view class="uni-form-item">
+          <text class="title">备注</text>
+          <textarea class="comment-textarea" name="comment" :value="data.comment" placeholder="请输入备注" />
+          
+        </view>
+        
+        <view class="uni-form-item flex-row">
+          <text class="picker-title">时区</text>
+          <picker class="picker" name="timeZone" @change="onTimeZoneChange" :value="data.timeZoneIndex" :range="data.timeZoneList">
+            <view class="uni-picker-select-value pickerValue">{{data.timeZoneList[data.timeZoneIndex]}}</view>
+          </picker>
+        </view>
+        
+        <view class="uni-form-item flex-row">
+          <text class="picker-title">多列选择器</text>
+          <picker class="picker pickerMulti" name="picker-mode-multiSelector" mode="multiSelector" @columnchange="onMultiPickerColumnChange"
+            :value="data.multiIndex" :range="data.multiArray">
+            <view class="uni-picker-select-value pickerMultiValue">
+              {{data.multiArray[0][data.multiIndex[0]]}}，{{data.multiArray[1][data.multiIndex[1]]}}，{{data.multiArray[2][data.multiIndex[2]]}}
+            </view>
+          </picker>
+        </view>
+        
+        <view class="uni-form-item flex-row">
+          <text class="picker-title">时间选择器</text>
+          <picker class="picker pickerTime" name="picker-mode-time" mode="time" :value="data.timePickerValue" start="09:01" end="21:01" @change="onTimeChange">
+            <view class="uni-picker-select-value">{{data.timePickerValue}}</view>
+          </picker>
+        </view>
+        <view class="uni-form-item flex-row">
+          <text class="picker-title">日期选择器</text>
+          <picker class="picker pickerDate" name="picker-mode-date" mode="date" :value="data.datePickerValue" :start="data.startDate" :end="data.endDate"
+            @change="onDateChange">
+            <view class="uni-picker-select-value">{{data.datePickerValue}}</view>
+          </picker>
+        </view>
+        <view class="uni-form-item">
+          <text class="title">时间</text>
+          <picker-view class="picker-view" name="time" :value="data.time" indicator-style="height:50px">
+            <picker-view-column>
+              <view class="picker-view-item" v-for="(item,index) in data.hours" :key="index">
+                <text class="picker-view-text">{{item}}时</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column>
+              <view class="picker-view-item" v-for="(item,index) in data.minutes" :key="index">
+                <text class="picker-view-text">{{item}}分</text>
+              </view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+        <view class="flex-row">
+          <button class="btn btn-submit" form-type="submit" type="primary">Submit</button>
+          <button class="btn btn-reset" type="default" form-type="reset">Reset</button>
+        </view>
+      </form>
+      <view class="result">提交的表单数据</view>
+      <textarea class="textarea" :value="formDataText" :maxlength="-1" :auto-height="true"></textarea>
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+
+
+<style>
+  .scroll-view {
+    flex: 1;
+  }
+
+  .page {
+    padding: 15px;
+  }
+
+  .flex-row {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .uni-form-item {
+    padding: 15px 0;
+  }
+
+  .title {
+    margin-bottom: 10px;
+    opacity: 0.8;
+    color: var(--text-color, #333333);
+  }
+
+  .picker-title {
+    opacity: 0.8;
+    color: var(--text-color, #333333);
+  }
+
+  .picker {
+    margin-left: 15px;
+  }
+
+  .group-item {
+    flex-direction: row;
+    margin-right: 20px;
+  }
+
+  .picker-view {
+    width: 200px;
+    height: 320px;
+    margin-top: 10px;
+  }
+
+  .picker-view-item {
+    height: 50px;
+  }
+
+  .picker-view-text {
+    line-height: 50px;
+    text-align: center;
+    color: var(--text-color, #333333);
+  }
+
+  .btn {
+    flex: 1;
+  }
+
+  .btn-submit {
+    margin-right: 5px;
+  }
+
+  .btn-reset {
+    margin-left: 5px;
+  }
+
+  .result {
+    margin-top: 30px;
+    color: var(--text-color, #333333);
+  }
+
+  .comment-textarea,
+  .textarea {
+    color: #333333;
+    background-color: #ffffff;
+  }
+
+  .comment-textarea {
+    padding: 10px;
+  }
+
+  .textarea {
+    margin-top: 5px;
+    padding: 5px;
+  }
+
+  .form-input {
+    color: #333333;
+    background-color: #ffffff;
+  }
+
+  .form-text {
+    color: var(--text-color, #333333);
+  }
+
+  .uni-picker-select-value {
+    height: 41px;
+    padding: 0 13px;
+    font-size: 14px;
+    color: var(--text-color, #333333);
+    background-color: var(--list-background-color,#ffffff);
+    justify-content: center;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .comment-textarea,
+    .textarea,
+    .form-input {
+      color: #ffffff;
+      background-color: #2d2d2d;
+    }
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.form)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/form.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/form.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=form&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=form&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=form&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=form&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=form)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=form&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/functional-page-navigator.md

@@ -0,0 +1,43 @@
+::: sourceCode
+## functional-page-navigator
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| version | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>跳转到的小程序版本，**线上版本必须设置为 release** |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| develop | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 开发版 |
+| trial | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 体验版 |
+| release | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 正式版 |
+| name | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>要跳转到的功能页 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| loginAndGetUserInfo | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | [用户信息功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/user-info.html) |
+| requestPayment | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | [支付功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/request-payment.html) |
+| chooseAddress | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | [收货地址功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/choose-address.html) |
+| chooseInvoice | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | [获取发票功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/choose-invoice.html) |
+| chooseInvoiceTitle | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | [获取发票抬头功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/choose-invoice-title.html) |
+| args | object | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(object)*<br/>功能页参数，参数格式与具体功能页相关 |
+| @success | eventhandler | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>功能页返回，且操作成功时触发， detail 格式与具体功能页相关 |
+| @fail | eventhandler | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>功能页返回，且操作失败时触发， detail 格式与具体功能页相关 |
+| @cancel | eventhandler | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>因用户操作从功能页返回时触发 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.functional-page-navigator)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/functional-page-navigator.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=functional-page-navigator&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=functional-page-navigator&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=functional-page-navigator&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=functional-page-navigator&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=functional-page-navigator)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=functional-page-navigator&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/glass-effect-view.md

@@ -0,0 +1,217 @@
+::: sourceCode
+## glass-effect-view
+
+> 组件类型：UniGlassEffectViewElement 
+
+ 玻璃效果视图容器。iOS 26 及以上使用系统液态玻璃效果，iOS 26 以下降级为系统毛玻璃效果。
+
+本组件适合在iOS26以上制作顶部的左上返回箭头或右上悬浮按钮。
+液态玻璃的tabbar，一般不使用本组件，而是在[pages.json](../collocation/pagesjson.md#pages-tabbar)中配置tabbar的glassEffect属性。
+如果使用本组件实现tabbar，自定义性会强于pages.json的tabbar，但无法实现iOS UITabBar左右滑动item的动效。
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS 系统版本 | iOS(VDOM) | iOS(Vapor) | HarmonyOS |
+| :- | :- | :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 15.0 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 5.25 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+- iOS26以下：组件降级为系统毛玻璃效果，"regular" 映射为系统标准毛玻璃材质，"clear" 映射为更轻、更透明的毛玻璃材质，interactive、tint-color 属性将不生效。
+- 液态玻璃（Liquid Glass）是iOS26特有效果。它和毛玻璃在显示效果、触摸效果上并不一样。如需其他平台上使用毛玻璃效果，应使用css的[backdrop-filter](../css/backdrop-filter.md)
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| glass-style | string | "regular" | Web x / 微信小程序 x / Android x / iOS 系统版本 15.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 玻璃效果样式 |
+| 合法值 | 描述 |
+| :- | :- |
+| regular | 常规玻璃效果 |
+| clear | 更通透的玻璃效果 |
+| interactive | boolean | false | Web x / 微信小程序 x / Android x / iOS 系统版本 26.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 是否启用液态玻璃的交互行为，仅 iOS 26 及以上生效 |
+| tint-color | string(string.ColorString) |   | Web x / 微信小程序 x / Android x / iOS 系统版本 26.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 施加在液态玻璃效果上的着色，仅 iOS 26 及以上生效 |
+
+### 子组件 @children-tags
+支持所有组件
+
+### Tips@tips
+
+- 玻璃材质需要实时采样和合成背景内容。大量创建、重叠或在长列表中频繁复用玻璃组件可能增加 GPU 合成开销造成卡顿。
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/glass-effect-view/glass-effect-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/glass-effect-view/glass-effect-view.uvue) 
+>
+> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 
+
+::: preview
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/glass-effect-view/glass-effect-view
+```uvue
+<template>
+  <page-head title="glass-effect-view"></page-head>
+  <scroll-view style="flex: 1">
+    <view class="uni-padding-wrap uni-common-mt">
+      <text class="uni-title-text">玻璃效果预览</text>
+      <view class="stage">
+        <view class="color-row">
+          <view class="color-block color-red"></view>
+          <view class="color-block color-yellow"></view>
+          <view class="color-block color-green"></view>
+          <view class="color-block color-blue"></view>
+          <view class="color-block color-purple"></view>
+        </view>
+        <text class="stage-text stage-text-top">GLASS</text>
+        <text class="stage-text stage-text-bottom">iOS</text>
+        <glass-effect-view
+          v-if="data.glassStyle == 'regular'"
+          class="glass-panel"
+          glass-style="regular"
+          :interactive="data.interactive"
+          :tint-color="data.tintColor">
+          <view class="glass-content">
+            <text class="glass-title">regular</text>
+            <text class="glass-detail">interactive: {{ data.interactive }}</text>
+            <text class="glass-detail">tint: {{ data.tintColor }}</text>
+          </view>
+        </glass-effect-view>
+        <glass-effect-view
+          v-else
+          class="glass-panel"
+          glass-style="clear"
+          :interactive="data.interactive"
+          :tint-color="data.tintColor">
+          <view class="glass-content">
+            <text class="glass-title">clear</text>
+            <text class="glass-detail">interactive: {{ data.interactive }}</text>
+            <text class="glass-detail">tint: {{ data.tintColor }}</text>
+          </view>
+        </glass-effect-view>
+      </view>
+    </view>
+
+    <view class="content">
+      <enum-data
+        title="glass-style 玻璃效果样式"
+        :items="data.glassStyleItems"
+        @change="changeGlassStyle"></enum-data>
+      <boolean-data
+        title="interactive 启用交互行为"
+        :defaultValue="false"
+        @change="changeInteractive"></boolean-data>
+      <enum-data
+        title="tint-color 玻璃效果着色"
+        :items="data.tintColorItems"
+        @change="changeTintColor"></enum-data>
+      <view class="bottom-space"></view>
+    </view>
+  </scroll-view>
+</template>
+
+<style>
+  .stage {
+    position: relative;
+    height: 300px;
+    margin-top: 12px;
+    overflow: hidden;
+    border-radius: 8px;
+    background-color: #ffffff;
+  }
+
+  .color-row {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    flex-direction: row;
+  }
+
+  .color-block {
+    flex: 1;
+  }
+
+  .color-red {
+    background-color: #ff453a;
+  }
+
+  .color-yellow {
+    background-color: #ffd60a;
+  }
+
+  .color-green {
+    background-color: #30d158;
+  }
+
+  .color-blue {
+    background-color: #0a84ff;
+  }
+
+  .color-purple {
+    background-color: #bf5af2;
+  }
+
+  .stage-text {
+    position: absolute;
+    font-size: 48px;
+    font-weight: 700;
+    color: #ffffff;
+  }
+
+  .stage-text-top {
+    left: 18px;
+    top: 18px;
+  }
+
+  .stage-text-bottom {
+    right: 18px;
+    bottom: 18px;
+  }
+
+  .glass-panel {
+    position: absolute;
+    left: 42px;
+    right: 42px;
+    top: 74px;
+    height: 152px;
+    border-radius: 28px;
+    overflow: hidden;
+  }
+
+  .glass-content {
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .glass-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: #111111;
+  }
+
+  .glass-detail {
+    margin-top: 8px;
+    font-size: 13px;
+    color: #222222;
+  }
+
+  .content {
+    margin-top: 10px;
+  }
+
+  .bottom-space {
+    height: 30px;
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.glass-effect-view)
+- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=glass-effect-view&doc_type=miniprogram)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=glass-effect-view&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=glass-effect-view&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=glass-effect-view&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=glass-effect-view&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=glass-effect-view)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=glass-effect-view&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)