W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
可以左右滑動(dòng)來展示操作按鈕的單元格組件。
通過以下方式來全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { SwipeCell } from 'vant';
const app = createApp();
app.use(SwipeCell);
SwipeCell 組件提供了 left 和 right 兩個(gè)插槽,用于定義兩側(cè)滑動(dòng)區(qū)域的內(nèi)容。
<van-swipe-cell>
<template #left>
<van-button square type="primary" text="選擇" />
</template>
<van-cell :border="false" title="單元格" value="內(nèi)容" />
<template #right>
<van-button square type="danger" text="刪除" />
<van-button square type="primary" text="收藏" />
</template>
</van-swipe-cell>
SwipeCell 可以嵌套任意內(nèi)容,比如嵌套一個(gè)商品卡片。
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品標(biāo)題"
class="goods-card"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<template #right>
<van-button square text="刪除" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<style>
.goods-card {
margin: 0;
background-color: @white;
}
.delete-button {
height: 100%;
}
</style>
通過傳入 before-close 回調(diào)函數(shù),可以自定義兩側(cè)滑動(dòng)內(nèi)容關(guān)閉時(shí)的行為。
<van-swipe-cell :before-close="beforeClose">
<template #left>
<van-button square type="primary" text="選擇" />
</template>
<van-cell :border="false" title="單元格" value="內(nèi)容" />
<template #right>
<van-button square type="danger" text="刪除" />
</template>
</van-swipe-cell>
import { Dialog } from 'vant';
export default {
setup() {
// position 為關(guān)閉時(shí)點(diǎn)擊的位置
const beforeClose = ({ position }) => {
switch (position) {
case 'left':
case 'cell':
case 'outside':
return true;
case 'right':
return new Promise((resolve) => {
Dialog.confirm({
title: '確定刪除嗎?',
}).then(resolve);
});
}
};
return { beforeClose };
},
};
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
name | 標(biāo)識(shí)符,可以在事件參數(shù)中獲取到 | number | string | ''
|
left-width | 指定左側(cè)滑動(dòng)區(qū)域?qū)挾龋瑔挝粸?nbsp;px
|
number | string | auto
|
right-width | 指定右側(cè)滑動(dòng)區(qū)域?qū)挾?,單位?nbsp;px
|
number | string | auto
|
before-close | 關(guān)閉前的回調(diào)函數(shù),返回 false 可阻止關(guān)閉,支持返回 Promise |
(args) => boolean | Promise<boolean> | - |
disabled | 是否禁用滑動(dòng) | boolean | false
|
stop-propagation | 是否阻止滑動(dòng)事件冒泡 | boolean | false
|
名稱 | 說明 |
---|---|
default | 默認(rèn)顯示的內(nèi)容 |
left | 左側(cè)滑動(dòng)區(qū)域的內(nèi)容 |
right | 右側(cè)滑動(dòng)區(qū)域的內(nèi)容 |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
click | 點(diǎn)擊時(shí)觸發(fā) | position: 'left' | 'right' | 'cell' | 'outside' |
open | 打開時(shí)觸發(fā) | { name: string | number, position: 'left' | 'right' } |
close | 關(guān)閉時(shí)觸發(fā) | { name: string | number, position: 'left' | 'right' | 'cell' | 'outside' } |
beforeClose 的第一個(gè)參數(shù)為對(duì)象,對(duì)象中包含以下屬性:
參數(shù)名 | 說明 | 類型 |
---|---|---|
name | 標(biāo)識(shí)符 | string | number |
position | 關(guān)閉時(shí)的點(diǎn)擊位置 | 'left' | 'right' | 'cell' | 'outside' |
通過 ref 可以獲取到 SwipeCell 實(shí)例并調(diào)用實(shí)例方法,詳見組件實(shí)例方法。
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
open | 打開單元格側(cè)邊欄 | position: left | right
|
- |
close | 收起單元格側(cè)邊欄 | - | - |
通過 SwipeCellInstance 獲取 SwipeCell 實(shí)例的類型定義。
import { ref } from 'vue';
import type { SwipeCellInstance } from 'vant';
const swipeCellRef = ref<SwipeCellInstance>();
swipeCellRef.value?.close();
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-switch-cell-padding-top | var(--van-cell-vertical-padding) - 1px | - |
--van-switch-cell-padding-bottom | var(--van-cell-vertical-padding) - 1px | - |
--van-switch-cell-large-padding-top | var(--van-cell-large-vertical-padding) - 1px | - |
--van-switch-cell-large-padding-bottom | var(--van-cell-large-vertical-padding) - 1px | - |
參見桌面端適配。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: