Vant Panel 面板

2022-05-31 13:36 更新

引入

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

Vue.use(Panel);

代碼演示

基礎用法

面板只是一個容器,里面可以放入自定義的內容

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

高級用法

使用slot自定義內容

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

API

Props

參數 說明 類型 默認值
title 標題 string -
desc 描述 string -
status 狀態(tài) string -
icon 標題左側 圖標名稱 或圖片鏈接 string -

Slots

名稱 說明
default 自定義內容
header 自定義 header
footer 自定義 footer


實例演示

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號