RepoItem组件
说明
- 通用的项目卡片，demo如下
// template
<g-repo-item
:iconHandleList="iconHandleList"
:hideRight="true"
:id="item.id"
:imgSrc="item.imgSrc"
:title="item.title"
:tag="item.tag"
:desc="item.desc"
:isStar="item.isStar"
@handleStar="handleStar"
/>
// script
const iconHandleList = toRef([
{ icon: '', value: 'C', iconColor: 'red',type: 'language', label: '语言', to: '' },
{ icon: 'gt-star', value: 2100, label: '关注', to: '' },
{ icon: 'gt-fork', value: 975, label: 'Fork', to: '' },
{ icon: 'gt-date', value: '2023-07-20', type:'updateTime', label: '', to: '' }
]);
const item = ref({
id: '1',
imgSrc: '',
title: 'kernel_liteos_a',
desc: 'LiteOS kernel for embedded devices with rich resources',
isStar: false,
tag: 'Public',
web_url:''
});
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 标题 | string | — | — |
| tag? | 标签 | string | — | — |
| desc? | 描述 | string | — | — |
| imgSrc? | 头像src | string | — | — |
| id | 唯一标识id | string | — | — |
| iconHandleList? | icon操作列表 | array | 见下表 | [] |
| isStar? | 是否satr | boolean | — | false |
| hideStar? | 是否显示身份标签 | boolean | — | true |
| hideTag? | 隐藏tag | boolean | — | false |
| hideDesc? | 隐藏描述 | boolean | — | false |
| hideRight? | 隐藏右侧图表区域 | boolean | — | true |
| web_url? | 点击标题跳转url | string | — | — |
| keywords? | 关键词高亮 | string | — | — |
| hasShadow? | 是否为卡片投影样式 | boolean | — | false（默认为底部边框） |
Props(iconHandleList)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| icon? | 图标name | string | — | — |
| value | 显示名称 | string | number | — | — |
| label? | hover文案 | string | — | — |
| to? | 跳转路径 | string | — | — |
| type? | 字段类型 | string | 语言type需传language，则显示特定样式；时间需传：createdTime | updateTime，则会转格式如：1天以前 | string |
| iconColor? | icon颜色 | string | — | — |
Emits
注意：以下事件都是组件内部对应的按钮点击触发，如果用插槽自定义对应区域的内容的话，事件自行监听即可
| 方法 | 说明 | 返回值 |
|---|---|---|
| handleStar | 点击star | data: {id:'',isStar:true} |
Slots
| 名称 | 说明 |
|---|---|
| right | 组件右侧图表区域 |