Skip to content

Commit

Permalink
fix(swipe): 修复组件宽度超出范围以及点击关闭问题 (nutui-uniapp#284)
Browse files Browse the repository at this point in the history 
* fix(swipe): 修复组件宽度超出范围以及点击关闭问题
  • Loading branch information
@xiaohe0601
xiaohe0601 authored Apr 10, 2024
1 parent 719de51 commit 48cc120
Show file tree
Hide file tree
Showing 9 changed files with 329 additions and 262 deletions.
183 changes: 92 additions & 91 deletions docs/components/feedback/swipe.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@
```html
<template>
<nut-swipe>
<nut-cell round-radius="0" title="左滑删除" />
<nut-cell title="左滑删除" round-radius="0"></nut-cell>

<template #right>
<nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
<nut-button style="height: 100%" type="danger" shape="square">删除</nut-button>
</template>
</nut-swipe>
</template>
Expand All @@ -24,9 +25,10 @@
```html
<template>
<nut-swipe disabled>
<nut-cell round-radius="0" title="禁止滑动" />
<nut-cell title="禁止滑动" round-radius="0"></nut-cell>

<template #right>
<nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
<nut-button style="height: 100%" type="danger" shape="square">删除</nut-button>
</template>
</nut-swipe>
</template>
Expand All @@ -38,12 +40,14 @@
<template>
<nut-swipe>
<template #left>
<nut-button shape="square" style="height:100%" type="success">选择</nut-button>
<nut-button style="height: 100%" type="success" shape="square">选择</nut-button>
</template>
<nut-cell round-radius="0" title="左滑右滑都可以哦" />

<nut-cell title="左滑右滑都可以哦" round-radius="0"></nut-cell>

<template #right>
<nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
<nut-button shape="square" style="height:100%" type="info">收藏</nut-button>
<nut-button style="height: 100%" type="danger" shape="square">删除</nut-button>
<nut-button style="height: 100%" type="info" shape="square">收藏</nut-button>
</template>
</nut-swipe>
</template>
Expand All @@ -53,105 +57,101 @@

```html
<template>
<nut-swipe ref="refSwipe" @open="open" @close="close">
<nut-swipe ref="swipe" :close-on-click="['right']" @open="onOpen" @close="onClose">
<nut-cell title="异步打开关闭">
<template v-slot:link>
<nut-switch v-model="checked" @change="changSwitch" active-text="开" inactive-text="关" />
</template>
<template #link>
<nut-switch v-model="checked" active-text="开" inactive-text="关" @change="onSwitchChange"></nut-switch>
</template>
</nut-cell>

<template #right>
<nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
<nut-button style="height: 100%" type="danger" shape="square">删除</nut-button>
</template>
</nut-swipe>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
setup() {
const refSwipe = ref<HTMLElement>();
const checked = ref(false);
const changSwitch = (value: boolean) => {
if (value) {
refSwipe.value?.open('left');
} else {
refSwipe.value?.close();
}
};
const open = (obj: any) => {
console.log(obj);
};
const close = (obj: any) => {
console.log(obj);
};
return { checked, changSwitch, refSwipe, open, close };
```

```typescript
import type { SwipeInts, SwipeToggleEvent } from "nutui-uniapp";

const swipe = ref<SwipeInts | null>(null);

const checked = ref<boolean>(false);

function onSwitchChange(value: boolean) {
if (value) {
swipe.value?.open("left");
} else {
swipe.value?.close();
}
}
</script>

function onOpen(info: SwipeToggleEvent) {
console.log("打开了...", info);
}

function onClose(info: SwipeToggleEvent) {
console.log("关闭了...", info);
}
```

### 自定义

```html
<template>
<nut-swipe>
<nut-swipe>
<template #left>
<nut-button shape="square" style="height:100%" type="success">选择</nut-button>
<nut-button style="height: 100%" type="success" shape="square">选择</nut-button>
</template>

<nut-cell title="商品描述">
<template v-slot:link>
<nut-input-number v-model="number" />
</template>
<template #link>
<nut-input-number v-model="number"></nut-input-number>
</template>
</nut-cell>

<template #right>
<nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
<nut-button shape="square" style="height:100%" type="info">收藏</nut-button>
<nut-button style="height: 100%" type="danger" shape="square">删除</nut-button>
<nut-button style="height: 100%" type="info" shape="square">收藏</nut-button>
</template>
</nut-swipe>
</nut-swipe>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
setup() {
const number = ref(0);
return { number };
}
}
</script>
```

```typescript
const number = ref<number>(0);
```

### 使用 SwipeGroup 控制 Swipe 之间互斥

此时各个 Swipe 的 name 为必填项。

```vue
```html
<template>
<nut-swipe-group lock>
<nut-swipe name="11">
<nut-cell round-radius="0" title="左滑删除" />
<nut-swipe name="swipe1">
<nut-cell title="左滑删除" round-radius="0"></nut-cell>

<template #right>
<nut-button style="height: 100%" type="danger" shape="square">删除</nut-button>
</template>
</nut-swipe>

<nut-swipe name="swipe2">
<nut-cell title="左滑删除" round-radius="0"></nut-cell>

<template #right>
<nut-button shape="square" style="height: 100%" type="danger">
删除
</nut-button>
<nut-button style="height: 100%" type="danger" shape="square">删除</nut-button>
</template>
</nut-swipe>
<nut-swipe name="22">
<nut-cell round-radius="0" title="左滑删除" />

<nut-swipe name="swipe3">
<nut-cell title="左滑删除" round-radius="0"></nut-cell>

<template #right>
<nut-button shape="square" style="height: 100%" type="danger">
删除
</nut-button>
<nut-button style="height: 100%" type="danger" shape="square">删除</nut-button>
</template>
</nut-swipe>
<div>
<nut-swipe name="33">
<nut-cell round-radius="0" title="左滑删除" />
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">
删除
</nut-button>
</template>
</nut-swipe>
</div>
</nut-swipe-group>
</template>
```
Expand All @@ -160,41 +160,42 @@ export default {

### 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` |
| close-on-click `1.7.7` | 点击自动关闭的部分，可选值为：`left`、`content`、`right` | string[] | `["left", "content", "right"]` |

### Events

| 事件名 | 说明 | 回调参数 |
|--------|------------|---------------------|
| open | 滑动时触发，left 指向左滑，right 指向右滑 | `name, position: 'left' | 'right'` |
| close | 关闭时触发，同上 | `name, position: 'left' | 'right'` |
| 事件名 | 说明 | 回调参数 |
|-------|----------------------------|-------------------|
| open | 开启时触发，left 指向左滑，right 指向右滑 | `name, direction` |
| close | 关闭时触发，同上 | `name, direction` |

### Slots

| 名称 | 说明 |
|---------|--------------|
| 名称 | 说明 |
|---------|--------|
| left | 左侧滑动内容 |
| default | 自定义内容 |
| default | 自定义内容 |
| right | 右侧滑动内容 |

### Methods

通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 Swipe 实例并调用实例方法。

| 方法名 | 说明 | 参数 |
|--------|------------------|---------------------|
| open | 滑动单元格侧边栏，left 指向左滑，right 指向右滑 | `name, position: 'left' | 'right'` |
| close | 收起单元格侧边栏，同上 | `name, position: 'left' | 'right'` |
| 方法名 | 说明 | 参数 |
|-------|-------------------------------|-------------------|
| open | 打开单元格侧边栏，left 指向左滑，right 指向右滑 | `name, direction` |
| close | 收起单元格侧边栏，同上 | `name, direction` |

## SwipeGroup

### Props

| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ---------------------------------------------------------------------------- | ------- | ------- |
| 参数 | 说明 | 类型 | 默认值 |
|------|------------------------------------------------------|---------|---------|
| lock | 控制内部 Swipe 互斥，即滑动打开某一个 Swipe 时，触发其余 Swipe 的 close 方法 | boolean | `false` |
49 changes: 26 additions & 23 deletions example/src/pages/demo/feedback/swipe/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
<script lang="ts">
<script lang="ts" setup>
import { ref } from 'vue'
import { isH5 } from '@uni-helper/uni-env'
import type { SwipeInts } from 'nutui-uniapp'
export default {
setup() {
const refSwipe = ref<SwipeInts>()
const checked = ref(false)
const number = ref(0)
const changSwitch = (value: boolean) => {
if (value)
refSwipe.value?.open('left')
else
refSwipe.value?.close()
}
const open = (obj: any) => {
uni.showToast({ title: JSON.stringify(obj) })
}
const close = (obj: any) => {
uni.showToast({ title: JSON.stringify(obj) })
}
return { checked, number, changSwitch, refSwipe, open, close, isH5 }
},
const swipe = ref<SwipeInts | null>(null)
const checked = ref<boolean>(false)
const number = ref<number>(0)
function onSwitchChange(value: boolean) {
if (value)
swipe.value?.open('left')
else
swipe.value?.close()
}
function onOpen(obj: any) {
checked.value = true
uni.showToast({ title: JSON.stringify(obj) })
}
function onClose(obj: any) {
checked.value = false
uni.showToast({ title: JSON.stringify(obj) })
}
</script>

Expand Down Expand Up @@ -73,10 +76,10 @@ export default {
<h2 class="title">
异步控制
</h2>
<nut-swipe ref="refSwipe" @open="open" @close="close">
<nut-swipe ref="swipe" :close-on-click="['right']" @open="onOpen" @close="onClose">
<nut-cell title="异步打开关闭">
<template #link>
<nut-switch v-model="checked" active-text="开" inactive-text="关" @change="changSwitch" />
<nut-switch v-model="checked" active-text="开" inactive-text="关" @change="onSwitchChange" />
</template>
</nut-cell>
<template #right>
Expand Down
14 changes: 7 additions & 7 deletions packages/nutui/components/swipe/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
.nut-swipe {
position: relative;
display: block;
cursor: grab;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;

&__inner {
position: relative;
cursor: grab;
transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

&__left,
&__right {
Expand All @@ -20,8 +24,4 @@
right: 0;
transform: translate3d(100%, 0, 0);
}

&__content {
display: inherit;
}
}
3 changes: 2 additions & 1 deletion packages/nutui/components/swipe/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export type * from './swipe'
export * from './type'
export * from './swipe'
Loading

0 comments on commit 48cc120

Please sign in to comment.