Browse Source

fix(backtop,badge,button,popover,tag,watermark): 文档调整,demo修改 (#1624)

lkjh3214 3 years ago
parent
commit
a84791d6ee

+ 22 - 77
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 |

+ 23 - 74
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,用以自定义内容 |

+ 10 - 3
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 | 	返回到顶部,按钮内容 |

+ 1 - 1
src/packages/__VUE/backtop/index.vue

@@ -21,7 +21,7 @@ export default create({
       default: 10
     },
     elId: {
-      type: [String, Element],
+      type: [String],
       default: 'body'
     },
 

+ 1 - 1
src/packages/__VUE/badge/doc.en-US.md

@@ -210,7 +210,7 @@ app.use(Badge);
 :::
 
 
-### Prop  
+### Props 
 
 | Attribute | Description | Type | Default |
 |---------|--------------------------------------------|---------|-----------|

+ 1 - 1
src/packages/__VUE/badge/doc.md

@@ -211,7 +211,7 @@ app.use(Badge);
 :::
 
 
-### Prop  
+### Props  
 
 | 字段    | 说明                                       | 类型    | 默认值    |
 |---------|--------------------------------------------|---------|-----------|

+ 2 - 2
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          |
 | ------ | -------------- | ----------------- |

+ 4 - 4
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">

+ 3 - 1
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 |
 |----------------|---------------------------------|---------|------------|

+ 3 - 1
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  
 
 | 字段            | 说明                            | 类型     | 默认值      |
 |----------------|---------------------------------|---------|------------|

+ 2 - 2
src/packages/__VUE/tag/doc.en-US.md

@@ -134,7 +134,7 @@ export default {
 
 
 
-### Prop  
+### Props  
 
 | Attribute | Description | Type | Default |
 |------------|--------------------------------------------------|---------|-----------|
@@ -153,7 +153,7 @@ export default {
 |---------|--------------|
 | default | Label display content |
 
-### Event
+### Events
 
 | Event             | Description                     | Arguments        |
 |----------|----------|----------|

+ 2 - 2
src/packages/__VUE/tag/doc.md

@@ -136,7 +136,7 @@ export default {
 
 
 
-### Prop  
+### Props 
 
 | 字段       | 说明                                             | 类型    | 默认值    |
 |------------|--------------------------------------------------|---------|-----------|
@@ -155,7 +155,7 @@ export default {
 |---------|--------------|
 | default | 标签显示内容 |
 
-### Event
+### Events
 
 | 事件名称 | 说明     | 回调参数 |
 |----------|----------|----------|

+ 9 - 9
src/packages/__VUE/watermark/doc.en-US.md

@@ -113,13 +113,13 @@ app.use(Watermark);
 | height      | Height of watermark               | `number`           | `64`                 |
 | rotate      | Rotation angle when drawing watermark   | `number`           | `-22`                |
 | image       | Image source, it is recommended to export 2x or 3x images, and the image rendering watermark is preferred | `string`           | -                    |
-| imageWidth  | Width of image                                             | `number`           | `120`                |
-| imageHeight | Height of image                                             | `number`           | `64`                 |
-| zIndex      | Z-index of the appended watermark element                             | `number`           | `2000`               |
+| image-width  | Width of image                                             | `number`           | `120`                |
+| image-height | Height of image                                             | `number`           | `64`                 |
+| z-index      | Z-index of the appended watermark element                             | `number`           | `2000`               |
 | content     | Watermark text content                                         | `string`           | -                    |
-| fontColor   | Watermark text color                                         | `string`           | `rgba(0, 0, 0, .15)` |
-| fontSize    | Watermark text font size                                             | `string \| number` | `16`                 |
-| gapX        | Horizontal spacing between watermarks                                   | `number`           | `24`                 |
-| gapY        | Vertical spacing between watermarks                                   | `number`           | `48`                 |
-| fullPage    | Overwrite entire page                                     | `boolean`          | `true`               |
-| fontFamily  | Watermark text font family                  | `boolean`          | `true`               |
+| font-color   | Watermark text color                                         | `string`           | `rgba(0, 0, 0, .15)` |
+| font-size    | Watermark text font size                                             | `string \| number` | `16`                 |
+| gap-x        | Horizontal spacing between watermarks                                   | `number`           | `24`                 |
+| gap-y        | Vertical spacing between watermarks                                   | `number`           | `48`                 |
+| full-page    | Overwrite entire page                                     | `boolean`          | `true`               |
+| font-family  | Watermark text font family                  | `boolean`          | `true`               |

+ 9 - 9
src/packages/__VUE/watermark/doc.md

@@ -118,15 +118,15 @@ app.use(Watermark);
 | height      | 水印的高度                                           | `number`           | `64`                 |
 | rotate      | 水印绘制时,旋转的角度                  | `number`           | `-22`                |
 | image       | 图片源,建议导出 2 倍或 3 倍图,优先使用图片渲染水印 | `string`           | -                    |
-| imageWidth  | 图片宽度                                             | `number`           | `120`                |
-| imageHeight | 图片高度                                             | `number`           | `64`                 |
-| zIndex      | 追加的水印元素的 z-index                             | `number`           | `2000`               |
+| image-width  | 图片宽度                                             | `number`           | `120`                |
+| image-height | 图片高度                                             | `number`           | `64`                 |
+| z-index      | 追加的水印元素的 z-index                             | `number`           | `2000`               |
 | content     | 水印文字内容                                         | `string`           | -                    |
-| fontColor   | 水印文字颜色                                         | `string`           | `rgba(0, 0, 0, .15)` |
-| fontSize    | 文字大小                                             | `string \| number` | `16`                 |
-| gapX        | 水印之间的水平间距                                   | `number`           | `24`                 |
-| gapY        | 水印之间的垂直间距                                   | `number`           | `48`                 |
-| fullPage    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
-| fontFamily  | 水印文字字体                                     | `boolean`          | `true`               |
+| font-color   | 水印文字颜色                                         | `string`           | `rgba(0, 0, 0, .15)` |
+| font-size    | 文字大小                                             | `string \| number` | `16`                 |
+| gap-x        | 水印之间的水平间距                                   | `number`           | `24`                 |
+| gap-y       | 水印之间的垂直间距                                   | `number`           | `48`                 |
+| full-page    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
+| font-family  | 水印文字字体                                     | `boolean`          | `true`               |