More actions
Created page with "<noinclude> == 参数说明 == * boxid 对象id, 默认值: product-card, 当需要在同一个页面上显示多个卡片时,需要保证boxid唯一 * themeColor 主题颜色, 默认值: #36a5e8 * images 图片数据, 必填 ** title 名称, 必填 ** src 图片链接, 必填 * chipsTitle 标签数据标题, 选填 * chips 标签数据, 选填 ** name 名称, chips有值时必填 ** url 跳转链接, 选填 * kvDatasTitle K-V数据标题, 选填 * kvDatas K-V数据,..." |
No edit summary |
||
Line 6: | Line 6: | ||
** title 名称, 必填 | ** title 名称, 必填 | ||
** src 图片链接, 必填 | ** src 图片链接, 必填 | ||
** url 点击事件时的跳转链接, 选填 | |||
* chipsTitle 标签数据标题, 选填 | * chipsTitle 标签数据标题, 选填 | ||
* chips 标签数据, 选填 | * chips 标签数据, 选填 | ||
** name 名称, chips有值时必填 | ** name 名称, chips有值时必填 | ||
** url | ** url 点击事件时的跳转链接, 选填 | ||
* kvDatasTitle K-V数据标题, 选填 | * kvDatasTitle K-V数据标题, 选填 | ||
* kvDatas K-V数据, 选填 | * kvDatas K-V数据, 选填 | ||
** key 名称, 必填 | ** key 名称, 必填 | ||
** value 值, 必填 | ** value 值, 必填 | ||
** url | ** url 点击事件时的跳转链接, 选填 | ||
* liDataTitle 列表数据标题, 选填 | * liDataTitle 列表数据标题, 选填 | ||
* liDatas 列表数据, 选填 | * liDatas 列表数据, 选填 | ||
** name 名称, 必填 | ** name 名称, 必填 | ||
** url | ** url 点击事件时的跳转链接, 必填 | ||
== 用法 == | == 用法 == | ||
<pre><nowiki> | <pre><nowiki> | ||
Line 27: | Line 28: | ||
title: "CM4核心板", | title: "CM4核心板", | ||
src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-1.jpg&width=360", | src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-1.jpg&width=360", | ||
url: "https://www.waveshare.net/shop/Raspberry-Pi-Camera-Module-3.htm" | |||
}, | }, | ||
] | ] | ||
Line 66: | Line 68: | ||
title: "CM4核心板", | title: "CM4核心板", | ||
src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-1.jpg&width=360", | src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-1.jpg&width=360", | ||
url: "https://www.waveshare.net/shop/Raspberry-Pi-Camera-Module-3.htm" | |||
}, | }, | ||
{ | { | ||
Line 204: | Line 207: | ||
title: "CM4核心板", | title: "CM4核心板", | ||
src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-1.jpg&width=360", | src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-1.jpg&width=360", | ||
url: "https://www.waveshare.net/shop/Raspberry-Pi-Camera-Module-3.htm" | |||
}, | }, | ||
{ | { | ||
Line 255: | Line 259: | ||
<v-tabs-items v-model="tab"> | <v-tabs-items v-model="tab"> | ||
<v-tab-item v-for="(img, index) in images" :key="index"> | <v-tab-item v-for="(img, index) in images" :key="index"> | ||
<v-img :src="img.src" :aspect-ratio="16/9" width="300"></v-img> | <a v-if="img.url" :href="img.url" target="_blank"> | ||
<v-img :src="img.src" :aspect-ratio="16/9" width="300"></v-img> | |||
</a> | |||
<v-img | |||
v-else | |||
:src="img.src" | |||
:aspect-ratio="16/9" | |||
width="300" | |||
></v-img> | |||
</v-tab-item> | </v-tab-item> | ||
</v-tabs-items> | </v-tabs-items> |
Revision as of 09:09, 19 July 2024
参数说明
- boxid 对象id, 默认值: product-card, 当需要在同一个页面上显示多个卡片时,需要保证boxid唯一
- themeColor 主题颜色, 默认值: #36a5e8
- images 图片数据, 必填
- title 名称, 必填
- src 图片链接, 必填
- url 点击事件时的跳转链接, 选填
- chipsTitle 标签数据标题, 选填
- chips 标签数据, 选填
- name 名称, chips有值时必填
- url 点击事件时的跳转链接, 选填
- kvDatasTitle K-V数据标题, 选填
- kvDatas K-V数据, 选填
- key 名称, 必填
- value 值, 必填
- url 点击事件时的跳转链接, 选填
- liDataTitle 列表数据标题, 选填
- liDatas 列表数据, 选填
- name 名称, 必填
- url 点击事件时的跳转链接, 必填
用法
{{#widget:ProductCard | themeColor = #36a5e8 | images = [ { title: "CM4核心板", src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-1.jpg&width=360", url: "https://www.waveshare.net/shop/Raspberry-Pi-Camera-Module-3.htm" }, ] | chipsTitle = 板载接口 | chips = [ { name: "DIS", url: "https://www.waveshare.net/wiki/%E5%88%86%E7%B1%BB:DSI%E6%8E%A5%E5%8F%A3", }, { name: "CSI", url: "" }, ] | kvDatasTitle = 功能简介 | kvDatas = [ { key: "特性", value: "1200万像素", }, { key: "接口", value: "CSI", url: "https://www.waveshare.net/wiki/%E5%88%86%E7%B1%BB:CSI%E6%8E%A5%E5%8F%A3", }, ] | liDataTitle = 相关产品 | liDatas = [ { name: "Raspberry Pi开发板", url: "https://www.waveshare.net/wiki/%E5%88%86%E7%B1%BB:Raspberry_Pi%E5%BC%80%E5%8F%91%E6%9D%BF", }, ] }}
效果展示
显示一个标题
这是一段示例文本。这段文本将环绕显示。你可以在这里添加更多内容, 注意{{#widget:ProductCard}}必须放在第一行位置,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
接下是其它效果展示: