ソースを参照

Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

Drjingfubo 3 年 前
コミット
089615d4e7

+ 5 - 6
src/packages/__VUE/swipe/demo.vue

@@ -2,14 +2,14 @@
   <div class="demo full">
     <h2>{{ translate('basic') }}</h2>
     <nut-swipe>
-      <nut-cell round-radius="0" :desc="translate('leftDel')" />
+      <nut-cell round-radius="0" :title="translate('leftDel')" />
       <template #right>
         <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
       </template>
     </nut-swipe>
     <h2>{{ translate('disable') }}</h2>
     <nut-swipe disabled>
-      <nut-cell round-radius="0" :desc="translate('disable')" />
+      <nut-cell round-radius="0" :title="translate('disable')" />
       <template #right>
         <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
       </template>
@@ -19,7 +19,7 @@
       <template #left>
         <nut-button shape="square" style="height: 100%" type="success">{{ translate('select') }}</nut-button>
       </template>
-      <nut-cell round-radius="0" :desc="translate('swipeLRDesc')" />
+      <nut-cell round-radius="0" :title="translate('swipeLRDesc')" />
       <template #right>
         <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
         <nut-button shape="square" style="height: 100%" type="info">{{ translate('collect') }}</nut-button>
@@ -115,10 +115,9 @@ export default createDemo({
     };
     const open = (obj: any) => {
       console.log(obj);
-      checked.value = true;
     };
-    const close = () => {
-      checked.value = false;
+    const close = (obj: any) => {
+      console.log(obj);
     };
     return { checked, number, changSwitch, refSwipe, open, close, translate };
   }

+ 17 - 18
src/packages/__VUE/swipe/doc.en-US.md

@@ -22,7 +22,7 @@ app.use(Button);
 ```html
 <template>
 <nut-swipe>
-    <nut-cell round-radius="0" desc="Swipe left to delete" />
+    <nut-cell round-radius="0" title="Swipe left to delete" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
     </template>
@@ -39,7 +39,7 @@ app.use(Button);
 ```html
 <template>
 <nut-swipe disabled>
-    <nut-cell round-radius="0" desc="Disable swipe" />
+    <nut-cell round-radius="0" title="Disable swipe" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
     </template>
@@ -58,7 +58,7 @@ app.use(Button);
     <template #left>
         <nut-button shape="square" style="height:100%" type="success">Select</nut-button>
     </template>
-    <nut-cell round-radius="0" desc="You can swipe left and right" />
+    <nut-cell round-radius="0" title="You can swipe left and right" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">Delelte</nut-button>
         <nut-button shape="square" style="height:100%" type="info">Collect</nut-button>
@@ -99,12 +99,11 @@ export default {
                 refSwipe.value?.close();
             }
         };
-         const open = (obj: any) => {
+        const open = (obj: any) => {
             console.log(obj);
-            checked.value = true;
         };
-        const close = () => {
-            checked.value = false;
+        const close = (obj: any) => {
+            console.log(obj);
         };
         return { checked, changSwitch, refSwipe, open, close };
     }
@@ -153,15 +152,15 @@ export default {
 | Attribute                   | Description                                    | Type    | Default |
 |-----------------------------|------------------------------------------------|---------|---------|
 | name                        | identifies                                     | string  | -       |
-| disabled                    | Whether to disabled swipe                      | string  | `false`   |
-| touch-move-prevent-default  | Whether to stop touchmove event preventdefault | boolean | `false`   |
-| touch-move-stop-propagation | Whether to stop touchmove event propagation    | boolean | `false`   |
+| disabled                    | Whether to disabled swipe                      | string  | `false` |
+| touch-move-prevent-default  | Whether to stop touchmove event preventdefault | boolean | `false` |
+| touch-move-stop-propagation | Whether to stop touchmove event propagation    | boolean | `false` |
 ### Events
 
-| Event | Description                  | Arguments                  |
-|-------|------------------------------|----------------------------|
-| open  | Emitted when Swipe is opened | { type:'left' \| 'right' } |
-| close | Emitted when Swipe is closed | { type:'left' \| 'right' } |
+| Event | Description                  | Arguments           |
+|-------|------------------------------|---------------------|
+| open  | Emitted when Swipe is opened | `{ name,position }` |
+| close | Emitted when Swipe is closed | `{ name,position }` |
     
 
 ### Slots
@@ -175,7 +174,7 @@ export default {
 
 Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Swipe instance and call instance methods.
 
-| Name  | Description | Arguments         |
-|-------|-------------|-------------------|
-| open  | open swipe  | 'left' \| 'right' |
-| close | close swipe |                   |
+| Name  | Description | Arguments           |
+|-------|-------------|---------------------|
+| open  | open swipe  | `{ name,position }` |
+| close | close swipe | `{ name,position }` |

+ 20 - 22
src/packages/__VUE/swipe/doc.md

@@ -23,7 +23,7 @@ app.use(Button);
 ```html
 <template>
 <nut-swipe>
-    <nut-cell round-radius="0" desc="左滑删除" />
+    <nut-cell round-radius="0" title="左滑删除" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
     </template>
@@ -40,7 +40,7 @@ app.use(Button);
 ```html
 <template>
 <nut-swipe disabled>
-    <nut-cell round-radius="0" desc="禁止滑动" />
+    <nut-cell round-radius="0" title="禁止滑动" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
     </template>
@@ -59,7 +59,7 @@ app.use(Button);
     <template #left>
         <nut-button shape="square" style="height:100%" type="success">选择</nut-button>
     </template>
-    <nut-cell round-radius="0" desc="左滑右滑都可以哦" />
+    <nut-cell round-radius="0" title="左滑右滑都可以哦" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
         <nut-button shape="square" style="height:100%" type="info">收藏</nut-button>
@@ -100,12 +100,11 @@ export default {
                 refSwipe.value?.close();
             }
         };
-         const open = (obj: any) => {
+        const open = (obj: any) => {
             console.log(obj);
-            checked.value = true;
         };
-        const close = () => {
-            checked.value = false;
+        const close = (obj: any) => {
+            console.log(obj);
         };
         return { checked, changSwitch, refSwipe, open, close };
     }
@@ -151,19 +150,18 @@ export default {
 ## API
 ### Props
 
-| 参数                        | 说明                 | 类型    | 默认值 |
-|-----------------------------|----------------------|---------|--------|
-| name                        | 唯一标识             | string  | -      |
-| disabled                    | 是否禁用滑动         | string  | `false`  |
-| touch-move-prevent-default  | 是否阻止滑动事件行为 | boolean | `false`  |
-| touch-move-stop-propagation | 是否阻止滑动事件冒泡 | boolean | `false`  |
+| 参数                        | 说明                 | 类型    | 默认值  |
+|-----------------------------|----------------------|---------|---------|
+| name                        | 唯一标识             | string  | -       |
+| disabled                    | 是否禁用滑动         | string  | `false` |
+| touch-move-prevent-default  | 是否阻止滑动事件行为 | boolean | `false` |
+| touch-move-stop-propagation | 是否阻止滑动事件冒泡 | boolean | `false` |
 ### Events
 
-| 事件名 | 说明       | 回调参数                   |
-|--------|------------|----------------------------|
-| open   | 打开时触发 | { type:'left' \| 'right' } |
-| close  | 关闭时触发 | { type:'left' \| 'right' } |
-    
+| 事件名 | 说明       | 回调参数            |
+|--------|------------|---------------------|
+| open   | 打开时触发 | `{ name,position }` |
+| close  | 关闭时触发 | `{ name,position }` |
 
 ### Slots
 | 名称    | 说明         |
@@ -175,7 +173,7 @@ export default {
 ### Methods
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 `Swipe` 实例并调用实例方法。
 
-| 方法名 | 说明             | 参数              |
-|--------|------------------|-------------------|
-| open   | 打开单元格侧边栏 | 'left' \| 'right' |
-| close  | 收起单元格侧边栏 |                   |
+| 方法名 | 说明             | 参数                |
+|--------|------------------|---------------------|
+| open   | 打开单元格侧边栏 | `{ name,position }` |
+| close  | 收起单元格侧边栏 | `{ name,position }` |

+ 20 - 21
src/packages/__VUE/swipe/doc.taro.md

@@ -23,7 +23,7 @@ app.use(Button);
 ```html
 <template>
 <nut-swipe>
-    <nut-cell round-radius="0" desc="左滑删除" />
+    <nut-cell round-radius="0" title="左滑删除" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
     </template>
@@ -40,7 +40,7 @@ app.use(Button);
 ```html
 <template>
 <nut-swipe disabled>
-    <nut-cell round-radius="0" desc="禁止滑动" />
+    <nut-cell round-radius="0" title="禁止滑动" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
     </template>
@@ -59,7 +59,7 @@ app.use(Button);
     <template #left>
         <nut-button shape="square" style="height:100%" type="success">选择</nut-button>
     </template>
-    <nut-cell round-radius="0" desc="左滑右滑都可以哦" />
+    <nut-cell round-radius="0" title="左滑右滑都可以哦" />
     <template #right>
         <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
         <nut-button shape="square" style="height:100%" type="info">收藏</nut-button>
@@ -100,12 +100,11 @@ export default {
                 refSwipe.value?.close();
             }
         };
-         const open = (obj: any) => {
+        const open = (obj: any) => {
             console.log(obj);
-            checked.value = true;
         };
-        const close = () => {
-            checked.value = false;
+        const close = (obj: any) => {
+            console.log(obj);
         };
         return { checked, changSwitch, refSwipe, open, close };
     }
@@ -151,18 +150,18 @@ export default {
 ## API
 ### Props
 
-| 参数                        | 说明                 | 类型    | 默认值 |
-|-----------------------------|----------------------|---------|--------|
-| name                        | 唯一标识             | string  | -      |
-| disabled                    | 是否禁用滑动         | string  | `false`  |
-| touch-move-prevent-default  | 是否阻止滑动事件行为 | boolean | `false`  |
-| touch-move-stop-propagation | 是否阻止滑动事件冒泡 | boolean | `false`  |
+| 参数                        | 说明                 | 类型    | 默认值  |
+|-----------------------------|----------------------|---------|---------|
+| name                        | 唯一标识             | string  | -       |
+| disabled                    | 是否禁用滑动         | string  | `false` |
+| touch-move-prevent-default  | 是否阻止滑动事件行为 | boolean | `false` |
+| touch-move-stop-propagation | 是否阻止滑动事件冒泡 | boolean | `false` |
 ### Events
 
-| 事件名 | 说明       | 回调参数                   |
-|--------|------------|----------------------------|
-| open   | 打开时触发 | { type:'left' \| 'right' } |
-| close  | 关闭时触发 | { type:'left' \| 'right' } |
+| 事件名 | 说明       | 回调参数            |
+|--------|------------|---------------------|
+| open   | 打开时触发 | `{ name,position }` |
+| close  | 关闭时触发 | `{ name,position }` |
     
 
 ### Slots
@@ -175,7 +174,7 @@ export default {
 ### Methods
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 Swipe 实例并调用实例方法。
 
-| 方法名 | 说明             | 参数              |
-|--------|------------------|-------------------|
-| open   | 打开单元格侧边栏 | 'left' \| 'right' |
-| close  | 收起单元格侧边栏 |                   |
+| 方法名 | 说明             | 参数                |
+|--------|------------------|---------------------|
+| open   | 打开单元格侧边栏 | `{ name,position }` |
+| close  | 收起单元格侧边栏 | `{ name,position }` |

+ 5 - 6
src/sites/mobile-taro/vue/src/feedback/pages/swipe/index.vue

@@ -3,14 +3,14 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-swipe>
-      <nut-cell round-radius="0" desc="左滑删除" />
+      <nut-cell round-radius="0" title="左滑删除" />
       <template #right>
         <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
       </template>
     </nut-swipe>
     <h2>禁止滑动</h2>
     <nut-swipe disabled>
-      <nut-cell round-radius="0" desc="禁止滑动" />
+      <nut-cell round-radius="0" title="禁止滑动" />
       <template #right>
         <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
       </template>
@@ -20,7 +20,7 @@
       <template #left>
         <nut-button shape="square" style="height: 100%" type="success">选择</nut-button>
       </template>
-      <nut-cell round-radius="0" desc="左滑右滑都可以哦" />
+      <nut-cell round-radius="0" title="左滑右滑都可以哦" />
       <template #right>
         <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
         <nut-button shape="square" style="height: 100%" type="info">收藏</nut-button>
@@ -77,10 +77,9 @@ export default {
     };
     const open = (obj: any) => {
       console.log(obj);
-      checked.value = true;
     };
-    const close = () => {
-      checked.value = false;
+    const close = (obj: any) => {
+      console.log(obj);
     };
     return { checked, number, changSwitch, refSwipe, open, close, env };
   }