Browse Source

docs: taro demo

eiinu 3 years ago
parent
commit
a556a3c5a4

+ 39 - 33
src/packages/__VUE/card/doc.en-US.md

@@ -60,33 +60,40 @@ app.use(Card);
 :::demo
 ```html
 <template>
-<nut-card
-:img-url="state.imgUrl"
-:title="state.title"
-:price="state.price"
-:vipPrice="state.vipPrice"
-:shopDesc="state.shopDesc"
-:delivery="state.delivery"
-:shopName="state.shopName"
->
-  <template #prolist>
-    <div class="search_prolist_attr">
-      <span class="word">word</span>
-      <span class="word">word</span>
-      <span class="word">word</span>
-    </div>
-  </template>
-  <template #tag>
-    <img
-        class="tag" 
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+    <template #prolist>
+      <div class="search_prolist_attr">
+        <span class="word">word</span>
+        <span class="word">word</span>
+        <span class="word">word</span>
+      </div>
+    </template>
+    <template #price>
+      <span>price</span>
+    </template>
+    <template #origin>
+      <img
+        class="tag"
         src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
         alt=""
-    />
-  </template>
+      />
+    </template>
+    <template #shop-tag>
+      <div>shop</div>
+    </template>
     <template #footer>
-      <div class="customize">cuttom</div>
+      <div class="customize">footer</div>
     </template>
-</nut-card>
+  </nut-card>
+</template>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -113,18 +120,17 @@ app.use(Card);
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
- 
 }
 .search_prolist_attr > span{
-    float: left;
-    padding: 0 5px;
-    border-radius: 1px;
-    font-size: 10px;
-    height: 15px;
-    line-height: 15px;
-    color: #999;
-    background-color: #f2f2f7;
-    margin-right: 5px;
+  float: left;
+  padding: 0 5px;
+  border-radius: 1px;
+  font-size: 10px;
+  height: 15px;
+  line-height: 15px;
+  color: #999;
+  background-color: #f2f2f7;
+  margin-right: 5px;
 }
 .tag {
   display: inline-block;

+ 46 - 42
src/packages/__VUE/card/doc.md

@@ -21,16 +21,15 @@ app.use(Card);
 :::demo
 ```html
 <template>
- <nut-card
-  :img-url="state.imgUrl"
-  :title="state.title"
-  :price="state.price"
-  :vipPrice="state.vipPrice"
-  :shopDesc="state.shopDesc"
-  :delivery="state.delivery"
-  :shopName="state.shopName"
-  >
-</nut-card>
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  ></nut-card>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -59,33 +58,39 @@ app.use(Card);
 :::demo
 ```html
 <template>
-<nut-card
-:img-url="state.imgUrl"
-:title="state.title"
-:price="state.price"
-:vipPrice="state.vipPrice"
-:shopDesc="state.shopDesc"
-:delivery="state.delivery"
-:shopName="state.shopName"
->
-  <template #prolist>
-    <div class="search_prolist_attr">
-      <span class="word">活鲜</span>
-      <span class="word">礼盒</span>
-      <span class="word">国产</span>
-    </div>
-  </template>
-  <template #tag>
-    <img
-        class="tag" 
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+    <template #prolist>
+      <div class="search_prolist_attr">
+        <span class="word">活鲜</span>
+        <span class="word">礼盒</span>
+        <span class="word">国产</span>
+      </div>
+    </template>
+    <template #price>
+      <span>询价</span>
+    </template>
+    <template #origin>
+      <img
+        class="tag"
         src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
         alt=""
-    />
-  </template>
+      />
+    </template>
+    <template #shop-tag>
+      <div>自定义店铺介绍</div>
+    </template>
     <template #footer>
       <div class="customize">自定义</div>
     </template>
-</nut-card>
+  </nut-card>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -112,18 +117,17 @@ app.use(Card);
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
- 
 }
 .search_prolist_attr > span{
-    float: left;
-    padding: 0 5px;
-    border-radius: 1px;
-    font-size: 10px;
-    height: 15px;
-    line-height: 15px;
-    color: #999;
-    background-color: #f2f2f7;
-    margin-right: 5px;
+  float: left;
+  padding: 0 5px;
+  border-radius: 1px;
+  font-size: 10px;
+  height: 15px;
+  line-height: 15px;
+  color: #999;
+  background-color: #f2f2f7;
+  margin-right: 5px;
 }
 .tag {
   display: inline-block;

+ 38 - 32
src/packages/__VUE/card/doc.taro.md

@@ -59,33 +59,40 @@ app.use(Card);
 :::demo
 ```html
 <template>
