Vant Panel 面板

2022-05-31 13:36 更新

引入

import Vue from 'vue';
import { Panel } from 'vant';

Vue.use(Panel);

代碼演示

基礎(chǔ)用法

面板只是一個(gè)容器,里面可以放入自定義的內(nèi)容

<van-panel title="標(biāo)題" desc="描述信息" status="狀態(tài)">
  <div>內(nèi)容</div>
</van-panel>

高級(jí)用法

使用slot自定義內(nèi)容

<van-panel title="標(biāo)題" desc="描述信息" status="狀態(tài)">
  <div>內(nèi)容</div>
  <div slot="footer">
    <van-button size="small">按鈕</van-button>
    <van-button size="small" type="danger">按鈕</van-button>
  </div>
</van-panel>

API

Props

參數(shù) 說(shuō)明 類型 默認(rèn)值
title 標(biāo)題 string -
desc 描述 string -
status 狀態(tài) string -
icon 標(biāo)題左側(cè) 圖標(biāo)名稱 或圖片鏈接 string -

Slots

名稱 說(shuō)明
default 自定義內(nèi)容
header 自定義 header
footer 自定義 footer


實(shí)例演示

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)