import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Swipe \u6ED1\u52A8\u624B\u52BF

\u4ECB\u7ECD

\u5E38\u7528\u4E8E\u5355\u5143\u683C\u5DE6\u6ED1\u5220\u9664\u7B49\u624B\u52BF\u64CD\u4F5C

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { Swipe } from '@nutui/nutui';
//taro
import { Swipe } from '@nutui/nutui-taro';

const app = createApp();
app.use(Swipe);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<nut-swipe>
    <nut-cell round-radius="0" desc="\u5DE6\u6ED1\u5220\u9664" />
    <template #right>
        <nut-button shape="square" style="height:100%" type="danger">\u5220\u9664</nut-button>
    </template>
</nut-swipe>

\u7981\u6B62\u6ED1\u52A8

<nut-swipe disabled>
    <nut-cell round-radius="0" desc="\u7981\u6B62\u6ED1\u52A8" />
    <template #right>
        <nut-button shape="square" style="height:100%" type="danger">\u5220\u9664</nut-button>
    </template>
</nut-swipe>

\u5DE6\u53F3\u6ED1\u52A8

<nut-swipe>
    <template #left>
        <nut-button shape="square" style="height:100%" type="success">\u9009\u62E9</nut-button>
    </template>
    <nut-cell round-radius="0" desc="\u5DE6\u6ED1\u53F3\u6ED1\u90FD\u53EF\u4EE5\u54E6" />
    <template #right>
        <nut-button shape="square" style="height:100%" type="danger">\u5220\u9664</nut-button>
        <nut-button shape="square" style="height:100%" type="info">\u6536\u85CF</nut-button>
    </template>
</nut-swipe>

\u5F02\u6B65\u63A7\u5236

<nut-swipe ref="refSwipe" @open="open" @close="close">
    <nut-cell title="\u5F02\u6B65\u6253\u5F00\u5173\u95ED">
    <template v-slot:link>
        <nut-switch v-model="checked" @change="changSwitch" active-text="\u5F00" inactive-text="\u5173" />
    </template>
    </nut-cell>
    <template #right>
        <nut-button shape="square" style="height:100%" type="danger">\u5220\u9664</nut-button>
    </template>
</nut-swipe>

    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);
            checked.value = true;
        };
        const close = () => {
            checked.value = false;
        };
        return { checked, changSwitch, refSwipe, open, close };
    }

\u81EA\u5B9A\u4E49

<nut-swipe>
    <template #left>
        <nut-button shape="square" style="height:100%" type="success">\u9009\u62E9</nut-button>
    </template>
    <nut-cell title="\u5546\u54C1\u63CF\u8FF0">
    <template v-slot:link>
        <nut-inputnumber v-model="number" />
    </template>
    </nut-cell>
    <template #right>
        <nut-button shape="square" style="height:100%" type="danger">\u5220\u9664</nut-button>
        <nut-button shape="square" style="height:100%" type="info">\u6536\u85CF</nut-button>
    </template>
</nut-swipe>

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

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
name	\u552F\u4E00\u6807\u8BC6	String	-
disabled	\u662F\u5426\u7981\u7528\u6ED1\u52A8	String	false
touch-move-prevent-default	\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u884C\u4E3A	boolean	false
touch-move-stop-propagation	\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u5192\u6CE1	boolean	false

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
open	\u6253\u5F00\u65F6\u89E6\u53D1	{type:\u2018left or right\u2019}
close	\u5173\u95ED\u65F6\u89E6\u53D1	{type:\u2018left or right\u2019}

Slots

\u540D\u79F0	\u8BF4\u660E
left	\u5DE6\u4FA7\u6ED1\u52A8\u5185\u5BB9
default	\u81EA\u5B9A\u4E49\u5185\u5BB9
right	\u53F3\u4FA7\u6ED1\u52A8\u5185\u5BB9

\u65B9\u6CD5

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Swipe \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D	\u8BF4\u660E	\u53C2\u6570
open	\u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F	left or right
close	\u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F

`,27),e=[p],u={setup(h,{expose:s}){return s({frontmatter:{}}),(r,j)=>(n(),a("div",l,e))}};export{u as default};