import{e as s,o as a,G as n}from"./vendor.9cc7b6f2.js";const t={class:"markdown-body"},l=[n('

Swipe 滑动手势

介绍

常用于单元格左滑删除等手势操作

安装

import { createApp } from 'vue';\n//vue\nimport { Swipe } from '@nutui/nutui';\n//taro\nimport { Swipe } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Swipe);\n

代码演示

基础用法

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

禁止滑动

<nut-swipe disabled>\n    <nut-cell round-radius="0" desc="禁止滑动" />\n    <template #right>\n        <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>\n    </template>\n</nut-swipe>\n

左右滑动

<nut-swipe>\n    <template #left>\n        <nut-button shape="square" style="height:100%" type="success">选择</nut-button>\n    </template>\n    <nut-cell round-radius="0" desc="左滑右滑都可以哦" />\n    <template #right>\n        <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>\n        <nut-button shape="square" style="height:100%" type="info">收藏</nut-button>\n    </template>\n</nut-swipe>\n

异步控制

<nut-swipe ref="refSwipe" @open="open" @close="close">\n    <nut-cell title="异步打开关闭">\n    <template v-slot:link>\n        <nut-switch v-model="checked" @change="changSwitch" active-text="开" inactive-text="关" />\n    </template>\n    </nut-cell>\n    <template #right>\n        <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>\n    </template>\n</nut-swipe>\n

    setup() {\n        const refSwipe = ref<HTMLElement>();\n        const checked = ref(false);\n        const changSwitch = (value: boolean) => {\n            if (value) {\n                refSwipe.value?.open('left');\n            } else {\n                refSwipe.value?.close();\n            }\n        };\n         const open = (obj: any) => {\n            console.log(obj);\n            checked.value = true;\n        };\n        const close = () => {\n            checked.value = false;\n        };\n        return { checked, changSwitch, refSwipe, open, close };\n    }\n

自定义

<nut-swipe>\n    <template #left>\n        <nut-button shape="square" style="height:100%" type="success">选择</nut-button>\n    </template>\n    <nut-cell title="商品描述">\n    <template v-slot:link>\n        <nut-inputnumber v-model="number" />\n    </template>\n    </nut-cell>\n    <template #right>\n        <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>\n        <nut-button shape="square" style="height:100%" type="info">收藏</nut-button>\n    </template>\n</nut-swipe>\n

    setup() {\n        const number = ref(0);\n        return { number };\n    }\n

Props

参数	说明	类型	默认值
name	唯一标识	String	-
disabled	是否禁用滑动	String	false

Events

事件名	说明	回调参数
open	打开时触发	{type:‘left or right’}
close	关闭时触发	{type:‘left or right’}

Slots

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

方法

通过 ref 可以获取到 Swipe 实例并调用实例方法。

方法名	说明	参数
open	打开单元格侧边栏	left or right
close	收起单元格侧边栏

',27)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};