@cloudbase/weda-ui 2.0.9 → 2.0.12

package/src/configs/components/wxOpenApi/share.json

@@ -8,9 +8,7 @@
         "remarks": "按钮组件的标题",
         "type": "string",
         "x-category": "基础属性",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 1
       },
       "type": {
@@ -37,9 +35,7 @@
           }
         ],
         "x-category": "基础属性",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 2
       },
       "size": {
@@ -62,9 +58,7 @@
           }
         ],
         "x-category": "基础属性",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 3
       },
       "title": {
@@ -75,19 +69,21 @@
         "description": "",
         "remarks": "分享(转发)卡片的标题",
         "x-component": "textarea",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 4
       },
       "image": {
         "title": "{{text('分享图片', help('分享(转发)卡片的图片'))}}",
         "type": "string",
         "x-component": "image",
-        "default": "",
-        "x-platforms": [
-          "MP"
+        "x-rules": [
+          {
+            "message": "请输入合法的图片地址",
+            "pattern": "^(((https?)://)|/resources/)[^\\s]+$"
+          }
         ],
+        "default": "",
+        "x-platforms": ["MP"],
         "description": "",
         "remarks": "分享(转发)卡片的图片",
         "x-category": "基础属性",
@@ -114,9 +110,7 @@
         "description": "",
         "x-component": "page-list",
         "x-component-props": {
-          "hideAddPlatform": [
-            "MP"
-          ]
+          "hideAddPlatform": ["MP"]
         }
       },
       "withParams": {
@@ -154,12 +148,8 @@
     "category": "微信开放能力",
     "categoryOrder": 100,
     "componentOrder": 3,
-    "platform": [
-      "MP"
-    ],
-    "visible": [
-      "APP"
-    ]
+    "platform": ["MP"],
+    "visible": ["APP"]
   },
   "configMeta": {
     "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/wxOpen/Share"

package/src/configs/components/wxOpenApi/userInfo.json

@@ -8,9 +8,7 @@
         "type": "string",
         "x-category": "基础属性",
         "remarks": "按钮组件的标题",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 1
       },
       "type": {
@@ -37,9 +35,7 @@
           }
         ],
         "x-category": "基础属性",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 2
       },
       "size": {
@@ -62,9 +58,7 @@
           }
         ],
         "x-category": "基础属性",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 3
       },
       "usage": {
@@ -86,9 +80,7 @@
         ],
         "description": "声明获取用户个人信息的用途,不超过30个字符,若不填写将导致功能失效",
         "x-component": "textarea",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 4
       },
       "language": {
@@ -112,9 +104,7 @@
           }
         ],
         "x-category": "基础属性",
-        "x-platforms": [
-          "MP"
-        ],
+        "x-platforms": ["MP"],
         "x-index": 5
       }
     }
@@ -124,9 +114,7 @@
       "title": "用户信息授权成功",
       "name": "userinfosuccess",
       "remarks": "弹窗中点击了允许按钮后触发的事件",
