5.29.1.快速使用
可选卡片(v1.1.0新增)主要是对单选和多选的逻辑进行封装,卡片的显示内容及布局方式可完全的自定义,使用示例:
运行代码 新窗口打开
单选模式:
运行代码 新窗口打开
5.29.2.属性列表
items 支持的属性:
row 可以为 true 或 ElRow 的全部属性开启栅格布局,然后 item 可以用 col 属性设置每个 item 的栅格属性。
5.29.3.事件列表
5.29.4.插槽列表
item 当前 item 数据, checked 当前 item 是否选中状态, disabled 当前 item 是否禁用状态。
实现标签选择风格的示例:
.check-tag {
display: flex;
flex-wrap: wrap;
align-items: center;
box-sizing: border-box;
padding-left: 12px;
:deep(.ele-check-card) {
font-size: 13px;
height: 23px;
line-height: 23px;
padding: 0 8px;
margin: 0 8px 8px 0;
border-radius: 4px;
&:not(.is-disabled):not(.is-checked):hover {
background: var(--el-fill-color-light);
}
&.is-checked {
color: #fff;
background: var(--el-color-primary);
}
&.is-disabled {
background: none;
opacity: 1;
&.is-checked {
color: var(--el-disabled-text-color);
background: var(--el-disabled-bg-color);
}
}
}
}
运行代码 新窗口打开
实现纯图片如支付方式选择的示例:
运行代码 新窗口打开