-<nut-card
-:img-url="state.imgUrl"
-:title="state.title"
-:price="state.price"
-:vipPrice="state.vipPrice"
-:shopDesc="state.shopDesc"
-:delivery="state.delivery"
-:shopName="state.shopName"
->
-  <template #prolist>
-    <div class="search_prolist_attr">
-      <span class="word">活鲜</span>
-      <span class="word">礼盒</span>
-      <span class="word">国产</span>
-    </div>
-  </template>
-  <template #tag>
-    <img
-        class="tag" 
+<template>
+  <nut-card
+    :img-url="state.imgUrl"
+    :title="state.title"
+    :price="state.price"
+    :vipPrice="state.vipPrice"
+    :shopDesc="state.shopDesc"
+    :delivery="state.delivery"
+    :shopName="state.shopName"
+  >
+    <template #prolist>
+      <div class="search_prolist_attr">
+        <span class="word">活鲜</span>
+        <span class="word">礼盒</span>
+        <span class="word">国产</span>
+      </div>
+    </template>
+    <template #price>
+      <span>询价</span>
+    </template>
+    <template #origin>
+      <img
+        class="tag"
         src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
         alt=""
-    />
-  </template>
+      />
+    </template>
+    <template #shop-tag>
+      <div>自定义店铺介绍</div>
+    </template>
     <template #footer>
       <div class="customize">自定义</div>
     </template>
-</nut-card>
+  </nut-card>
 </template>
 <script>
   import { reactive } from 'vue';
@@ -112,18 +119,17 @@ app.use(Card);
   margin: 3px 0 1px;
   height: 15px;
   overflow: hidden;
