浏览代码

修复addresslist问题 (#2027)

* feat: 处理组件tsc问题

* feat: popup icons-vue

* feat: 删除注释

* feat: 删除多余注释

* feat: popup icons-vue

* feat: popup taro demo修改icon

* feat: popup md 修改

* feat: navbar icon替换

* feat: progress icon替换

* feat: navbar 修改titicon参数名

* feat: navbar md titicon

* fix: navbar icon

* feat: 优化价格文档描述和demo

* feat: 文档类型修改

* feat: 优化addresslist

* feat: 修复avatar taro下图片未显示问题

* feat: 小程序demo 文档对比修改

* fix: 修改avatar图片展示问题

* fix: avatar图片展示问题

* fix: 测试中的一些文档问题

* fix: addresslist demo、文档问题

* fix: addresslist taro demo问题

* feat: addresslist 滑动下边框问题

* fix: avatar tarodiv下落问题

* fix: 修复category 问题
ailululu 3 年之前
父节点
当前提交
c1647675ab

+ 3 - 9
src/packages/__VUE/addresslist/components/GeneralShell.taro.vue

@@ -13,15 +13,9 @@
     </component>
     <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
       <slot name="longpressAll">
-        <div class="nut-address-list-general__mask-copy" @click="copyCLick">
-          <div class="nut-address-list-mask-contain"> 复制<br />地址 </div>
-        </div>
-        <div class="nut-address-list-general__mask-set" @click="setDefault">
-          <div class="nut-address-list-mask-contain"> 设置<br />默认 </div>
-        </div>
-        <div class="nut-address-list-general__mask-del" @click="delLongClick">
-          <div class="nut-address-list-mask-contain"> 删除<br />地址 </div>
-        </div>
+        <div class="nut-address-list-general__mask-copy" @click="copyCLick"> 复制地址 </div>
+        <div class="nut-address-list-general__mask-set" @click="setDefault"> 设置默认 </div>
+        <div class="nut-address-list-general__mask-del" @click="delLongClick"> 删除地址 </div>
       </slot>
     </div>
     <div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>

+ 9 - 15
src/packages/__VUE/addresslist/components/GeneralShell.vue

@@ -13,15 +13,9 @@
     </component>
     <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
       <slot name="longpressAll">
-        <div class="nut-address-list-general__mask-copy" @click="copyCLick">
-          <div class="nut-address-list-mask-contain"> 复制<br />地址 </div>
-        </div>
-        <div class="nut-address-list-general__mask-set" @click="setDefault">
-          <div class="nut-address-list-mask-contain"> 设置<br />默认 </div>
-        </div>
-        <div class="nut-address-list-general__mask-del" @click="delLongClick">
-          <div class="nut-address-list-mask-contain"> 删除<br />地址 </div>
-        </div>
+        <div class="nut-address-list-general__mask-copy" @click="copyCLick"> 复制地址 </div>
+        <div class="nut-address-list-general__mask-set" @click="setDefault"> 设置默认 </div>
+        <div class="nut-address-list-general__mask-del" @click="delLongClick"> 删除地址 </div>
       </slot>
     </div>
     <div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
@@ -70,7 +64,7 @@ export default create({
       default: false
     }
   },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
+  emits: ['delIcon', 'editIcon', 'clickItem', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
   components: {
     ItemContents,
     [Button.name]: Button,
@@ -87,8 +81,8 @@ export default create({
         onEditIcon(event: Event) {
           editClick(event);
         },
-        onItemClick(event: Event) {
-          itemClick(event);
+        onClickItem(event: Event) {
+          clickItem(event);
         }
       });
     };
@@ -104,9 +98,9 @@ export default create({
       emit('editIcon', event, props.item);
       event.stopPropagation();
     };
-    const itemClick = (event: Event) => {
+    const clickItem = (event: Event) => {
       if (moveRef.value) return;
-      emit('itemClick', event, props.item);
+      emit('clickItem', event, props.item);
       event.stopPropagation();
     };
     const delLongClick = (event: Event) => {
@@ -165,7 +159,7 @@ export default create({
     return {
       renderCompontent,
       showMaskRef,
-      itemClick,
+      clickItem,
       editClick,
       delClick,
       delLongClick,

+ 2 - 2
src/packages/__VUE/addresslist/components/ItemContents.vue

@@ -37,7 +37,7 @@ export default create({
       default: {}
     }
   },
-  emits: ['delIcon', 'editIcon', 'itemClick'],
+  emits: ['delIcon', 'editIcon', 'clickItem'],
 
   setup(props, { emit }) {
     const delClick = (event: Event) => {
@@ -49,7 +49,7 @@ export default create({
       event.stopPropagation();
     };
     const contentsClick = (event: Event) => {
-      emit('itemClick', event, props.item);
+      emit('clickItem', event, props.item);
       event.stopPropagation();
     };
 

+ 31 - 23
src/packages/__VUE/addresslist/demo.vue

@@ -3,38 +3,38 @@
     <h2>{{ translate('basic') }}</h2>
     <nut-address-list
       :data="data"
-      @delIcon="delClick"
-      @editIcon="editClick"
-      @itemClick="itemClick"
-      :showBottomButton="false"
-      :dataMapOptions="dataMapOptions"
+      @click-item="clickItem"
+      @del-icon="delClick"
+      @edit-icon="editClick"
+      :show-bottom-button="false"
+      :data-options="dataOptions"
     >
     </nut-address-list>
     <h2>{{ translate('title1') }}</h2>
     <nut-address-list
       :data="data"
       long-Press
-      :showBottomButton="false"
-      @delIcon="delClick"
-      @editIcon="editClick"
-      @itemClick="itemClick"
-      @longCopy="copyClick"
-      @longSet="setClick"
-      @longDel="delClick"
-      :dataMapOptions="dataMapOptions"
+      :show-bottom-button="false"
+      @click-item="clickItem"
+      @del-icon="delClick"
+      @edit-icon="editClick"
+      @long-copy="copyClick"
+      @long-set="setClick"
+      @long-del="delClickLong"
+      :data-options="dataOptions"
     >
     </nut-address-list>
     <h2>{{ translate('title2') }}</h2>
     <nut-address-list
       :data="data"
       swipeEdition
-      showBottomButton
-      @delIcon="delClick"
-      @editIcon="editClick"
-      @itemClick="itemClick"
-      @swipeDel="delClick"
+      show-bottom-button
+      @click-item="clickItem"
+      @del-icon="delClick"
+      @edit-icon="editClick"
+      @swipe-del="delClickSwipe"
       @add="addAddress"
-      :dataMapOptions="dataMapOptions"
+      :data-options="dataOptions"
     >
     </nut-address-list>
   </div>
@@ -78,13 +78,13 @@ export default createDemo({
         fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
       }
     ]);
-    const dataMapOptions = reactive({
+    const dataOptions = reactive({
       id: 'testid',
       addressDetail: 'testaddressDetail',
       addressName: 'testaddressName'
     });
 
-    const itemClick = () => {
+    const clickItem = () => {
       console.log('Click To Address');
     };
     const delClick = () => {
@@ -99,18 +99,26 @@ export default createDemo({
     const setClick = () => {
       console.log('Click On Settings');
     };
+    const delClickLong = () => {
+      console.log('Click On DelClickLong');
+    };
+    const delClickSwipe = () => {
+      console.log('Click On DelClickSwipe');
+    };
     const addAddress = () => {
       console.log('Click To Add');
     };
     return {
-      itemClick,
       data,
+      clickItem,
       delClick,
       editClick,
       copyClick,
       setClick,
+      delClickLong,
+      delClickSwipe,
       addAddress,
-      dataMapOptions,
+      dataOptions,
       translate
     };
   }

+ 51 - 56
src/packages/__VUE/addresslist/doc.en-US.md

@@ -22,18 +22,16 @@ app.use(AddressList);
 <template>
   <nut-address-list
     :data="data"
-    @delIcon="delClick"
-    @editIcon="editClick"
-    @itemClick="itemClick"
+    @click-item="clickItem"
+    @del-icon="delClick"
+    @edit-icon="editClick"
     :show-bottom-button="false"
-    :dataMapOptions="dataMapOptions"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -52,29 +50,26 @@ export default {
         fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
       },
     ]);
-    const dataMapOptions = reactive({
+    const dataOptions = reactive({
       id: 'testid',
       addressDetail:'testaddressDetail',
       addressName:'testaddressName'
     });
-    const itemClick = ()=>{
-      showToast.text('Click To Address');
+    const clickItem = ()=>{
+      console.log('Click To Address');
     }
     const delClick = ()=>{
-      showToast.text('Click To Delete');
+      console.log('Click To Delete');
     }
     const editClick = ()=>{
-      showToast.text('Click To Edit');
+      console.log('Click To Edit');
     }
     return {
-      itemClick,
       data,
+      clickItem,
       delClick,
       editClick,
-      copyClick,
-      setClick,
-      addAddress,
-      dataMapOptions
+      dataOptions
     };
   }
 };
@@ -92,20 +87,18 @@ export default {
     :data="data"
     long-press
     :show-bottom-button="false"
-    @DelIcon="delClick"
-    @EditIcon="editClick"
-    @Item="itemClick"
-    @longPressCopyClick="copyClick"
-    @longPressSetClick="setClick"
-    @longPressDelClick="delClick"
-    :dataMapOptions="dataMapOptions"
+    @del-icon="delClick"
+    @edit-icon="editClick"
+    @click-item="clickItem"
+    @long-copy="copyClick"
+    @long-set="setClick"
+    @long-del="delClickLong"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -124,38 +117,38 @@ export default {
           fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
         },
       ]);
-      const dataMapOptions = reactive({
+      const dataOptions = reactive({
         id: 'testid',
         addressDetail:'testaddressDetail',
         addressName:'testaddressName'
       });
-      const itemClick = ()=>{
-        showToast.text('Click To Address');
+      const clickItem = ()=>{
+        console.log('Click To Address');
       }
       const delClick = ()=>{
-        showToast.text('Click To Delete');
+        console.log('Click To Delete');
       }
       const editClick = ()=>{
-        showToast.text('Click To Edit');
+        console.log('Click To Edit');
       }
       const copyClick = ()=>{
-        showToast.text('Click To Copy');
+        console.log('Click To Copy');
       }
       const setClick = ()=>{
-        showToast.text('Click On Settings');
+        console.log('Click On Settings');
       }
-      const addAddress = ()=>{
-        showToast.text('Click To Add');
+      const delClickLong = ()=>{
+        console.log('Click To Add');
       }
       return {
-        itemClick,
         data,
+        clickItem,
         delClick,
         editClick,
         copyClick,
         setClick,
-        addAddress,
-        dataMapOptions
+        delClickLong,
+        dataOptions
       };
     }
   };
@@ -172,19 +165,17 @@ export default {
     :data="data"
     swipe-edition
     show-bottom-button
-    @Item="itemClick"
-    @EditIcon="editClick"
-    @DelIcon="delClick"
-    @swipeDelClick="delClick"
+    @edit-icon="editClick"
+    @del-icon="delClick"
+    @click-item="clickItem"
+    @swipe-del="delClickSwipe"
     @add="addAddress"
-    :dataMapOptions="dataMapOptions"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -203,32 +194,35 @@ export default {
           fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
         },
       ]);
-      const dataMapOptions = reactive({
+      const dataOptions = reactive({
         id: 'testid',
         addressDetail:'testaddressDetail',
         addressName:'testaddressName'
       });
-      const itemClick = ()=>{
-        showToast.text('Click To Address');
+      const clickItem = ()=>{
+        console.log('Click To Address');
       }
       const editClick = ()=>{
-        showToast.text('Click To Edit');
+        console.log('Click To Edit');
       }
       const delClick = ()=>{
-        showToast.text('Click To Delete');
+        console.log('Click To Delete');
       }
+      const delClickSwipe = () => {
+        console.log('Click On DelClickSwipe');
+      };
       const addAddress = ()=>{
-        showToast.text('Click To Add');
+        console.log('Click To Add');
       }
       return {
-        itemClick,
         data,
+        clickItem,
         delClick,
         editClick,
-        copyClick,
         setClick,
+        delClickSwipe,
         addAddress,
-        dataMapOptions
+        dataOptions
       };
     }
   };
@@ -246,6 +240,7 @@ export default {
 | long-press | Long Press Function   | boolean | `false`  |
 | swipe-edition      | Swipe right           | boolean | `false`  |
 | show-bottom-button | Whether to show the bottom button | boolean | `true`   |
+| data-options | When customizing the `key` value, set the mapping relationship
 
 ### Events
 
@@ -272,7 +267,7 @@ The `AddressList` component is divided into several areas by default, and these
 | swiperight    | Address list item right swipe area              | Use with swipe |
 | longpressbtns | Address list item long press to mask content    | Use with long press |
 
-### Each item in the data array is smoothed with the parameters of the dataMapOptions object
+### Each item in the data array is smoothed with the parameters of the dataOptions object
 
 Below is the underlying data structure for each item in the `data` array
 
@@ -286,10 +281,10 @@ const dataInfo = {
 };
 ```
 
-In the component, the fields defined in the basic data structure are preferentially obtained. If you want to customize the `key` value, you can set the mapping relationship through `dataMapOptions`
+In the component, the fields defined in the basic data structure are preferentially obtained. If you want to customize the `key` value, you can set the mapping relationship through `dataOptions`
 
 ```javascript
-const dataMapOptions = {
+const dataOptions = {
   id: "testid",
   addressDetail: "testaddressDetail",
   addressName: "testaddressName",

+ 51 - 59
src/packages/__VUE/addresslist/doc.md

@@ -23,18 +23,16 @@ app.use(AddressList);
 <template>
   <nut-address-list
     :data="data"
-    @delIcon="delClick"
-    @editIcon="editClick"
-    @itemClick="itemClick"
+    @click-item="clickItem"
+    @del-icon="delClick"
+    @edit-icon="editClick"
     :show-bottom-button="false"
-    :dataMapOptions="dataMapOptions"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -53,30 +51,26 @@ export default {
         fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
       },
     ]);
-    const dataMapOptions = reactive({
+    const dataOptions = reactive({
       id: 'testid',
       addressDetail:'testaddressDetail',
       addressName:'testaddressName'
     });
-    const itemClick = ()=>{
-      showToast.text('Click To Address');
+    const clickItem = ()=>{
+      console.log('Click To Address');
     }
     const delClick = ()=>{
-      showToast.text('Click To Delete');
+      console.log('Click To Delete');
     }
     const editClick = ()=>{
-      showToast.text('Click To Edit');
+      console.log('Click To Edit');
     }
     return {
-      itemClick,
-      holdDownClick,
       data,
+      clickItem,
       delClick,
       editClick,
-      copyClick,
-      setClick,
-      addAddress,
-      dataMapOptions
+      dataOptions
     };
   }
 };
@@ -94,20 +88,18 @@ export default {
     :data="data"
     long-press
     :show-bottom-button="false"
-    @DelIcon="delClick"
-    @EditIcon="editClick"
-    @Item="itemClick"
-    @longPressCopyClick="copyClick"
-    @longPressSetClick="setClick"
-    @longPressDelClick="delClick"
-    :dataMapOptions="dataMapOptions"
+    @del-icon="delClick"
+    @edit-icon="editClick"
+    @click-item="clickItem"
+    @long-copy="copyClick"
+    @long-set="setClick"
+    @long-del="delClickLong"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -126,39 +118,38 @@ export default {
           fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
         },
       ]);
-      const dataMapOptions = reactive({
+      const dataOptions = reactive({
         id: 'testid',
         addressDetail:'testaddressDetail',
         addressName:'testaddressName'
       });
-      const itemClick = ()=>{
-        showToast.text('Click To Address');
+      const clickItem = ()=>{
+        console.log('Click To Address');
       }
       const delClick = ()=>{
-        showToast.text('Click To Delete');
+        console.log('Click To Delete');
       }
       const editClick = ()=>{
-        showToast.text('Click To Edit');
+        console.log('Click To Edit');
       }
       const copyClick = ()=>{
-        showToast.text('Click To Copy');
+        console.log('Click To Copy');
       }
       const setClick = ()=>{
-        showToast.text('Click On Settings');
+        console.log('Click On Settings');
       }
-      const addAddress = ()=>{
-        showToast.text('Click To Add');
+      const delClickLong = ()=>{
+        console.log('Click To Add');
       }
       return {
-        itemClick,
-        holdDownClick,
         data,
+        clickItem,
         delClick,
         editClick,
         copyClick,
         setClick,
-        addAddress,
-        dataMapOptions
+        delClickLong,
+        dataOptions
       };
     }
   };
@@ -175,19 +166,17 @@ export default {
     :data="data"
     swipe-edition
     show-bottom-button
-    @Item="itemClick"
-    @EditIcon="editClick"
-    @DelIcon="delClick"
-    @swipeDelClick="delClick"
+    @edit-icon="editClick"
+    @del-icon="delClick"
+    @click-item="clickItem"
+    @swipe-del="delClickSwipe"
     @add="addAddress"
-    :dataMapOptions="dataMapOptions"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -206,33 +195,35 @@ export default {
           fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
         },
       ]);
-      const dataMapOptions = reactive({
+      const dataOptions = reactive({
         id: 'testid',
         addressDetail:'testaddressDetail',
         addressName:'testaddressName'
       });
-      const itemClick = ()=>{
-        showToast.text('Click To Address');
+      const clickItem = ()=>{
+        console.log('Click To Address');
       }
       const editClick = ()=>{
-        showToast.text('Click To Edit');
+        console.log('Click To Edit');
       }
       const delClick = ()=>{
-        showToast.text('Click To Delete');
+        console.log('Click To Delete');
       }
+      const delClickSwipe = () => {
+        console.log('Click On DelClickSwipe');
+      };
       const addAddress = ()=>{
-        showToast.text('Click To Add');
+        console.log('Click To Add');
       }
       return {
-        itemClick,
-        holdDownClick,
         data,
+        clickItem,
         delClick,
         editClick,
-        copyClick,
         setClick,
+        delClickSwipe,
         addAddress,
-        dataMapOptions
+        dataOptions
       };
     }
   };
@@ -250,6 +241,7 @@ export default {
 | long-press | 长按功能         | boolean | `false`  |
 | swipe-edition      | 右滑功能         | boolean | `false`  |
 | show-bottom-button | 是否展示底部按钮 | boolean | `true`   |
+| data-options | 自定义 `key` 值时,设置映射关系 | Object | -   |
 
 ### Events
 
@@ -276,7 +268,7 @@ export default {
 | swiperight    | 地址列表项右滑区域               | 滑动功能下使用 |
 | longpressbtns | 地址列表项长按遮罩内容           | 长按功能下使用 |
 
-### data 数组中每一项 与 dataMapOptions 对象的参数抹
+### data 数组中每一项 与 dataOptions 对象的参数磨
 
 下面是 `data` 数组中每一项 基础数据结构
 
@@ -290,10 +282,10 @@ const dataInfo = {
 };
 ```
 
-组件内优先获取基础数据结构中定义的字段,若想自定义 `key` 值,可以通过 `dataMapOptions` 设置映射关系
+组件内优先获取基础数据结构中定义的字段,若想自定义 `key` 值,可以通过 `dataOptions` 设置映射关系
 
 ```javascript
-const dataMapOptions = {
+const dataOptions = {
   id: "testid",
   addressDetail: "testaddressDetail",
   addressName: "testaddressName",

+ 38 - 40
src/packages/__VUE/addresslist/doc.taro.md

@@ -23,11 +23,11 @@ app.use(AddressList);
 <template>
   <nut-address-list
     :data="data"
-    @delIcon="delClick"
-    @editIcon="editClick"
-    @itemClick="itemClick"
+    @click-item="clickItem"
+    @del-icon="delClick"
+    @edit-icon="editClick"
     :show-bottom-button="false"
-    :dataMapOptions="dataMapOptions"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
@@ -51,12 +51,12 @@ export default {
         fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
       },
     ]);
-    const dataMapOptions = reactive({
+    const dataOptions = reactive({
       id: 'testid',
       addressDetail:'testaddressDetail',
       addressName:'testaddressName'
     });
-    const itemClick = ()=>{
+    const clickItem = ()=>{
       console.log('Click To Address');
     }
     const delClick = ()=>{
@@ -66,15 +66,11 @@ export default {
       console.log('Click To Edit');
     }
     return {
-      itemClick,
-      holdDownClick,
       data,
+      clickItem,
       delClick,
       editClick,
-      copyClick,
-      setClick,
-      addAddress,
-      dataMapOptions
+      dataOptions
     };
   }
 };
@@ -92,13 +88,13 @@ export default {
     :data="data"
     long-press
     :show-bottom-button="false"
-    @DelIcon="delClick"
-    @EditIcon="editClick"
-    @Item="itemClick"
-    @longPressCopyClick="copyClick"
-    @longPressSetClick="setClick"
-    @longPressDelClick="delClick"
-    :dataMapOptions="dataMapOptions"
+    @del-icon="delClick"
+    @edit-icon="editClick"
+    @click-item="clickItem"
+    @long-copy="copyClick"
+    @long-set="setClick"
+    @long-del="delClickLong"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
@@ -122,12 +118,12 @@ export default {
           fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
         },
       ]);
-      const dataMapOptions = reactive({
+      const dataOptions = reactive({
         id: 'testid',
         addressDetail:'testaddressDetail',
         addressName:'testaddressName'
       });
-      const itemClick = ()=>{
+      const clickItem = ()=>{
         console.log('Click To Address');
       }
       const delClick = ()=>{
@@ -142,19 +138,18 @@ export default {
       const setClick = ()=>{
         console.log('Click On Settings');
       }
-      const addAddress = ()=>{
+      const delClickLong = ()=>{
         console.log('Click To Add');
       }
       return {
-        itemClick,
-        holdDownClick,
         data,
+        clickItem,
         delClick,
         editClick,
         copyClick,
         setClick,
-        addAddress,
-        dataMapOptions
+        delClickLong,
+        dataOptions
       };
     }
   };
@@ -171,12 +166,12 @@ export default {
     :data="data"
     swipe-edition
     show-bottom-button
-    @Item="itemClick"
-    @EditIcon="editClick"
-    @DelIcon="delClick"
-    @swipeDelClick="delClick"
+    @edit-icon="editClick"
+    @del-icon="delClick"
+    @click-item="clickItem"
+    @swipe-del="delClickSwipe"
     @add="addAddress"
-    :dataMapOptions="dataMapOptions"
+    :data-options="dataOptions"
   >
   </nut-address-list>
 </template>
@@ -200,12 +195,12 @@ export default {
           fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试'
         },
       ]);
-      const dataMapOptions = reactive({
+      const dataOptions = reactive({
         id: 'testid',
         addressDetail:'testaddressDetail',
         addressName:'testaddressName'
       });
-      const itemClick = ()=>{
+      const clickItem = ()=>{
         console.log('Click To Address');
       }
       const editClick = ()=>{
@@ -214,19 +209,21 @@ export default {
       const delClick = ()=>{
         console.log('Click To Delete');
       }
+      const delClickSwipe = () => {
+        console.log('Click On DelClickSwipe');
+      };
       const addAddress = ()=>{
         console.log('Click To Add');
       }
       return {
-        itemClick,
-        holdDownClick,
         data,
+        clickItem,
         delClick,
         editClick,
-        copyClick,
         setClick,
+        delClickSwipe,
         addAddress,
-        dataMapOptions
+        dataOptions
       };
     }
   };
@@ -244,6 +241,7 @@ export default {
 | long-press | 长按功能         | boolean | `false`  |
 | swipe-edition      | 右滑功能         | boolean | `false`  |
 | show-bottom-button | 是否展示底部按钮 | boolean | `true`   |
+| data-options | 自定义 `key` 值时,设置映射关系 | Object | -   |
 
 ### Events
 
@@ -270,7 +268,7 @@ export default {
 | swiperight    | 地址列表项右滑区域               | 滑动功能下使用 |
 | longpressbtns | 地址列表项长按遮罩内容           | 长按功能下使用 |
 
-### data 数组中每一项 与 dataMapOptions 对象的参数磨平
+### data 数组中每一项 与 dataOptions 对象的参数磨平
 
 下面是 `data` 数组中每一项 基础数据结构
 
@@ -284,10 +282,10 @@ const dataInfo = {
 };
 ```
 
-组件内优先获取基础数据结构中定义的字段,若想自定义 `key` 值,可以通过 `dataMapOptions` 设置映射关系
+组件内优先获取基础数据结构中定义的字段,若想自定义 `key` 值,可以通过 `dataOptions` 设置映射关系
 
 ```javascript
-const dataMapOptions = {
+const dataOptions = {
   id: "testid",
   addressDetail: "testaddressDetail",
   addressName: "testaddressName",

+ 14 - 3
src/packages/__VUE/addresslist/index.scss

@@ -39,9 +39,6 @@
     display: flex;
     align-items: center;
     position: relative;
-    &:last-child {
-      border-bottom: none;
-    }
     &__mask {
       position: absolute;
       top: 0;
@@ -59,6 +56,7 @@
       &-del {
         height: 55px;
         width: 55px;
+        padding: 0 10px;
         border-radius: 50%;
         text-align: center;
         background-color: $white;
@@ -66,6 +64,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        box-sizing: border-box;
       }
       &-set {
         color: $white;
@@ -77,6 +76,18 @@
       }
     }
   }
+  &-general {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  .nut-swipe {
+    &:last-of-type {
+      .nut-address-list-swipe {
+        border-bottom: none;
+      }
+    }
+  }
   &-item {
     width: 100%;
     &__info {

+ 6 - 6
src/packages/__VUE/addresslist/index.taro.vue

@@ -8,7 +8,7 @@
       :swipeEdition="swipeEdition"
       @delIcon="clickDelIcon"
       @editIcon="clickEditIcon"
-      @itemClick="clickContentItem"
+      @clickItem="clickContentItem"
       @swipeDel="clickSwipeDel"
       @longCopy="clickLongCopy"
       @longSet="clickLongSet"
@@ -60,7 +60,7 @@ export default create({
       type: Boolean,
       default: true
     },
-    dataMapOptions: {
+    dataOptions: {
       type: Object,
       default: {}
     }
@@ -69,7 +69,7 @@ export default create({
     GeneralShell,
     [Button.name]: Button
   },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
+  emits: ['delIcon', 'editIcon', 'clickItem', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
     const dataArray = ref([]) as any;
@@ -88,9 +88,9 @@ export default create({
     });
     //磨平参数差异
     const trowelData = () => {
-      if (Object.keys(props.dataMapOptions).length > 0) {
+      if (Object.keys(props.dataOptions).length > 0) {
         dataArray.value = props.data.map((item) => {
-          return floatData(dataInfo, item, props.dataMapOptions);
+          return floatData(dataInfo, item, props.dataOptions);
         });
       }
     };
@@ -110,7 +110,7 @@ export default create({
       event.stopPropagation();
     };
     const clickContentItem = (event: Event, item: unknown) => {
-      emit('itemClick', event, item);
+      emit('clickItem', event, item);
       event.stopPropagation();
     };
     const clickLongCopy = (event: Event, item: unknown) => {

+ 6 - 6
src/packages/__VUE/addresslist/index.vue

@@ -8,7 +8,7 @@
       :swipeEdition="swipeEdition"
       @delIcon="clickDelIcon"
       @editIcon="clickEditIcon"
-      @itemClick="clickContentItem"
+      @clickItem="clickContentItem"
       @swipeDel="clickSwipeDel"
       @longCopy="clickLongCopy"
       @longSet="clickLongSet"
@@ -60,7 +60,7 @@ export default create({
       type: Boolean,
       default: true
     },
-    dataMapOptions: {
+    dataOptions: {
       type: Object,
       default: {}
     }
@@ -69,7 +69,7 @@ export default create({
     GeneralShell,
     [Button.name]: Button
   },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
+  emits: ['delIcon', 'editIcon', 'clickItem', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
     const dataArray = ref([]) as any;
@@ -88,9 +88,9 @@ export default create({
     });
     //磨平参数差异
     const trowelData = () => {
-      if (Object.keys(props.dataMapOptions).length > 0) {
+      if (Object.keys(props.dataOptions).length > 0) {
         dataArray.value = props.data.map((item) => {
-          return floatData(dataInfo, item, props.dataMapOptions);
+          return floatData(dataInfo, item, props.dataOptions);
         });
       }
     };
@@ -110,7 +110,7 @@ export default create({
       event.stopPropagation();
     };
     const clickContentItem = (event: Event, item: unknown) => {
-      emit('itemClick', event, item);
+      emit('clickItem', event, item);
       event.stopPropagation();
     };
     const clickLongCopy = (event: Event, item: unknown) => {

+ 1 - 0
src/packages/__VUE/avatar/index.scss

@@ -6,6 +6,7 @@
   position: relative;
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
+  vertical-align: top;
   img {
     display: block;
     width: 100%;

+ 13 - 9
src/packages/__VUE/category/demo.vue

@@ -2,11 +2,11 @@
   <div class="demo">
     <h2>{{ translate('title1') }}</h2>
     <nut-category :category="category" @change="change">
-      <nut-category-pane :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane>
+      <nut-category-pane :categoryChild="categoryChild1" @onChange="onChange"> </nut-category-pane>
     </nut-category>
     <h2>{{ translate('title2') }}</h2>
     <nut-category :category="category" @change="changeText">
-      <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
+      <nut-category-pane type="text" :categoryChild="categoryChild2" @onChange="onChange"> </nut-category-pane
     ></nut-category>
 
     <h2>{{ translate('title3') }}</h2>
@@ -39,10 +39,12 @@ export default createDemo({
   setup() {
     initTranslate();
     const data = reactive({
-      categoryInfo: {},
+      categoryInfo1: {},
       category: [{}],
-      categoryChild: [{}],
-      customCategory: [{}]
+      categoryChild1: [{}],
+      customCategory: [{}],
+      categoryInfo2: {},
+      categoryChild2: [{}]
     });
 
     onMounted(() => {
@@ -56,20 +58,22 @@ export default createDemo({
         .then((response) => response.json())
         .then((res) => {
           const { categoryInfo, categoryChild, customCategory } = res;
-          data.categoryInfo = categoryInfo;
+          data.categoryInfo1 = categoryInfo;
           data.category = categoryInfo.category;
-          data.categoryChild = categoryChild;
+          data.categoryChild1 = categoryChild;
           data.customCategory = customCategory;
+          data.categoryInfo2 = categoryInfo;
+          data.categoryChild2 = categoryChild;
         })
         .catch((err) => console.log('Oh, error', err));
     };
 
     const change = (index: any) => {
-      data.categoryChild = [].concat(data?.categoryInfo?.category[index + 1]?.children as any);
+      data.categoryChild1 = [].concat(data?.categoryInfo1?.category[index]?.children as any);
     };
 
     const changeText = (index: any) => {
-      data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
+      data.categoryChild2 = [].concat(data.categoryInfo2.category[index].children as any);
     };
 
     const changeCustom = (v: any) => {

+ 14 - 44
src/packages/__VUE/category/doc.taro.md

@@ -17,6 +17,10 @@ app.use(CategoryPane);
 
 ### 经典分类模式
 
+data 数据格式可参考
+[categoryData.js](https//storage.360buyimg.com/nutui/3x/categoryData.js)。
+
+
 :::demo
 
 ```html
@@ -28,35 +32,23 @@ app.use(CategoryPane);
 </template>
 <script lang="ts">
 import { reactive, toRefs, onMounted } from 'vue';
+import { categoryInfo, categoryChild, customCategory } from './data';
 
 export default {
   setup() {
     const data = reactive({
-      categoryInfo: {},
       category: [{}],
       categoryChild: [{}]
     });
 
     onMounted(() => {
-      setTimeout(() => {
-        getData();
-      }, 500);
+      data.category = categoryInfo.category;
+      data.categoryChild = categoryChild;
+      data.customCategory = customCategory;
     });
 
-    const getData = () => {
-      fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-        .then((response) => response.json())
-        .then((res) => {
-          const { categoryInfo, categoryChild } = res;
-          data.categoryInfo = categoryInfo;
-          data.category = categoryInfo.category;
-          data.categoryChild = categoryChild;
-        })
-        .catch((err) => console.log('Oh, error', err)); 
-    };
-
     const change = (index: any) => {
-      data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
+      data.categoryChild = [].concat(data.categoryInfo.category[index].children as any);
     };
     const onChange =()=>{
         console.log("当前分类数据");
@@ -88,36 +80,22 @@ export default {
 </template>
 <script lang="ts">
 import { reactive, toRefs, onMounted } from 'vue';
+import { categoryInfo, categoryChild, customCategory } from './data';
 
 export default {
   setup() {
     const data = reactive({
-      categoryInfo: {},
       category: [{}],
       categoryChild: [{}]
     });
 
     onMounted(() => {
-      setTimeout(() => {
-        getData();
-      }, 500);
+      category: [{}],
+      categoryChild: [{}]
     });
 
-    const getData = () => {
-      fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-        .then((response) => response.json())
-        .then((res) => {
-          console.log('res', res)
-          const { categoryInfo, categoryChild } = res;
-          data.categoryInfo = categoryInfo;
-          data.category = categoryInfo.category;
-          data.categoryChild = categoryChild;
-        })
-        .catch((err) => console.log('Oh, error', err)); 
-    };
-
     const changeText = (index: any) => {
-      data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
+      data.categoryChild = [].concat(data.categoryInfo.category[index].children as any);
     };
 
     const onChange =()=>{
@@ -150,6 +128,7 @@ export default {
 </template>
 <script lang="ts">
 import { reactive, toRefs, onMounted } from 'vue';
+import { categoryInfo, categoryChild, customCategory } from './data';
 
 export default {
   setup() {
@@ -161,15 +140,6 @@ export default {
          getData();
       }, 500);
     });
-    const getData = () => {
-      fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-        .then((response) => response.json())
-        .then((res) => {
-          const { customCategory } = res;
-          data.customCategory = customCategory;
-        })
-        .catch((err) => console.log('Oh, error', err)); 
-    };
     const changeCustom = () => {
       console.log('点击分类数据')
     };

+ 2 - 2
src/packages/__VUE/categorypane/index.taro.vue

@@ -4,7 +4,7 @@
       <div v-for="(item, index) in categoryChild" :key="index">
         <div class="nut-category-pane__childTitle">{{ item?.catName }}</div>
 
-        <div v-if="item.catType == 1" class="nut-category-pane__childItemList">
+        <div v-if="item?.catType == 1" class="nut-category-pane__childItemList">
           <div
             v-for="(sku, key) in item.childCateList"
             class="nut-category-pane__childItem"
@@ -23,7 +23,7 @@
       <div v-for="(item, index) in categoryChild" :key="index">
         <div class="nut-category-pane__childTitle">{{ item?.catName }}</div>
 
-        <div v-if="item.catType == 1" class="nut-category-pane__childItemList">
+        <div v-if="item?.catType == 1" class="nut-category-pane__childItemList">
           <div
             v-for="(sku, key) in item.childCateList"
             class="nut-category-pane__childItem"

+ 5 - 5
src/packages/__VUE/swiper/doc.en-US.md

@@ -31,7 +31,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -174,7 +174,7 @@ Support dynamic addition / deletion of pictures
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -221,7 +221,7 @@ Support dynamic addition / deletion of pictures
         <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
-        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
         <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -285,7 +285,7 @@ Support dynamic addition / deletion of pictures
         <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
-        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
         <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -437,7 +437,7 @@ You can manually switch through `api` (`prev`, `next`)
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />

+ 8 - 8
src/packages/__VUE/swiper/doc.md

@@ -31,7 +31,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -89,7 +89,7 @@ app.use(SwiperItem);
         setTimeout(() => {
           state.list = [
             'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-            'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+            'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg,
             'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
             'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
           ];
@@ -134,7 +134,7 @@ app.use(SwiperItem);
         page: 2,
         list: [
           'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg,
           'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
           'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
         ]
@@ -174,7 +174,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -221,7 +221,7 @@ app.use(SwiperItem);
         <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
-        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
         <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -285,7 +285,7 @@ app.use(SwiperItem);
         <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
-        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
         <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -376,7 +376,7 @@ app.use(SwiperItem);
         page: 2,
         list: [
           'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg,
           'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
           'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
         ],
@@ -438,7 +438,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />

+ 8 - 8
src/packages/__VUE/swiper/doc.taro.md

@@ -31,7 +31,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -89,7 +89,7 @@ app.use(SwiperItem);
         setTimeout(() => {
           state.list = [
             'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-            'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+            'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg,
             'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
             'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
           ];
@@ -134,7 +134,7 @@ app.use(SwiperItem);
         page: 2,
         list: [
           'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg,
           'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
           'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
         ]
@@ -174,7 +174,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -221,7 +221,7 @@ app.use(SwiperItem);
         <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
-        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
         <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -285,7 +285,7 @@ app.use(SwiperItem);
         <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
-        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
         <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -376,7 +376,7 @@ app.use(SwiperItem);
         page: 2,
         list: [
           'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg,
           'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
           'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
         ],
@@ -438,7 +438,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />

+ 34 - 26
src/sites/mobile-taro/vue/src/business/pages/addresslist/index.vue

@@ -4,11 +4,11 @@
     <h2>基础用法</h2>
     <nut-address-list
       :data="data"
-      @delIcon="delClick"
-      @editIcon="editClick"
-      @itemClick="itemClick"
+      @del-icon="delClick"
+      @edit-icon="editClick"
+      @click-item="clickItem"
       :showBottomButton="false"
-      :dataMapOptions="dataMapOptions"
+      :data-Options="dataOptions"
     >
     </nut-address-list>
     <h2>长按功能</h2>
@@ -16,13 +16,13 @@
       :data="data"
       longPress
       :showBottomButton="false"
-      @delIcon="delClick"
-      @editIcon="editClick"
-      @itemClick="itemClick"
-      @longCopy="copyClick"
-      @longSet="setClick"
-      @longDel="delClick"
-      :dataMapOptions="dataMapOptions"
+      @del-icon="delClick"
+      @edit-icon="editClick"
+      @click-item="clickItem"
+      @long-copy="copyClick"
+      @long-set="setClick"
+      @long-del="delClickLong"
+      :data-Options="dataOptions"
     >
     </nut-address-list>
     <h2>滑动功能</h2>
@@ -30,12 +30,12 @@
       :data="data"
       swipeEdition
       showBottomButton
-      @delIcon="delClick"
-      @editIcon="editClick"
-      @itemClick="itemClick"
-      @swipeDelClick="delClick"
+      @del-icon="delClick"
+      @edit-icon="editClick"
+      @click-item="clickItem"
+      @swipe-del="delClickSwipe"
       @add="addAddress"
-      :dataMapOptions="dataMapOptions"
+      :data-Options="dataOptions"
     >
     </nut-address-list>
   </div>
@@ -66,38 +66,46 @@ export default {
         fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
       }
     ]);
-    const dataMapOptions = reactive({
+    const dataOptions = reactive({
       id: 'testid',
       addressDetail: 'testaddressDetail',
       addressName: 'testaddressName'
     });
-    const itemClick = () => {
-      console.log('点击了地址哦~');
+    const clickItem = () => {
+      console.log('Click To Address');
     };
     const delClick = () => {
-      console.log('点击了删除哦~');
+      console.log('Click To Delete');
     };
     const editClick = () => {
-      console.log('点击了编辑哦~');
+      console.log('Click To Edit');
     };
     const copyClick = () => {
-      console.log('复制成功~');
+      console.log('Click To Copy');
     };
     const setClick = () => {
-      console.log('点击了设置~');
+      console.log('Click On Settings');
+    };
+    const delClickLong = () => {
+      console.log('Click On DelClickLong');
+    };
+    const delClickSwipe = () => {
+      console.log('Click On DelClickSwipe');
     };
     const addAddress = () => {
-      console.log('添加新地址~');
+      console.log('Click To Add');
     };
     return {
-      itemClick,
+      clickItem,
       data,
       delClick,
       editClick,
       copyClick,
       setClick,
+      delClickLong,
+      delClickSwipe,
       addAddress,
-      dataMapOptions,
+      dataOptions,
       env
     };
   }

+ 165 - 46
src/sites/mobile-taro/vue/src/business/pages/category/data.js

@@ -161,20 +161,169 @@ export const categoryInfo = {
       catType: 1,
       showPic: true,
       showVideo: false,
-      children: categoryChild
+      children: [
+        {
+          catId: '1581',
+          catName: '地方特产',
+          catLevel: 2,
+          catType: 1,
+          childCateList: [
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/183517/38/7834/227702/60be1915Ed04664b0/eaf7536ab2c5f4b0.jpg',
+              catId: '1589',
+              catName: '新疆',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/88907/33/6457/231663/5df33b56Eae1ffafd/819f96550ae520a3.jpg',
+              catId: '2644',
+              catName: '北京',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg:
+                'https://m.360buyimg.com/n2/jfs/t1/109937/34/10781/169393/5e81b698Ede55aa35/62f6c77ce58c8866.jpg',
+              catId: '2647',
+              catName: '山西',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/28325/2/11472/104599/5c90b563E7f9df943/c7c4e5f8ba45e64e.jpg',
+              catId: '2648',
+              catName: '内蒙古',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t23359/28/1944198302/228556/cb81ba0c/5b6d5786Nf3c63ac8.jpg',
+              catId: '2653',
+              catName: '福建',
+              showPic: true,
+              showVideo: false
+            }
+          ],
+          showPic: true,
+          showVideo: false
+        },
+        {
+          catId: '1583',
+          catName: '休闲食品',
+          catLevel: 2,
+          catType: 1,
+          childCateList: [
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/124512/30/4055/648064/5ed85dacE631811d6/a1ddb3d215909a1f.jpg',
+              catId: '1590',
+              catName: '休闲零食',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg:
+                'https://m.360buyimg.com/n2/jfs/t1/199261/17/17179/132409/6191fb65E1d49e5d2/d42c69c018b646d0.jpg',
+              catId: '1591',
+              catName: '坚果炒货',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/126378/6/3795/857665/5ed5ab9fE61ee75df/79253ec46360ca43.png',
+              catId: '1592',
+              catName: '肉干肉脯',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/221194/12/2713/225980/6191fceeE2e5d1fee/b7140001d23c9198.jpg',
+              catId: '1593',
+              catName: '蜜饯果干',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg:
+                'https://m.360buyimg.com/n2/jfs/t1/130034/25/15618/523938/5fac8e15E84b871da/45dc31dee1a4e220.png',
+              catId: '1594',
+              catName: '糖果',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/177728/10/9717/731375/60cb77e9E4c10e9e1/7ae1d424f0c4d406.png',
+              catId: '1595',
+              catName: '饼干蛋糕',
+              showPic: true,
+              showVideo: false
+            }
+          ],
+          showPic: true,
+          showVideo: false
+        },
+        {
+          catId: '1585',
+          catName: '饮料冲调',
+          catLevel: 2,
+          catType: 1,
+          childCateList: [
+            {
+              backImg:
+                'https://m.360buyimg.com/n2/jfs/t1/175064/33/23005/219475/6168eee1Ed59f4aef/a7f7dab7fb5c8d99.jpg',
+              catId: '1601',
+              catName: '冲饮谷物',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t25171/268/1139055306/236004/bb244324/5b88b326Na7890577.jpg',
+              catId: '1602',
+              catName: '饮料',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/171130/22/6024/128321/6020b2e4Ef4ba4542/353a556d47c25121.jpg',
+              catId: '3986',
+              catName: '咖啡/奶茶',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg:
+                'https://m.360buyimg.com/n2/jfs/t1/107411/30/15915/199263/5eaf6b4cE0a7b4080/41335d5d95f576ce.jpg',
+              catId: '9434',
+              catName: '牛奶乳品',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg:
+                'https://m.360buyimg.com/n2/jfs/t1/201557/13/17647/135095/61a9ceecE312cb7f8/81b6c24f7d7727c1.jpg',
+              catId: '10975',
+              catName: '饮用水',
+              showPic: true,
+              showVideo: false
+            },
+            {
+              backImg: 'https://m.360buyimg.com/n2/jfs/t1/51415/33/16609/122207/61397309E88c81fbc/7c38686c1f2ffb84.jpg',
+              catId: '12200',
+              catName: '蜂蜜/柚子茶',
+              showPic: true,
+              showVideo: false
+            }
+          ],
+          showPic: true,
+          showVideo: false
+        }
+      ]
     },
     {
       catId: '9987',
       catName: '手机通讯',
       showPic: true,
       showVideo: false,
-      children: categoryChild
-    },
-    {
-      catId: '737',
-      catName: '家用电器',
-      showPic: true,
-      showVideo: false,
       children: [
         {
           catId: '830',
@@ -294,8 +443,8 @@ export const categoryInfo = {
       ]
     },
     {
-      catId: '652',
-      catName: '数码',
+      catId: '737',
+      catName: '家用电器',
       showPic: true,
       showVideo: false,
       children: [
@@ -720,8 +869,8 @@ export const categoryInfo = {
       ]
     },
     {
-      catId: '670',
-      catName: '电脑、办公',
+      catId: '652',
+      catName: '数码',
       showPic: true,
       showVideo: false,
       children: [
@@ -1031,8 +1180,8 @@ export const categoryInfo = {
       ]
     },
     {
-      catId: '17329',
-      catName: '箱包皮具',
+      catId: '670',
+      catName: '电脑、办公',
       showPic: true,
       showVideo: false,
       children: [
@@ -1491,8 +1640,8 @@ export const categoryInfo = {
       ]
     },
     {
-      catId: '1672',
-      catName: '礼品',
+      catId: '17329',
+      catName: '箱包皮具',
       showPic: true,
       showVideo: false,
       children: [
@@ -1739,36 +1888,6 @@ export const categoryInfo = {
           showVideo: false
         }
       ]
-    },
-    {
-      catId: '16750',
-      catName: '个人护理',
-      showPic: true,
-      showVideo: false
-    },
-    {
-      catId: '1320',
-      catName: '食品饮料',
-      showPic: true,
-      showVideo: false
-    },
-    {
-      catId: '15901',
-      catName: '家庭清洁/纸品',
-      showPic: true,
-      showVideo: false
-    },
-    {
-      catId: '15248',
-      catName: '家纺',
-      showPic: true,
-      showVideo: false
-    },
-    {
-      catId: '9192',
-      catName: '医疗保健',
-      showPic: true,
-      showVideo: false
     }
   ]
 };

+ 9 - 7
src/sites/mobile-taro/vue/src/business/pages/category/index.vue

@@ -3,12 +3,12 @@
     <Header v-if="env === 'WEB'" />
     <h2>经典分类模式</h2>
     <nut-category :category="category" @change="change">
-      <nut-category-pane :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane>
+      <nut-category-pane :categoryChild="categoryChild1" @onChange="onChange"> </nut-category-pane>
     </nut-category>
 
     <h2>只显示文字</h2>
     <nut-category :category="category" @change="changeText">
-      <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
+      <nut-category-pane type="text" :categoryChild="categoryChild2" @onChange="onChange"> </nut-category-pane
     ></nut-category>
 
     <h2>自定义分类</h2>
@@ -30,24 +30,26 @@ export default {
     const env = Taro.getEnv();
     const data = reactive({
       category: [{}],
-      categoryChild: [{}],
-      customCategory: [{}]
+      categoryChild1: [{}],
+      customCategory: [{}],
+      categoryChild2: [{}]
     });
 
     onMounted(() => {
       setTimeout(() => {
         data.category = categoryInfo.category;
-        data.categoryChild = categoryChild;
+        data.categoryChild1 = categoryChild;
         data.customCategory = customCategory;
+        data.categoryChild2 = categoryChild;
       }, 500);
     });
 
     const change = (index: any) => {
-      data.categoryChild = [].concat(categoryInfo.category[index + 1].children as any);
+      data.categoryChild1 = [].concat(data.category[index]?.children as any);
     };
 
     const changeText = (index: any) => {
-      data.categoryChild = [].concat(categoryInfo.category[index + 1].children as any);
+      data.categoryChild2 = [].concat(data.category[index]?.children as any);
     };
 
     const changeCustom = () => {