-      "x-platforms": [
-        "MP"
-      ],
+      "x-platforms": ["MP"],
       "detail": {
         "avatarUrl": {
           "type": "string",
@@ -149,9 +137,7 @@
       "title": "用户信息授权失败",
       "name": "userinfofail",
       "remarks": "弹窗中点击了拒绝按钮后触发的事件",
-      "x-platforms": [
-        "MP"
-      ]
+      "x-platforms": ["MP"]
     }
   ],
   "meta": {
@@ -161,12 +147,8 @@
     "category": "微信开放能力",
     "categoryOrder": 100,
     "componentOrder": 1,
-    "platform": [
-      "MP"
-    ],
-    "visible": [
-      "APP"
-    ]
+    "platform": ["MP"],
+    "visible": ["APP"]
   },
   "configMeta": {
     "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/wxOpen/UserInfo"

package/src/configs/index.js

@@ -30,6 +30,7 @@ import RichTextView from './components/richtextview.json';
 import Tabs from './components/tabs.json';
 import Calendar from './components/calendar.json';
 import NavLayout from './components/navLayout.json';
+import WedaVideo from './components/wedaVideo.json';
 
 import showToast from './actions/showToast.json';
 import showModal from './actions/showModal.json';
@@ -64,6 +65,7 @@ export const components = {
   Form,
   Textarea,
   Location,
+  WedaVideo,
   // Cells,
   Select,
   Auth,

package/src/docs/common/format.tsx

@@ -45,7 +45,10 @@ export const objFormat = (args: any, type, origin) => {
       }
       transformData.push({
         code: i,
-        title: args[i].title.indexOf('{{')!=-1?args[i]?.title.match(uuidReg)[1]:args[i]?.title,
+        title:
+          args[i].title.indexOf('{{') != -1
+            ? args[i]?.title.match(uuidReg)[1]
+            : args[i]?.title,
         description: args[i]?.remarks || '-',
         type: args[i]?.type || '-',
         default: JSON.stringify(args[i]?.default) || '-',

package/src/docs/common/tableView.css

@@ -157,8 +157,8 @@ colgroup {
 col {
   display: table-column;
 }
-.hash-link{
+.hash-link {
   opacity: 0;
-    padding-left: 0.5rem;
-    transition: opacity var(--ifm-transition-fast);
+  padding-left: 0.5rem;
+  transition: opacity var(--ifm-transition-fast);
 }

package/src/docs/common/tableView.tsx

@@ -48,11 +48,11 @@ function getCompsMeta(key, type, origin) {
         return compsMeta;
       case 'sourceCode':
         if (type && type == 'event') {
-          compsMeta = components[key]['events']||{};
+          compsMeta = components[key]['events'] || {};
         } else if (type && (type == 'attribute' || type == 'slot')) {
-          compsMeta = components[key]['data']['properties']||{};
+          compsMeta = components[key]['data']['properties'] || {};
         } else if (type && type == 'description') {
-          compsMeta = components[key]['meta']||{};
+          compsMeta = components[key]['meta'] || {};
         }
         return compsMeta;
     }
@@ -259,12 +259,22 @@ export default function TableLayoutView({ componentKey, type, origin }) {
       )}
       {type == 'description' && tableView.length > 0 && (
         <>
-        <h2>
-        <a aria-hidden="true"  className="anchor enhancedAnchor_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module" id="适用场景"></a>
-        适用场景
-        <a className="hash-link" href="#适用场景" title="标题的直接链接">#</a>
+          <h2>
+            <a
+              aria-hidden="true"
+              className="anchor enhancedAnchor_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module"
+              id="适用场景"
+            ></a>
+            适用场景
+            <a className="hash-link" href="#适用场景" title="标题的直接链接">
+              #
+            </a>
           </h2>
-        <p>{tableView[0]?.description?tableView[0]?.description:tableView[0]?.desc}</p>
+          <p>
+            {tableView[0]?.description
+              ? tableView[0]?.description
+              : tableView[0]?.desc}
+          </p>
         </>
       )}
       {tableView.length == 0 && <p>无</p>}

package/src/docs/compsdocs/form/FormLocation.mdx

@@ -44,7 +44,7 @@ import TableLayoutView from '../../common/tableView';
 
 ## 限制说明
 
-1. 小程序应用会调用微信官方的[wx.chooseLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html)和[wx.getLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)接口实现定位，需符合小程序限制的类目要求（具体类目在小程序wx.getLocation文档中进行了介绍 [点击查看](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)），并在[微信公众平台](https://mp.weixin.qq.com/)中的「开发」-「开发管理」-「接口设置」模块中，自助开通「打开地图选择位置」和「获取当前的地理位置、速度」接口的权限。![](https://qcloudimg.tencent-cloud.cn/raw/bca4e5d6700f9b16094988b5a97a66fb.png)
+1. 小程序应用会调用微信官方的[wx.chooseLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html)和[wx.getLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)接口实现定位，需符合小程序限制的类目要求（具体类目在小程序 wx.getLocation 文档中进行了介绍 [点击查看](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)），并在[微信公众平台](https://mp.weixin.qq.com/)中的「开发」-「开发管理」-「接口设置」模块中，自助开通「打开地图选择位置」和「获取当前的地理位置、速度」接口的权限。![](https://qcloudimg.tencent-cloud.cn/raw/bca4e5d6700f9b16094988b5a97a66fb.png)
 2. 由于小程序接口限制，小程序下选择用户当前位置，初始化不能获取详细位置。
 
 ## 异常情况说明

package/src/docs/compsdocs/form/FormSelect.mdx

@@ -16,7 +16,6 @@
 
    ![](https://qcloudimg.tencent-cloud.cn/raw/2bc4c77f7470bf5f89538b33f17bf6e2.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/grid/Card.mdx

@@ -12,7 +12,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/66af38eb338dab6a1d7ff9d2d48e48ff.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/grid/Container.mdx

@@ -22,7 +22,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/9cdb80ecd07ea73cbdb0c644cb788208.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/grid/GridLayout.mdx

@@ -12,7 +12,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/6ed4e14bb69eede45c745c845f6f6675.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/grid/ScrollView.mdx

@@ -10,11 +10,11 @@
 
 滚动容器可以实现页面或功能模块的滚动效果，当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时，便会出现滚动条，通过滑动滚动条滑动来查看容器内的全部内容，示例如下:
 
-1. 拖入一个滚动容器组件，将高度设置为300
+1. 拖入一个滚动容器组件，将高度设置为 300
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/15e8ca4864efeda01609b062fc867675.png)
 
-2. 在滚动容器中添加三个图片组件，每个图片组件的高度设为200，这样容器内的组件高度便大于了容器本身的高度，滚动条出现。
+2. 在滚动容器中添加三个图片组件，每个图片组件的高度设为 200，这样容器内的组件高度便大于了容器本身的高度，滚动条出现。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/aca40c58815769adad57f551b994a8fe.png)
 

package/src/docs/compsdocs/grid/Swiper.mdx

@@ -34,7 +34,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/293a179b0b2ed580c97d4e0ba9dcc5a3.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';
@@ -55,4 +54,4 @@ import TableLayoutView from '../../common/tableView';
 
 ## 组件使用限制
 
-需注意，由于小程序端样式限制问题，轮播容器中的图片高度不得设置为auto，否则将无法渲染。
+需注意，由于小程序端样式限制问题，轮播容器中的图片高度不得设置为 auto，否则将无法渲染。

package/src/docs/compsdocs/media/Icon.mdx

@@ -8,7 +8,7 @@
 
 ## 使用说明
 
-可以通过在图标组件的配置区中选择微搭提供的内置icon实现图标的展示效果并调整图标颜色等参数，同时图标组件也支持用户对图标进行自定义的上传。
+可以通过在图标组件的配置区中选择微搭提供的内置 icon 实现图标的展示效果并调整图标颜色等参数，同时图标组件也支持用户对图标进行自定义的上传。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/5cd6ab3affb14dc404ddcd939aa6a220.png)
 

package/src/docs/compsdocs/media/Image.mdx

@@ -10,21 +10,21 @@
 
 ### 展示微搭素材中心图片
 
-在图片组件的配置区中点击icon，即可调起微搭的素材中心，在素材中心上传或选择对应的图片素材后便可以在页面中进行图片的展示。
+在图片组件的配置区中点击 icon，即可调起微搭的素材中心，在素材中心上传或选择对应的图片素材后便可以在页面中进行图片的展示。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/e8f7807bf68597e6f61d7a7fe8517109.png)
 
-### 展示url图片
+### 展示 url 图片
 
-图片组件同样支持对图片url进行渲染展示，仅需在配置区中输入对应的图片url便可以完成图片的渲染。
+图片组件同样支持对图片 url 进行渲染展示，仅需在配置区中输入对应的图片 url 便可以完成图片的渲染。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/d41b668fd07f55df539507474569dbdb.png)
 
 ### 绑定变量实现图片展示
 
-当变量内容为图片url的时候，图片组件支持绑定变量并对其进行渲染,示例如下:
+当变量内容为图片 url 的时候，图片组件支持绑定变量并对其进行渲染,示例如下:
 
-1. 创建一个普通变量，并将其初始值填写为图片的url
+1. 创建一个普通变量，并将其初始值填写为图片的 url
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/bccd4aff2ae2b17b229b9dbec37e24d4.png)
 
@@ -52,4 +52,4 @@ import TableLayoutView from '../../common/tableView';
 
 ## 组件使用限制
 
-需注意，由于小程序端样式限制问题，图片组件的高度不得设置为auto，否则将无法渲染。
+需注意，由于小程序端样式限制问题，图片组件的高度不得设置为 auto，否则将无法渲染。

package/src/docs/compsdocs/model/ModelCreate.mdx

@@ -18,3 +18,27 @@
 ## 事件介绍
 
 无
+
+## 自定义按钮介绍
+
+新增组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
+
+#### 按钮动作
+
+| 按钮动作 | 类型   | 说明                       |
+| -------- | ------ | -------------------------- |
+| 提交     | 内置   | 提交表单                   |
+| 取消     | 内置   | 取消并返回                 |
+| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+#### 新增组件按钮触发返回的 event 对象如下：
+
+> 新增组件
+>
+> ```javascript
+> export default function ({ event, data }) {
+>   const {
+>     data: formValues, // 当前表单的values
+>   } = event.detail.value;
+> }
+> ```

package/src/docs/compsdocs/model/ModelDetail.mdx

@@ -18,3 +18,27 @@
 ## 事件介绍
 
 无
+
+## 自定义按钮介绍
+
+详情组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
+
+#### 按钮动作
+
+| 按钮动作 | 类型   | 说明                       |
+| -------- | ------ | -------------------------- |
+| 编辑     | 内置   | 编辑该条记录               |
+| 删除     | 内置   | 删除该条记录并返回         |
+| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+#### 详情组件按钮触发返回的 event 对象如下：
+
+> 详情组件
+>
+> ```javascript
+> export default function ({ event, data }) {
+>   const {
+>     record, // 当前页面的记录
+>   } = event.detail.value;
+> }
+> ```

package/src/docs/compsdocs/model/ModelTable.mdx

@@ -8,7 +8,6 @@
 
 在创建模型应用、模型页面时，会自动在数据的管理表格页面生成该组件，并与数据的新增/更新/查看页面构建关联关系，实现对应的页面跳转逻辑![](https://qcloudimg.tencent-cloud.cn/raw/d42cd232d5f05c47544286a46bcab537.png)
 
-
 ## 属性介绍
 
 | 属性名     | 类型     | 属性分组       | 默认值      | 说明               |
@@ -22,3 +21,136 @@
 ## 事件介绍
 
 无
+
+## 组件自定义按钮介绍
+
+表格组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具有这种自定义能力的按钮定义为按钮选区。
+
+- 选中**表格组件**以后，右侧属性**按钮配置**里可以支持添加、删除表格顶部以及操作列的按钮，并且自定义按钮的属性。
+
+  ![表格组件](https://qcloudimg.tencent-cloud.cn/raw/dba6efb2352afb2448ad8091e8cf133f.png)
+  ![表格组件](https://qcloudimg.tencent-cloud.cn/raw/009eedc320fe69d7bf11cba07baa7d56.png)
+
+- 其中按钮动作包含内置和自定义两种，新建按钮时默认为“自定义”，详情见下表：
+
+  #### 顶部按钮动作
+
+  | 按钮动作 | 类型   | 说明                       |
+  | -------- | ------ | -------------------------- |
+  | 新建     | 内置   | 新建数据                   |
+  | 删除     | 内置   | 删除所选数据               |
+  | 导出     | 内置   | 导出所选数据               |
+  | 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+  #### 操作列按钮动作
+
+  | 按钮动作 | 类型   | 说明                       |
+  | -------- | ------ | -------------------------- |
+  | 查看     | 内置   | 查看当前行                 |
+  | 编辑     | 内置   | 编辑当前行                 |
+  | 删除     | 内置   | 删除当前行                 |
+  | 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+- 若按钮的动作设置为“自定义”，则需要设置该按钮的自定义事件。方法是鼠标选中该按钮，在右侧的“选区属性”面板中设置 tap（点击时）事件。在执行动作中可以使用平台提供的方法，也可以自定义方法。
+
+![表格组件](https://qcloudimg.tencent-cloud.cn/raw/849d9c57d6c4337ea8ec1a2d947f4cec.png)
+
+- 按钮选区触发条件被触发时会返回该触发条件的 **event** 对象
+
+  ```javascript
+  export default function ({ event, data }) {
+    // event为条件被触发时返回的event对象
+    console.log(event);
+  }
+  ```
+
+  其中，表格组件按钮选区触发返回的 event 对象如下：
+
+  > 顶部按钮的自定义方法
+  >
+  > ```javascript
+  > export default function ({ event, data }) {
+  >   const {
+  >     selectedKeys, // 已选记录的keys
+  >     records, // 查询列表记录
+  >   } = event.detail.value;
+  > }
+  > ```
+  >
+  > 表格操作列的自定义方法
+  >
+  > ```javascript
+  > export default function ({ event, data }) {
+  >   const {
+  >     record, // 当前行的数据
+  >     recordKey, // 当前行的key
+  >   } = event.detail.value;
+  > }
+  > ```
+
+---
+
+## 选区案例参考
+
+![案例demo](https://qcloudimg.tencent-cloud.cn/raw/d29c296609ace6420bc3d89d16c7cc1a.png)
+![案例demo](https://qcloudimg.tencent-cloud.cn/raw/a1a655823a0d98e60017c1271e41eef8.png)
+
+## 选区其他事项
+
+- 选区按钮如需绑定变量，变量值可以参考如下：
+
+```javascript
+[
+  {
+    text: '新建',
+    tooltip: '',
+    type: 'primary',
+    htmlType: 'button',
+    action: 'create',
+    show: true,
+    loading: false,
+    disabled: false,
+  },
+  {
+    text: '删除',
+    tooltip: '',
+    type: 'weak',
+    htmlType: 'button',
+    action: 'del',
+    show: true,
+    loading: false,
+    disabled: false,
+  },
+  {
+    text: '导出',
+    tooltip: '',
+    type: 'weak',
+    htmlType: 'button',
+    action: 'export',
+    show: true,
+    loading: false,
+    disabled: false,
+  },
+  {
+    text: '自定义按钮',
+    tooltip: '',
+    type: 'weak',
+    htmlType: 'button',
+    action: 'custom', // 使用自定义动作时，设置为“custom”
+    show: true,
+    loading: false,
+    disabled: false,
+    selectableBlock: {
+      listenerInstances: [
+        {
+          key: '',
+          trigger: 'tap',
+          instanceFunction: function ({ event, data }) {
+            return app.showModal(); // 选区按钮对应的方法代码，可以使用平台的方法，或者自定义方法 $page.handler.xxx({ event, data })
+          },
+        },
+      ],
+    },
+  },
+];
+```

package/src/docs/compsdocs/model/ModelUpdate.mdx

@@ -8,7 +8,6 @@
 
 在创建模型应用、模型页面时，会自动在数据的更新页面生成该组件，并与数据的新增/查看/管理表格页面构建关联关系，实现对应的页面跳转逻辑
 
-
 ## 属性介绍
 
 | 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
@@ -19,3 +18,27 @@
 ## 事件介绍
 
 无
+
+## 自定义按钮介绍
+
+更新组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
+
+#### 按钮动作
+
+| 按钮动作 | 类型   | 说明                       |
+| -------- | ------ | -------------------------- |
+| 提交     | 内置   | 提交表单                   |
+| 取消     | 内置   | 取消并返回                 |
+| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+#### 更新组件按钮触发返回的 event 对象如下：
+
+> 更新组件
+>
+> ```javascript
+> export default function ({ event, data }) {
+>   const {
+>     data: formValues, // 当前表单的values
+>   } = event.detail.value;
+> }
+> ```

package/src/docs/compsdocs/navmenu/Classification.mdx

@@ -8,17 +8,16 @@
 
 ## 使用说明
 
-使用侧边导航面板组件可以实现页面的左侧Tab切换效果，当在组件配置区点击新增标签时，在大纲树中会生成对应的**内容插槽**，我们可以通过在内容插槽中放置对应组件实现不同Tab的的内容构建，以下文为例:
+使用侧边导航面板组件可以实现页面的左侧 Tab 切换效果，当在组件配置区点击新增标签时，在大纲树中会生成对应的**内容插槽**，我们可以通过在内容插槽中放置对应组件实现不同 Tab 的的内容构建，以下文为例:
 
 1. 在侧边导航面板组件的两个内容插槽中分别添加两个文本组件，并为两个文本组件设置不同的内容
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/0b5640a94e57826585ea975d66b1b56d.png)
 
-2. 可以看到，当进行Tab切换时，不同的Tab便呈现出了不同的文本组件内容
+2. 可以看到，当进行 Tab 切换时，不同的 Tab 便呈现出了不同的文本组件内容
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/3b40f7e41c7e4b42c143119937e24996.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/navmenu/NavBar.mdx

@@ -32,12 +32,21 @@ import TableLayoutView from '../../common/tableView';
 
 ## 限制说明
 
-1. 小程序使用时，需在页面设置-页面样式-小程序导航中奖导航栏样式切换为「自定义样式」，否则小程序页面上方会显示出2个导航栏，同时导航栏中间会留有不可消除的空白间距
+1. 小程序使用时，需在页面设置-页面样式-小程序导航中奖导航栏样式切换为「自定义样式」，否则小程序页面上方会显示出 2 个导航栏，同时导航栏中间会留有不可消除的空白间距
 
-   <img src="https://qcloudimg.tencent-cloud.cn/raw/4a22f88657f801a794fdbba6f9e515bc.png" width="50%" />
+   <img
+     src="https://qcloudimg.tencent-cloud.cn/raw/4a22f88657f801a794fdbba6f9e515bc.png"
+     width="50%"
+   />
 
-   <img src="https://qcloudimg.tencent-cloud.cn/raw/2d6075e2a9941a9cb8964c925253422d.png" width="35%"/>
+   <img
+     src="https://qcloudimg.tencent-cloud.cn/raw/2d6075e2a9941a9cb8964c925253422d.png"
+     width="35%"
+   />
 
-2. 如需在小程序顶部额外附加一个样式合理的导航栏，或者小程序/H5想实现更灵活的导航样式，推荐使用「页头容器」组件来进行导航栏的自定义
+2. 如需在小程序顶部额外附加一个样式合理的导航栏，或者小程序/H5 想实现更灵活的导航样式，推荐使用「页头容器」组件来进行导航栏的自定义
 
-   <img src="https://qcloudimg.tencent-cloud.cn/raw/fac09e42ed3a833d5ee364c78d01fc44.png" width="50%"/>
+   <img
+     src="https://qcloudimg.tencent-cloud.cn/raw/fac09e42ed3a833d5ee364c78d01fc44.png"
+     width="50%"
+   />