Ant Design Vue - 折叠组件中的自定义 Header
Ant Design Vue - Custom Header in Collapse Component
您好,我正在使用 Vue 和 Ant Design。所以我从 Ant Design 中选择 Collapse Component:https://antdv.com/components/collapse/
我的问题是 Collapse.Panel 中有一个道具 header
是 string
,但我需要将字符串(例如:v0.6.1.11)和日期放在那里,所以我可以在日期中添加 margin-left: auto
或类似的内容。
例子:
我尝试使用 white-space: pre
,然后简单地添加 spaces 以实现 space 之间,但它不是响应式解决方案。
我如何传递到 header prop pure html 以便我可以在其中放置两个 <p>
标签,然后在标题和日期之间创建 space?
根据docs,我们可以利用面板属性 extra
插槽。
运行这个示例代码
new Vue({
el: "#app",
data() {
return {
text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
activeKey: ['1'],
expandIconPosition: 'left',
};
},
computed:{
currDate(){
return new Date().toLocaleDateString()
}
}
});
.ant-collapse>.ant-collapse-item>.ant-collapse-header{
display:flex;
justify-content:space-between
}
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.4.11/dist/antd.min.css">
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="http://bms.test/vendor/laravel-admin/moment/min/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/ant-design-vue@1.5.0/dist/antd.min.js"></script>
<div id="app">
<a-collapse v-model="activeKey">
<a-collapse-panel key="1" header="This is panel header 1">
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
<a-collapse-panel key="3" header="This is panel header 3" disabled>
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
</a-collapse>
</div>
您可以使用下面的代码。
<a-collapse-panel key="1" header="heading 1">
<p>Content</p>
<template #extra><p>heading 2</p></template> <!-- for newer version -->
<p slot="extra">heading 2</p> <!-- for older version -->
</a-collapse-panel>
您好,我正在使用 Vue 和 Ant Design。所以我从 Ant Design 中选择 Collapse Component:https://antdv.com/components/collapse/
我的问题是 Collapse.Panel 中有一个道具 header
是 string
,但我需要将字符串(例如:v0.6.1.11)和日期放在那里,所以我可以在日期中添加 margin-left: auto
或类似的内容。
例子:
我尝试使用 white-space: pre
,然后简单地添加 spaces 以实现 space 之间,但它不是响应式解决方案。
我如何传递到 header prop pure html 以便我可以在其中放置两个 <p>
标签,然后在标题和日期之间创建 space?
根据docs,我们可以利用面板属性 extra
插槽。
运行这个示例代码
new Vue({
el: "#app",
data() {
return {
text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
activeKey: ['1'],
expandIconPosition: 'left',
};
},
computed:{
currDate(){
return new Date().toLocaleDateString()
}
}
});
.ant-collapse>.ant-collapse-item>.ant-collapse-header{
display:flex;
justify-content:space-between
}
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.4.11/dist/antd.min.css">
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="http://bms.test/vendor/laravel-admin/moment/min/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/ant-design-vue@1.5.0/dist/antd.min.js"></script>
<div id="app">
<a-collapse v-model="activeKey">
<a-collapse-panel key="1" header="This is panel header 1">
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
<a-collapse-panel key="3" header="This is panel header 3" disabled>
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
</a-collapse>
</div>
您可以使用下面的代码。
<a-collapse-panel key="1" header="heading 1">
<p>Content</p>
<template #extra><p>heading 2</p></template> <!-- for newer version -->
<p slot="extra">heading 2</p> <!-- for older version -->
</a-collapse-panel>