More actions
No edit summary |
No edit summary |
||
Line 241: | Line 241: | ||
<div | <div | ||
id="<!--{$boxid|default:"product-card"}-->" | id="<!--{$boxid|default:"product-card"}-->" | ||
class="v-application v-application--is-ltr theme--light" | class="v-application v-application--is-ltr theme--light float-lg-left" | ||
style="display: none | style="display: none; max-width: 320px" | ||
> | > | ||
<v-container :style="containsStyle"> | <v-container :style="containsStyle"> | ||
Line 322: | Line 322: | ||
<script> | <script> | ||
window.addEventListener('load', function () { | window.addEventListener('load', function () { | ||
if (typeof Vue !== 'undefined') { | |||
let appDom = document.getElementById("<!--{$boxid|default:"product-card"}-->"); | let appDom = document.getElementById("<!--{$boxid|default:"product-card"}-->"); | ||
appDom.style.display = "block"; | appDom.style.display = "block"; | ||
Line 363: | Line 364: | ||
}, | }, | ||
}); | }); | ||
}) | }}) | ||
</script> | </script> | ||
</html> | </html> | ||
</onlyinclude> | </onlyinclude> | ||
</includeonly> | </includeonly> |
Revision as of 16:38, 20 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}}必须放在第一行位置,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
接下是其它效果展示: