fix(backtop,badge,button,popover,tag,watermark): 文档调整，demo修改 (jd-open…

…source#1624)
yangbinji · Sep 5, 2022 · a84791d · a84791d
1 parent 508f84c
commit a84791d
Show file tree

Hide file tree

Showing 14 changed files with 92 additions and 187 deletions.
diff --git a/src/packages/__VUE/backtop/doc.en-US.md b/src/packages/__VUE/backtop/doc.en-US.md
@@ -48,10 +48,22 @@ app.use(Icon);
     <div class="text-data">test data22</div>
     <div class="text-data">test data23</div>
     <div class="text-data">test data24</div>
-    <nut-backtop ></nut-backtop>
+    <nut-backtop @click="handleClick" ></nut-backtop>
   </div>
 </template>
+<script>
+  export default {
+    setup() {
+      const handleClick = () => {
+        console.log('backtop');
+      };
 
+      return {
+        handleClick
+      };
+    }
+  };
+</script>
 <style lang="scss" scoped>
 .demo {
   .text-data {
@@ -189,82 +201,9 @@ app.use(Icon);
 </style>
 ```
 :::
-
-### Click
-
-:::demo
-```html
-<template>
-  <div class="demo" id="elId">
-    <div class="text-data">test data1</div>
-    <div class="text-data">test data2</div>
-    <div class="text-data">test data3</div>
-    <div class="text-data">test data4</div>
-    <div class="text-data">test data5</div>
-    <div class="text-data">test data6</div>
-    <div class="text-data">test data7</div>
-    <div class="text-data">test data8</div>
-    <div class="text-data">test data9</div>
-    <div class="text-data">test data10</div>
-    <div class="text-data">test data11</div>
-    <div class="text-data">test data12</div>
-    <div class="text-data">test data13</div>
-    <div class="text-data">test data14</div>
-    <div class="text-data">test data15</div>
-    <div class="text-data">test data16</div>
-    <div class="text-data">test data17</div>
-    <div class="text-data">test data18</div>
-    <div class="text-data">test data19</div>
-    <div class="text-data">test data20</div>
-    <div class="text-data">test data21</div>
-    <div class="text-data">test data22</div>
-    <div class="text-data">test data23</div>
-    <div class="text-data">test data24</div>
-    <nut-backtop @click="handleClick" ></nut-backtop>
-  </div>
-</template>
-
-<script>
-  export default {
-    setup() {
-      const handleClick = () => {
-        console.log('backtop');
-      };
-
-      return {
-        handleClick
-      };
-    }
-  };
-</script>
-
-<style lang="scss" scoped>
-.demo {
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
-  }
-}
-</style>
-```
-:::
-
-
 ### API
 
-### Prop  
+### Props
 
 | Attribute            | Description                 | Type    | Default  |
 |-----------------|------------------------------------------|---------|---------|
@@ -276,7 +215,13 @@ app.use(Icon);
 | is-animation         | Whether there is animation, mutually exclusive with the duration parameter   | Boolean  | `true`       |  
 | duration         | Set animation duration   | Number  | `1000`       |                                          
 
-### Event
+### Events
 | Event  | Description     | Arguments    |
 |-------|----------|-------------|
-| click | Emitted when component is clicked | event: MouseEvent |
+| click | Emitted when component is clicked | event: MouseEvent |
+
+### Slots
+
+| Name    | Description         |
+|---------|--------------|
+| default | 	The default slot is used to customize the content |
diff --git a/src/packages/__VUE/backtop/doc.md b/src/packages/__VUE/backtop/doc.md
@@ -48,10 +48,23 @@ app.use(Icon);
     <div class="text-data">我是测试数据22</div>
     <div class="text-data">我是测试数据23</div>
     <div class="text-data">我是测试数据24</div>
-    <nut-backtop ></nut-backtop>
+    <nut-backtop @click="handleClick" ></nut-backtop>
+
   </div>
 </template>
+<script>
+  export default {
+    setup() {
+      const handleClick = () => {
+        console.log('触发返回顶部');
+      };
 
+      return {
+        handleClick
+      };
+    }
+  };
+</script>
 <style lang="scss" scoped>
 .demo {
   .text-data {
@@ -190,81 +203,11 @@ app.use(Icon);
 ```
 :::
 
-### click事件
-
-:::demo
-```html
-<template>
-  <div class="demo" id="elId">
-    <div class="text-data">我是测试数据1</div>
-    <div class="text-data">我是测试数据2</div>
-    <div class="text-data">我是测试数据3</div>
-    <div class="text-data">我是测试数据4</div>
-    <div class="text-data">我是测试数据5</div>
-    <div class="text-data">我是测试数据6</div>
-    <div class="text-data">我是测试数据7</div>
-    <div class="text-data">我是测试数据8</div>
-    <div class="text-data">我是测试数据9</div>
-    <div class="text-data">我是测试数据10</div>
-    <div class="text-data">我是测试数据11</div>
-    <div class="text-data">我是测试数据12</div>
-    <div class="text-data">我是测试数据13</div>
-    <div class="text-data">我是测试数据14</div>
-    <div class="text-data">我是测试数据15</div>
-    <div class="text-data">我是测试数据16</div>
-    <div class="text-data">我是测试数据17</div>
-    <div class="text-data">我是测试数据18</div>
-    <div class="text-data">我是测试数据19</div>
-    <div class="text-data">我是测试数据20</div>
-    <div class="text-data">我是测试数据21</div>
-    <div class="text-data">我是测试数据22</div>
-    <div class="text-data">我是测试数据23</div>
-    <div class="text-data">我是测试数据24</div>
-    <nut-backtop @click="handleClick" ></nut-backtop>
-  </div>
-</template>
-
-<script>
-  export default {
-    setup() {
-      const handleClick = () => {
-        console.log('触发返回顶部');
-      };
-
-      return {
-        handleClick
-      };
-    }
-  };
-</script>
-
-<style lang="scss" scoped>
-.demo {
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
-  }
-}
-</style>
-```
-:::
 
 
 ### API
 
-### Prop  
+### Props  
 
 | 字段            | 说明                 | 类型    | 默认值  |
 |-----------------|------------------------------------------|---------|---------|
@@ -276,7 +219,13 @@ app.use(Icon);
 | is-animation         | 是否有动画,和duration参数互斥   | Boolean  | `true`       |  
 | duration         | 设置动画持续时间   | Number  | `1000`       |                                          
 
-### Event
+### Events
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|
-| click | 按钮点击时触发事件 | event: MouseEvent |
+| click | 按钮点击时触发事件 | event: MouseEvent |
+
+### Slots
+
+| 名称    | 说明         |
+|---------|--------------|
+| default | 	默认slot，用以自定义内容 |
diff --git a/src/packages/__VUE/backtop/doc.taro.md b/src/packages/__VUE/backtop/doc.taro.md
@@ -197,7 +197,7 @@ export default {
 
 ### API
 
-### Prop  
+### Props  
 
 | 字段            | 说明                 | 类型    | 默认值  |
 |-----------------|------------------------------------------|---------|---------|
@@ -207,7 +207,14 @@ export default {
 | distance     | 页面垂直滚动多高后出现   | Number  | `200`      |
 | z-index         | 设置组件页面层级   | Number  | `10`       |                                          
 
-### Event
+### Events
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|
-| click | 按钮点击时触发事件 | event: MouseEvent |
+| click | 按钮点击时触发事件 | event: MouseEvent |
+
+### Slots
+
+| 名称    | 说明         |
+|---------|--------------|
+| content | 	滚动容器中包含的内容 |
+| icon | 	返回到顶部，按钮内容 |
diff --git a/src/packages/__VUE/backtop/index.vue b/src/packages/__VUE/backtop/index.vue
@@ -21,7 +21,7 @@ export default create({
       default: 10
     },
     elId: {
-      type: [String, Element],
+      type: [String],
       default: 'body'
     },
 

diff --git a/src/packages/__VUE/badge/doc.en-US.md b/src/packages/__VUE/badge/doc.en-US.md
@@ -210,7 +210,7 @@ app.use(Badge);
 :::
 
 
-### Prop  
+### Props 
 
 | Attribute | Description | Type | Default |
 |---------|--------------------------------------------|---------|-----------|

diff --git a/src/packages/__VUE/badge/doc.md b/src/packages/__VUE/badge/doc.md
@@ -211,7 +211,7 @@ app.use(Badge);
 :::
 
 
-### Prop  
+### Props  
 
 | 字段    | 说明                                       | 类型    | 默认值    |
 |---------|--------------------------------------------|---------|-----------|

diff --git a/src/packages/__VUE/button/doc.en-US.md b/src/packages/__VUE/button/doc.en-US.md
@@ -189,7 +189,7 @@ The color of the button can be customized through the color property.
 
 ## API
 
-### Prop
+### Props
 
 | Attribute     | Description                                                         | Type    | Default    |
 | -------- | ------------------------------------------------------------ | ------- | --------- |
@@ -205,7 +205,7 @@ The color of the button can be customized through the color property.
 | icon-class-prefix `v3.1.17`   | Custom icon class name prefix for using custom icons           | String | `nut-icon`       |
 | loading  | Whether to show loading status     | Boolean | `false`   |
 
-### Event
+### Events
 
 | Event | Description           | Arguments          |
 | ------ | -------------- | ----------------- |

diff --git a/src/packages/__VUE/popover/demo.vue b/src/packages/__VUE/popover/demo.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <h2>{{ translate('title1') }}</h2>
+    <h2>{{ translate('title') }}</h2>
 
     <nut-row type="flex">
       <nut-col :span="8">
@@ -24,7 +24,7 @@
       </nut-col>
     </nut-row>
 
-    <h2>{{ translate('title2') }}</h2>
+    <h2>{{ translate('title1') }}</h2>
 
     <nut-row type="flex">
       <nut-col :span="8">
@@ -43,7 +43,7 @@
       </nut-col>
     </nut-row>
 
-    <h2>{{ translate('title3') }}</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-popover v-model:visible="visible.Customized" location="bottom-start">
       <template #reference>
         <nut-button type="primary" shape="square">{{ translate('content') }}</nut-button>
@@ -59,7 +59,7 @@
       </template>
     </nut-popover>
 
-    <h2>{{ translate('title4') }}</h2>
+    <h2>{{ translate('title3') }}</h2>
 
     <nut-row type="flex" justify="center">
       <nut-col :span="24" style="text-align: center">

diff --git a/src/packages/__VUE/popover/doc.en-US.md b/src/packages/__VUE/popover/doc.en-US.md
@@ -15,6 +15,8 @@ import { Popover, Popup } from '@nutui/nutui';
 import { Popover, Popup } from '@nutui/nutui-taro';
 
 const app = createApp();
+
+app.use(Popup);
 app.use(Popover);
 
 ```
@@ -283,7 +285,7 @@ export default {
 
 
 
-### Prop  
+### Props  
 
 | Attribute | Description | Type | Default |
 |----------------|---------------------------------|---------|------------|

diff --git a/src/packages/__VUE/popover/doc.md b/src/packages/__VUE/popover/doc.md
@@ -15,6 +15,8 @@ import { Popover, Popup } from '@nutui/nutui';
 import { Popover, Popup } from '@nutui/nutui-taro';
 
 const app = createApp();
+
+app.use(Popup);
 app.use(Popover);
 
 ```
@@ -283,7 +285,7 @@ export default {
 
 
 
-### Prop  
+### Props  
 
 | 字段            | 说明                            | 类型     | 默认值      |
 |----------------|---------------------------------|---------|------------|