- 
 }
 .search_prolist_attr > span{
-    float: left;
-    padding: 0 5px;
-    border-radius: 1px;
-    font-size: 10px;
-    height: 15px;
-    line-height: 15px;
-    color: #999;
-    background-color: #f2f2f7;
-    margin-right: 5px;
+  float: left;
+  padding: 0 5px;
+  border-radius: 1px;
+  font-size: 10px;
+  height: 15px;
+  line-height: 15px;
+  color: #999;
+  background-color: #f2f2f7;
+  margin-right: 5px;
 }
 .tag {
   display: inline-block;

+ 2 - 2
src/packages/__VUE/form/doc.taro.md

@@ -369,8 +369,8 @@ setup(){
 | 参数                | 说明                                                             | 类型             | 默认值  |
 |---------------------|------------------------------------------------------------------|------------------|---------|
 | required            | 是否显示必填字段的标签旁边的红色星号                             | boolean          | `false` |
-| prop                | 表单域 v-model 字段, 在使用表单校验功能的情况下,该属性是必填的 | string           | -       |
-| rules               | 定义校验规则                                                     | FormItemRule []  | []      |
+| prop                | 表单域 v-model 字段, 在使用表单校验功能的情况下,该属性是必填的 | string           | `-`       |
+| rules               | 定义校验规则                                                     | FormItemRule []  | `[]`      |
 | label-width         | 表单项 label 宽度,默认单位为`px`                                | number \| string | `90px`  |
 | label-align         | 表单项 label 对齐方式,可选值为 `center` `right`                 | string           | `left`  |
 | body-align          | 右侧插槽对齐方式,可选值为 `center` `right`                      | string           | `left`  |

+ 3 - 3
src/packages/__VUE/indicator/doc.taro.md

@@ -71,9 +71,9 @@ app.use(Indicator);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| current  | 当前步骤               | number | 1              |
-| size       | 步骤长度                         | number | 3               |
-| block | 是否启用块级布局     | boolean | false |
+| current  | 当前步骤               | number | `1`              |
+| size       | 步骤长度                         | number | `3`               |
+| block | 是否启用块级布局     | boolean | `false` |
 | align | 对齐方式,仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center`| string | `left` |
 | fill-zero     | 单数前面是否补 0                      | boolean | `true`        |
 

+ 34 - 29
src/packages/__VUE/uploader/doc.taro.md

@@ -12,7 +12,6 @@ import { Uploader } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Uploader);
-
 ```
 
 
@@ -59,6 +58,12 @@ app.use(Uploader);
 ``` html
 <nut-uploader :url="uploadUrl" :source-type="['camera']" ></nut-uploader>
 ```
+
+### 上传状态
+```html
+<nut-uploader :url="uploadUrl" @delete="onDelete"></nut-uploader>
+```
+
 ### 限制上传数量5个
 
 ``` html
@@ -70,7 +75,7 @@ app.use(Uploader);
 <nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
 ```
 
-### 自定义 FormData headers
+### 自定义数据 FormData headers
 
 ``` html
 <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>
@@ -230,37 +235,37 @@ setup() {
 
 | 字段              | 说明                                                                                                             | 类型                              | 默认值                    |
 |-------------------|------------------------------------------------------------------------------------------------------------------|-----------------------------------|---------------------------|
-| auto-upload       | 是否在选取文件后立即进行上传,false 时需要手动执行 ref submit 方法进行上传                                       | boolean                           | true                      |
-| name              | 发到后台的文件参数名                                                                                             | string                            | "file"                    |
-| url               | 上传服务器的接口地址                                                                                             | string                            | -                         |
-| v-model:file-list | 默认已经上传的文件列表                                                                                           | FileItem[]                        | []                        |
-| is-preview        | 是否上传成功后展示预览图                                                                                         | boolean                           | true                      |
-| is-deletable      | 是否展示删除按钮                                                                                                 | boolean                           | true                      |
-| method            | 上传请求的 http method                                                                                           | string                            | "post"                    |
-| list-type         | 上传列表的内建样式,支持两种基本样式 picture、list                                                               | string                            | "picture"                 |
-| source-type       | [选择图片的来源](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)           | string                            | ['album','camera']        |
-| maximize          | 可以设定最大上传文件的大小(字节)                                                                               | number \| string                  | 9                         |
-| maximum           | 文件上传数量限制                                                                                                 | number \| string                  | 1                         |
-| size-type         | 是否压缩所选文件[详细说明](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html) | string                            | ['original','compressed'] |
-| headers           | 设置上传的请求头部                                                                                               | object                            | {}                        |
-| data              | 附加上传的信息 formData                                                                                          | object                            | {}                        |
-| xhr-state         | 接口响应的成功状态(status)值                                                                                   | number                            | 200                       |
-| disabled          | 是否禁用文件上传                                                                                                 | boolean                           | false                     |
-| multiple          | 是否支持文件多选                                                                                                 | boolean                           | true                      |
-| timeout           | 超时时间,单位为毫秒                                                                                             | number \| string                  | 1000 * 30                 |
-| before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                            | Function                          | null                      |
-| before-xhr-upload | 执行 Taro.uploadFile 上传时,自定义方式                                                                          | Function(Taro.uploadFile,option) | null                      |
+| auto-upload       | 是否在选取文件后立即进行上传,false 时需要手动执行 ref submit 方法进行上传                                       | boolean                           | `true`                      |
+| name              | 发到后台的文件参数名                                                                                             | string                            | `file`                    |
+| url               | 上传服务器的接口地址                                                                                             | string                            | `-`                         |
+| v-model:file-list | 默认已经上传的文件列表                                                                                           | FileItem[]                        | `[]`                        |
+| is-preview        | 是否上传成功后展示预览图                                                                                         | boolean                           | `true`                      |
+| is-deletable      | 是否展示删除按钮                                                                                                 | boolean                           | `true`                      |
+| method            | 上传请求的 http method                                                                                           | string                            | `post`                    |
+| list-type         | 上传列表的内建样式,支持两种基本样式 `picture``list`                                                               | string                            | `picture`                 |
+| source-type       | [选择图片的来源](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)           | string                            | `['album','camera']`        |
+| maximize          | 可以设定最大上传文件的大小(字节)                                                                               | number \| string                  | `9`                         |
+| maximum           | 文件上传数量限制                                                                                                 | number \| string                  | `1`                         |
+| size-type         | 是否压缩所选文件[详细说明](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html) | string                            | `['original','compressed']` |
+| headers           | 设置上传的请求头部                                                                                               | object                            | `{}`                        |
+| data              | 附加上传的信息 formData                                                                                          | object                            | `{}`                        |
+| xhr-state         | 接口响应的成功状态(status)值                                                                                   | number                            | `200`                       |
+| disabled          | 是否禁用文件上传                                                                                                 | boolean                           | `false`                     |
+| multiple          | 是否支持文件多选                                                                                                 | boolean                           | `true`                      |
+| timeout           | 超时时间,单位为毫秒                                                                                             | number \| string                  | `1000 * 30`                 |
+| before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                            | Function                          | `null`                     |
+| before-xhr-upload | 执行 Taro.uploadFile 上传时,自定义方式                                                                          | Function(Taro.uploadFile,option) | `null`                      |
 
 
 ### FileItem
 
 | 名称     | 说明                                            | 默认值                          |
 |----------|-------------------------------------------------|---------------------------------|
-| status   | 文件状态值,可选'ready,uploading,success,error' | "ready"                         |
-| uid      | 文件的唯一标识                                  | new Date().getTime().toString() |
-| name     | 文件名称                                        | ""                              |
-| url      | 文件路径                                        | ""                              |
-| formData | 上传所需的data                                  | {}                              |
+| status   | 文件状态值,可选'ready,uploading,success,error' | `ready`                         |
+| uid      | 文件的唯一标识                                  | `new Date().getTime().toString()` |
+| name     | 文件名称                                        | `""`                              |
+| url      | 文件路径                                        | `""`                              |
+| formData | 上传所需的data                                  | `{}`                              |
 
 ### Events
 
@@ -291,8 +296,8 @@ setup() {
 
 | 方法名           | 说明                                                       | 参数  | 返回值 |
 |------------------|------------------------------------------------------------|-------|--------|
-| submit           | 手动上传模式,执行上传操作                                 | -     | -      |
-| clearUploadQueue | 清空已选择的文件队列(该方法一般配合在手动模式上传时使用) | index | -      |
+| submit           | 手动上传模式,执行上传操作                                 | -     | `-`      |
+| clearUploadQueue | 清空已选择的文件队列(该方法一般配合在手动模式上传时使用) | index | `-`      |
 
 ## 主题定制
 

+ 1 - 1
src/sites/mobile-taro/vue/src/business/pages/card/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="demo">
-    <h2>默认用法</h2>
+    <h2>基础用法</h2>
     <nut-card
       :img-url="state.imgUrl"
       :title="state.title"

+ 1 - 1
src/sites/mobile-taro/vue/src/dentry/pages/form/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo full">
-    <h2>基用法</h2>
+    <h2>基用法</h2>
     <nut-form>
       <nut-form-item label="姓名">
         <nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入姓名" type="text" />

+ 1 - 1
src/sites/mobile-taro/vue/src/exhibition/pages/badge/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="demo">
-    <h2>默认用法</h2>
+    <h2>基础用法</h2>
     <nut-row>
       <nut-badge :value="8">
         <nut-avatar shape="square"></nut-avatar>

+ 1 - 1
src/sites/mobile-taro/vue/src/exhibition/pages/popover/index.vue

@@ -82,7 +82,7 @@
     >
     </nut-popover>
 
-    <h2>自定义对象</h2>
+    <h2>自定义目标元素</h2>
     <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle"> 自定义对象 </nut-button>
     <nut-popover
       v-model:visible="customTarget"

+ 1 - 1
src/sites/mobile-taro/vue/src/exhibition/pages/tag/index.vue

@@ -46,7 +46,7 @@
       >
     </nut-cell-group>
 
-    <nut-cell-group title="自定义">
+    <nut-cell-group title="颜色自定义">
       <nut-cell title="背景颜色">
         <template v-slot:link>
           <nut-tag color="#FA685D">标签</nut-tag>

+ 6 - 0
src/sites/mobile-taro/vue/src/layout/pages/grid/index.vue

@@ -81,3 +81,9 @@
     </nut-grid>
   </div>
 </template>
+<script lang="ts">
+import { Dongdong } from '@nutui/icons-vue-taro';
+export default {
+  components: { Dongdong }
+};
+</script>