功能组件 · Vant
核心 API 请查阅 功能组件-通用篇，本文档仅说明 Vant 框架下的特化配置。
导入路径
javascript
import { $initHook } from '@jiess/plus/vant';Vant 特化组件
| Jiess 组件 | Vant 组件 | 说明 |
|---|---|---|
$Button | van-button | 按钮 |
$Tag | van-tag | 标签 |
$Divider | van-divider | 分割线 |
$Badge | van-badge | 徽章 |
$Collapse | van-collapse | 折叠面板 |
$NoticeBar | van-notice-bar | 通知栏 |
$SwipeCell | van-swipe-cell | 滑动单元格 |
Vant 按钮类型
javascript
{
$Button: {
children: '操作',
type: 'primary', // 'default' / 'primary' / 'info' / 'warning' / 'danger'
size: 'normal', // 'large' / 'normal' / 'small' / 'mini'
loading: false,
round: false, // 圆角按钮
block: false, // 块级按钮
hairline: false, // 细边框
icon: 'plus', // 图标名
},
}Vant 标签类型
javascript
{
$Tag: {
children: '已审核',
type: 'success', // 'default' / 'primary' / 'success' / 'warning' / 'danger'
size: 'medium', // 'large' / 'medium'
mark: false, // 标记样式
round: false,
plain: false,
closeable: false,
},
}Vant 功能组件示例
通知栏（Vant 独有）
javascript
{
$NoticeBar: {
text: '系统将于今晚 22:00-24:00 进行维护升级，届时服务暂不可用。',
mode: 'closeable', // '' / 'closeable' / 'link'
scrollable: true,
leftIcon: 'volume-o',
},
}滑动单元格
javascript
{
$SwipeCell: {
right: [
{
text: '删除',
style: { background: '#ee0a24', color: '#fff' },
onClick: () => del(row),
},
{
text: '编辑',
style: { background: '#1989fa', color: '#fff' },
onClick: () => edit(row),
},
],
children: {
// 单元格内容
},
},
}实战示例
示例1：左滑操作（SwipeCell 列表项操作）
javascript
$JiessList({
action: '/api/users',
$renderItem(item) {
const { name, email, phone } = item.datas;
// 使用 SwipeCell 包裹每个列表项
return {
$SwipeCell: {
right: [
{
text: '编辑',
style: { background: '#1989fa', color: '#fff', width: '65px' },
onClick: () => editRow(item),
},
{
text: '删除',
style: { background: '#ee0a24', color: '#fff', width: '65px' },
onClick: () => {
// 弹出确认后再删除
dialog.closeAll();
deleteRow(item);
},
},
],
disabled: item.datas.role === 'admin', // 管理员不可删除
children: {
tag: 'div',
className: 'ai-user-cell',
style: {
padding: '12px 16px',
background: '#fff',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
children: [
{
tag: 'div',
children: [
{
tag: 'div',
style: { fontSize: '15px', fontWeight: 'bold' },
text: name,
},
{
tag: 'div',
style: { fontSize: '13px', color: '#666', marginTop: '4px' },
text: email,
},
],
},
{
tag: 'div',
style: { fontSize: '12px', color: '#999' },
text: phone,
},
],
},
},
};
},
});示例2：标签状态组合 + 通知栏
javascript
// 状态标签
export default {
// 顶部通知栏
$NoticeBar: {
text: '尊敬的 VIP 用户，您的会员将于 7 天后到期，请及时续费！',
mode: 'closeable',
scrollable: false,
leftIcon: 'volume-o',
color: '#ed6a0c',
background: '#fffbe8',
wrapable: true,
},
// 用户信息卡片
userInfo: {
tag: 'div',
style: { padding: '16px', background: '#fff', marginTop: '8px' },
children: [
{
tag: 'div',
style: { fontSize: '16px', fontWeight: 'bold', marginBottom: '12px' },
text: '订单 #20240521001',
},
// 标签组
{
tag: 'div',
style: { display: 'flex', gap: '8px', flexWrap: 'wrap' },
children: [
{ $Tag: { children: '已支付', type: 'success', size: 'medium' } },
{ $Tag: { children: '加急', type: 'danger', size: 'medium' } },
{ $Tag: { children: '新用户', type: 'primary', size: 'medium', plain: true } },
{ $Tag: { children: '待发货', type: 'warning', size: 'medium' } },
],
},
// 操作按钮
{
$Button: {
children: '查看详情',
type: 'primary',
size: 'small',
round: true,
style: { marginTop: '12px' },
},
},
],
},
};示例3：Badge 徽章 + 滑动单元格 + 按钮组合
javascript
$JiessList({
action: '/api/messages',
$renderItem(item) {
const { title, content, time, unread } = item.datas;
return {
$SwipeCell: {
right: [
{
text: unread ? '标为已读' : '标为未读',
style: { background: '#1989fa', color: '#fff' },
onClick: () => toggleRead(item),
},
{
text: '删除',
style: { background: '#ee0a24', color: '#fff' },
onClick: () => deleteMsg(item),
},
],
children: {
$Badge: {
dot: unread, // 未读消息显示红点
content: unread ? '' : undefined,
children: {
tag: 'div',
style: {
padding: '14px 16px',
background: unread ? '#f5f9ff' : '#fff',
borderBottom: '1px solid #f0f0f0',
},
children: [
{
tag: 'div',
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
children: [
{
tag: 'div',
style: {
fontSize: '15px',
fontWeight: unread ? 'bold' : 'normal',
color: '#333',
},
text: title,
},
{
tag: 'span',
style: { fontSize: '12px', color: '#999' },
text: time,
},
],
},
{
tag: 'div',
style: {
fontSize: '13px',
color: '#666',
marginTop: '6px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
text: content,
},
],
},
},
},
},
};
},
});注意事项
| 事项 | 说明 |
|---|---|
van-button 事件 | onClick 透传为 click 事件 |
$SwipeCell | Vant 独有，PC 端无对应组件 |
| 图标使用 | Vant 使用图标名（字符串），而 ElementPlus/Antd 使用组件导入 |
下一步
- 功能组件-通用篇 — 跨框架通用组件 API
