tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/css/visibility.md

@@ -0,0 +1,198 @@
+## visibility
+
+visibility CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 \<table> 中的行或列。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+visibility: visible | hidden | collapse;
+```
+
+### 值限制
+- enum
+
+### visibility 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| visible | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 元素框可见。 |
+| hidden | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 元素框不可见（不绘制），但仍然影响常规的布局。如果将其子元素的 visibility 设置为 visible，则该子元素依然可见。元素无法获得焦点（例如通过 tab 索引进行键盘导航）。 |
+
+**注意**
+设置 visibility 为 hidden，或设置 display 为 none 都可以隐藏元素。差异是通过 visibility 隐藏元素仍然占据页面位置，通过 display 隐藏元素不占据页面位置。
+
+### 默认值 @default-value 
+ `visible`
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/visibility.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/visibility.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/visibility
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/visibility
+
+>示例
+```vue
+<template>
+  
+  <scroll-view class="uni-theme-root" style="flex: 1">
+  
+    <view class="css-page uni-theme-root" style="flex-grow: 1;">
+      <text class="uni-tips">visibility: {{data.visibility}} ，说明：点击切换</text>
+      <view class="demo-box">
+        <view @click="changeVisibility">
+          <text class="theme-label">view组件: {{data.visibility}}</text>
+          <view class="common" :style="{'visibility': data.visibility}"></view>
+        </view>
+        <view @click="changeVisibility">
+          <text class="theme-label">text组件: {{data.visibility}}</text>
+          <text class="common cyan-label" :style="{'visibility': data.visibility}">文本</text>
+        </view>
+        <view @click="changeVisibility">
+          <text class="theme-label">image组件: {{data.visibility}}</text>
+          <image class="common" :style="{'visibility': data.visibility}" src="/static/test-image/logo.png"></image>
+        </view>
+      </view>
+
+      <view class="uni-common-mb">
+        <text class="uni-title-text uni-common-mt">scroll-view 组件</text>
+        <view class="demo-box">
+          <view>
+            <text class="theme-label">scroll-view: visible</text>
+            <scroll-view class="common" style="visibility: visible;"></scroll-view>
+          </view>
+          <view>
+            <text class="theme-label">scroll-view: hidden</text>
+            <scroll-view class="common" style="visibility: hidden;"></scroll-view>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+      </view>
+
+      
+      <view class="test-container">
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件</text>
+          <text class="uni-info">设置值: {{data.visibilityValue}}</text>
+          <text class="uni-info">获取值: {{data.visibilityActual}}</text>
+          <view class="test-box">
+            <view ref="viewRef" class="common-dynamic test-view" :style="{ visibility: data.visibilityValue }">
+              <text class="cyan-label">view</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件</text>
+          <text class="uni-info">设置值: {{data.visibilityValue}}</text>
+          <text class="uni-info">获取值: {{data.visibilityActualText}}</text>
+          <view class="test-box">
+            <text ref="textRef" class="common-dynamic test-text" :style="{ visibility: data.visibilityValue }">text</text>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件</text>
+          <text class="uni-info">设置值: {{data.visibilityValue}}</text>
+          <text class="uni-info">获取值: {{data.visibilityActualImage}}</text>
+          <view class="test-box">
+            <image ref="imageRef" class="common-dynamic test-image" :style="{ visibility: data.visibilityValue }" src="/static/test-image/logo.png"></image>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt uni-common-mb">
+        <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+        <enum-data :items="visibilityEnum" title="visibility 枚举值" @change="radioChangeVisibility" :compact="true"></enum-data>
+        <input-data :defaultValue="data.visibilityValue" title="visibility 自定义值" type="text" @confirm="inputChangeVisibility"></input-data>
+      </view>
+
+      
+      <view class="uni-common-mb">
+        <text class="theme-label">native-view 组件</text>
+        <view class="demo-box">
+          <view>
+            <text class="theme-label">native-view: visible</text>
+            <test-native-view class="common" style="visibility: visible;"></test-native-view>
+          </view>
+          <view>
+            <text class="theme-label">native-view: hidden</text>
+            <test-native-view class="common" style="visibility: hidden;"></test-native-view>
+          </view>
+        </view>
+      </view>
+      
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+
+
+<style>
+  .theme-label {
+    color: var(--text-color, #333333);
+  }
+
+  .cyan-label {
+    color: #1a1a1a;
+  }
+
+  .common {
+    width: 100px;
+    height: 100px;
+    background-color: cyan;
+  }
+
+  .demo-box {
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-around;
+  }
+
+  .common-dynamic {
+    width: 100px;
+    height: 100px;
+    background-color: cyan;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 100px;
+    background-color: gray;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
+
+```
+
+#### App平台差异
+App平台设置如果元素的 visibility 设置为 hidden，其子元素将不可见，即使子元素的 visibility 设置为 visible 也不可见。
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/visibility)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.visibility)

package/data/uniappx/css/white-space.md

@@ -0,0 +1,162 @@
+## white-space
+
+white-space 属性用于设置如何处理元素中的空白字符（空格、换行符、制表符）以及文本是否自动换行。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 4.0 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+white-space: normal | pre | nowrap | pre-wrap | pre-line | break-spaces | [ <'white-space-collapse'> || <'text-wrap'> || <'white-space-trim'> ];
+```
+
+### 值限制
+- enum
+
+### white-space 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| normal | Web 4.0 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | 换行符（\n）当做空白符处理，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。 |
+| nowrap | Web 4.0 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | 换行符（\n）当做空白符处理，连续的多个空白字符会合并为一个空格，文本遇到边界不会自动换行，行末空白字符移除。 |
+| pre | Web 4.0 / Android 4.81 / iOS 4.81 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界不会自动换行，行末空白字符保留。 |
+| pre-wrap | Web 4.0 / Android 4.81 / iOS 4.81 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留但“不占位置”。 |
+| pre-line | Web 4.0 / Android 4.81 / iOS 4.81 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 换行符（\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。 |
+| break-spaces | Web 4.0 / Android 4.81 / iOS 4.81 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符换行处理。 |
+| keep | Web x / Android 5.0 / iOS 5.0 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 不对空白字符处理，保持原始值。换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。 |
+
+### 默认值 @default-value 
+ | 平台 | 默认值 |
+| :- | :- |
+| uvue-app | keep |
+| uvue-web | pre-line |
+
+ **注意**：W3C 默认值为：normal
+
+### 适用组件 @unix-tags 
+ - text
+- button
+
+### 注意@tips
+#### 空白字符处理不止由white-space属性决定
+对于写在模板中的text组件中的空白字符，在编译阶段，会由编译器先行处理。另外text组件的space属性也会干扰空白字符处理。规则[详见](../component/text.md#空白字符)。
+
+uni-app x中有text组件，这是一个web没有的组件。且uni-app x在非web平台，包括小程序平台，都不支持<br>换行，所以uni-app x设计为text组件中的`\n`默认不会忽略，而是换行。
+不管app平台默认值keep，还是web平台默认值pre-line，都是这个表现。
+
+#### HBuilderX5.0版本调整  
+app平台、web平台调整了 white-space 属性的实现。之前接近小程序的表现，之后按 W3C 标准规范执行。同时为了text组件性能考虑， app 平台新增支持 `keep` 属性值，且默认为 `keep`。
+
+**默认值调整**
+- app-android、app-ios平台新增支持取值 `keep`，默认值由 `normal` 调整为 `keep`  
+- app-harmony平台蒸汽模式（Vapor）支持取值 `keep`，默认值为 `keep`  
+- web平台，默认值由 `normal` 调整为 `pre-line`
+
+**调整前实现规范**  
+- normal（与调整后的pre-line效果一致）  
+  换行符（\\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。  
+- nowrap  
+  换行符（\\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界不会自动换行，行末空白字符移除。  
+- pre  
+  换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界不会自动换行，行末空白字符保留。  
+- pre-wrap  
+  换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。  
+- pre-line  
+  换行符（\\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。  
+- break-spaces  
+  换行符（\\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。  
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/white-space.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/white-space.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/white-space
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/white-space
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view style="flex-grow: 1;">
+      <scroll-view style="padding: 10px 0px; background-color: gray;justify-content: center;" direction="horizontal">
+        <text class="text" :style="{ whiteSpace: data.whiteSpace }">{{data.multiLineText}}</text>
+      </scroll-view>
+      <text>拍平</text>
+      <scroll-view style="padding: 10px 0px; background-color: gray;justify-content: center;" direction="horizontal">
+        <text class="text" :style="{ whiteSpace: data.whiteSpace }" flatten>{{data.multiLineText}}</text>
+      </scroll-view>
+
+      <scroll-view style="flex: 1">
+        <view class="content uni-common-mt">
+          <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+        </view>
+
+        <view class="common-box">
+          
+          <view class="uni-common-mt">
+            <text class="uni-title-text">white-space</text>
+            <text class="uni-info">设置值: {{data.whiteSpace}}</text>
+            <text class="uni-info">获取值: {{data.whiteSpaceActual}}</text>
+            <view class="test-box">
+              <text ref="textRef" class="text test-text" :style="{ whiteSpace: data.whiteSpace }">{{data.multiLineText}}</text>
+            </view>
+          </view>
+
+          
+          <view class="uni-common-mt">
+            <text class="uni-title-text">拍平</text>
+            <text class="uni-info">设置值: {{data.whiteSpace}}</text>
+            <text class="uni-info">获取值: {{data.whiteSpaceActualFlat}}</text>
+            <view class="test-box">
+              <text ref="textRefFlat" class="text test-text-flatten" :style="{ whiteSpace: data.whiteSpace }" flatten>{{data.multiLineText}}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="uni-common-mt uni-common-mb">
+            <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+            <enum-data :items="whiteSpaceEnum" title="white-space 枚举值" @change="radioChangeWhiteSpace" :compact="true"></enum-data>
+            <input-data :defaultValue="data.whiteSpace" title="white-space 自定义值" type="text" @confirm="inputChangeWhiteSpace"></input-data>
+        </view>
+      </scroll-view>
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .text {
+    font-size: 16px;
+    /* 需要设置 align-self text组件才会自适应宽度 */
+    align-self: flex-start;
+  }
+
+  .common-box{
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+  .test-box {
+    width: 180px;
+    height: 200px;
+    background-color: gray;
+    justify-content: center;
+    align-items: center;
+  }
+
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/white-space)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.white-space)

package/data/uniappx/css/width.md

@@ -0,0 +1,300 @@
+## width
+
+width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+width: <viewport-length>{1,2};
+```
+
+### 值限制
+- length
+- percentage
+
+### width 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| auto | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 浏览器将会为指定的元素计算并选择一个宽度。 |
+| fit-content | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 取以下两种值中的较大值：<br/>    <br/>      固有的最小宽度<br/>      固有首选宽度（max-content）和可用宽度（available）两者中的较小值<br/>    <br/>    可表示为：min(max-content, max(min-content, \<length-percentage>)) |
+| max-content | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 元素内容固有的（intrinsic）合适宽度。 |
+| min-content | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 元素内容固有的最小宽度。 |
+
+**注意**
+> 属性值为长度 `<length>` 时，App平台可以不设置单位，Web端必须设置单位，详情参考[长度单位](./README.md#length)。
+
+### 默认值 @default-value 
+ `auto`
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/layout/width.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/layout/width.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/layout/width
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/layout/width
+
+>示例
+```vue
+<template>
+  
+  <scroll-view class="uni-theme-root" style="flex: 1">
+  
+  <view class="uni-theme-root" style="flex-grow: 1;">
+    <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
+    <view>
+      <text>width: 100px</text>
+      <view class="demo-box">
+        <view class="common" style="width: 100px;"></view>
+        <view class="common" style="width: 100px;" flatten></view>
+      </view>
+    </view>
+
+    <view>
+      <text>width: 200rpx</text>
+      <view class="demo-box">
+        <view class="common" style="width: 200rpx;"></view>
+        <view class="common" style="width: 200rpx;" flatten></view>
+      </view>
+    </view>
+
+    <view>
+      <text>width: 30%</text>
+      <view class="demo-box">
+        <view class="common" style="width: 30%;"></view>
+        <view class="common" style="width: 30%;" flatten></view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="uni-title-text">scroll-view 组件</text>
+    </view>
+
+    <view class="demo-box">
+      <scroll-view style="width: 100px; height: 100px; background-color: cyan;">
+        <text class="scroll-view-label">width: 100px</text>
+      </scroll-view>
+      <scroll-view style="width: 200px; height: 100px; background-color: cyan;">
+        <text class="scroll-view-label">width: 200px</text>
+      </scroll-view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+    </view>
+
+    
+    <view class="test-container">
+      <view class="test-item">
+        <text class="uni-subtitle-text">view 组件</text>
+        <text class="uni-info">设置值: {{data.width}}</text>
+        <text class="uni-info">获取值: {{data.widthActual}}</text>
+        <view class="test-box">
+          <view ref="viewRef" class="common test-view" :style="{ width: data.width }">
+            <text class="cyan-label">view</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">text 组件</text>
+        <text class="uni-info">设置值: {{data.width}}</text>
+        <text class="uni-info">获取值: {{data.widthActualText}}</text>
+        <view class="test-box">
+          <text ref="textRef" class="common test-text" :style="{ width: data.width }">text</text>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">image 组件</text>
+        <text class="uni-info">设置值: {{data.width}}</text>
+        <text class="uni-info">获取值: {{data.widthActualImage}}</text>
+        <view class="test-box">
+          <image ref="imageRef" class="common test-image" :style="{ width: data.width }" src="/static/test-image/logo.png"></image>
+        </view>
+      </view>
+    </view>
+
+    
+    <view class="test-container">
+      <view class="test-item">
+        <text class="uni-subtitle-text">view 组件拍平</text>
+        <text class="uni-info">设置值: {{data.width}}</text>
+        <text class="uni-info">获取值: {{data.widthActualFlat}}</text>
+        <view class="test-box">
+          <view ref="viewRefFlat" class="common test-view-flatten" :style="{ width: data.width }" flatten>
+            <text class="cyan-label">view</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">text 组件拍平</text>
+        <text class="uni-info">设置值: {{data.width}}</text>
+        <text class="uni-info">获取值: {{data.widthActualTextFlat}}</text>
+        <view class="test-box">
+          <text ref="textRefFlat" class="common test-text-flatten" :style="{ width: data.width }" flatten>text</text>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">image 组件拍平</text>
+        <text class="uni-info">设置值: {{data.width}}</text>
+        <text class="uni-info">获取值: {{data.widthActualImageFlat}}</text>
+        <view class="test-box">
+          <image ref="imageRefFlat" class="common test-image-flatten" :style="{ width: data.width }" flatten src="/static/test-image/logo.png"></image>
+        </view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt uni-common-mb">
+      <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+      <enum-data :items="widthEnum" title="width 枚举值" @change="radioChangeWidth" :compact="true"></enum-data>
+      <input-data :defaultValue="data.width" title="width 自定义值" type="text" @confirm="inputChangeWidth"></input-data>
+    </view>
+
+    <view class="uni-common-mt uni-common-mb">
+      <text class="uni-title-text">默认宽高规则 (无宽高会不显示或使用默认值)</text>
+    </view>
+
+    <view>
+      <text>空 view - 无宽高，有背景色 (预期不显示)</text>
+      <text class="uni-info">getPropertyValue: width={{emptyElementValues.emptyViewWidth}}, height={{emptyElementValues.emptyViewHeight}}</text>
+      <view class="demo-box">
+        <view ref="emptyViewRef" style="background-color: cyan;"></view>
+        <view ref="emptyViewFlatRef" style="background-color: cyan;" flatten></view>
+      </view>
+    </view>
+
+    <view>
+      <text>空 text - 无文字、无宽高，有背景色</text>
+      <text class="uni-info">getPropertyValue: width={{emptyElementValues.emptyTextWidth}}, height={{emptyElementValues.emptyTextHeight}}</text>
+      <view class="demo-box">
+        <text ref="emptyTextRef" style="background-color: cyan;"></text>
+        <text ref="emptyTextFlatRef" style="background-color: cyan;" flatten></text>
+      </view>
+    </view>
+
+    <view>
+      <text>空 image - 无 src、无宽高，有背景色 (image 有默认宽高)</text>
+      <text class="uni-info">getPropertyValue: width={{emptyElementValues.emptyImageWidth}}, height={{emptyElementValues.emptyImageHeight}}</text>
+      <view class="demo-box">
+        <image ref="emptyImageRef" style="background-color: cyan;"></image>
+        <image ref="emptyImageFlatRef" style="background-color: cyan;" flatten></image>
+      </view>
+    </view>
+
+    <view>
+      <text>空 scroll-view - 无宽高，有背景色</text>
+      <text class="uni-info">getPropertyValue: width={{emptyElementValues.emptyScrollViewWidth}}, height={{emptyElementValues.emptyScrollViewHeight}}</text>
+      <view class="demo-box">
+        <scroll-view ref="emptyScrollViewRef" style="background-color: cyan;"></scroll-view>
+      </view>
+    </view>
+
+    
+    <view class="uni-common-mb">
+      <text>空 native-view - 无宽高，有背景色</text>
+      <text class="uni-info">getPropertyValue: width={{emptyElementValues.emptyNativeViewWidth}}, height={{emptyElementValues.emptyNativeViewHeight}}</text>
+      <view class="demo-box">
+        <native-view ref="emptyNativeViewRef" style="background-color: cyan;"></native-view>
+      </view>
+    </view>
+
+    <view class="uni-common-mb">
+      <text>native-view组件: width: 100px 和 width: 200px</text>
+      <view class="demo-box-native">
+        <view class="container-native">
+          <native-view style="width: 100px; height: 100px;"></native-view>
+        </view>
+        <view class="container-native">
+          <native-view style="width: 200px; height: 100px;"></native-view>
+        </view>
+      </view>
+    </view>
+    
+
+    
+    <view class="container">
+      <text>嵌套子元素 v-deep width: 150rpx</text>
+      <child-width-uvue></child-width-uvue>
+    </view>
+    
+  </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .common {
+    height: 80px;
+    background-color: cyan;
+    color: #1a1a1a;
+  }
+  .demo-box {
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-around;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 80px;
+    background-color: gray;
+  }
+
+  .scroll-view-label {
+    font-size: 12px;
+    line-height: 100px;
+    text-align: center;
+    color: #1a1a1a;
+  }
+
+  .cyan-label {
+    color: #1a1a1a;
+  }
+
+  .demo-box-native {
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .container-native {
+    background-color: cyan;
+  }
+
+  /* #ifdef WEB */
+  .container ::v-deep .box {
+    width: 150px;
+    height: 100px;
+  }
+  /* #endif */
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/width)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.width)