场景:使用vuepress在md写了一个表格,格式如下,想在渲染后的表格外套一层div,请问怎么处理?
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 按钮组类型 | string | plain/bar | bar |
| size | 按钮组的大小 | string | normal/large | normal |
渲染结果为
希望结果渲染结果为
场景:使用vuepress在md写了一个表格,格式如下,想在渲染后的表格外套一层div,请问怎么处理?
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 按钮组类型 | string | plain/bar | bar |
| size | 按钮组的大小 | string | normal/large | normal |
渲染结果为
希望结果渲染结果为
在 .vuepress/components
文件夹下编写一个公共组件,名字叫 div-box.vue
。内容如下
<template>
<div class="table-box">
<Content :slot-key="_id"></Content>
</div>
</template>
<script>
export default {
name: "divBox",
props: {
_id: {
type: String,
required: true
}
}
}
</script>
<style scoped>
.table-box {
width: 100%;
overflow-x: auto;
}
</style>
然后在md文件中添加如下内容即可
<div-box _id="tableAttributes"></div-box>
::: slot tableAttributes
| name | age |
| Link | 18 |
:::
在需要添加 div
标签的地方使用 ::: slot xxx
就可以了,_id
是为了区别哪一个 slot
打一波广告
10 回答11.7k 阅读
2 回答3.2k 阅读✓ 已解决
2 回答4.2k 阅读✓ 已解决
4 回答4.6k 阅读✓ 已解决
3 回答1.9k 阅读✓ 已解决
3 回答2.7k 阅读✓ 已解决
4 回答2.1k 阅读✓ 已解决
解决方案:https://segmentfault.com/q/10...