预览示例

当前页面结合使用了 @shikijs/markdown-it 和 @shikijs/vitepress-twoslash。

渲染空组件

这是一个空组件

收起

渲染 Vue SFC 组件

ViewSfc 渲染

组件描述

<template>
	<button class="xbtn">TS XButton</button>
</template>
<script setup lang="ts">
	// @ts-ignore
	import { Prop, ref } from "vue";
	interface Props {
		text: string;
	}

	const p: Props = { text: "" };
</script>
<style scoped lang="scss">
	.xbtn {
		outline: none;
		border: 1px solid #ccc;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;

		&:hover {
			background-color: #f5f5f5;
		}
	}
</style>

收起

渲染 JSX SFC 组件

JSX 渲染

组件描述

// @ts-nocheck
import { defineComponent } from "vue";

export default defineComponent({
	setup() {
		return () => (
			<div>
				<button style={{ border: "1px solid black", padding: "10px" }}>
					React component
				</button>
			</div>
		);
	}
});

收起

自定义组件渲染

*自定义组件渲染

*组件描述

<template>
	<button class="xbtn">TS XButton</button>
</template>
<script setup lang="ts">
	// @ts-ignore
	import { Prop, ref } from "vue";
	interface Props {
		text: string;
	}

	const p: Props = { text: "" };
</script>
<style scoped lang="scss">
	.xbtn {
		outline: none;
		border: 1px solid #ccc;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;

		&:hover {
			background-color: #f5f5f5;
		}
	}
</style>

收起

resolveAlias

ViewSfc 渲染

组件描述

<template>
	<button class="btn">Button</button><button class="btn">Button</button
	><button class="btn">Button</button> <button class="btn">Button</button
	><button class="btn">Button</button><button class="btn">Button</button>
	<button class="btn">Button</button><button class="btn">Button</button
	><button class="btn">Button</button> <button class="btn">Button</button
	><button class="btn">Button</button><button class="btn">Button</button>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
	.btn {
		outline: none;
		border: 1px solid #ccc;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;

		&:hover {
			background-color: #f5f5f5;
		}
	}
</style>

收起

或使用 ::: 标签

:::ViewSfc
src=../components/c-button.vue
title=ViewSfc 容器渲染
description=带有容器的组件描述
:::

渲染为:

ViewSfc 容器渲染

带有容器的组件描述

<template>
	<button class="btn">C-Button</button>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
	.btn {
		outline: none;
		border: 1px solid #ff2b2b;
		background-color: #ededed;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;

		&:hover {
			background-color: #9f5c5c;
		}
	}
</style>

收起