TIP

下方列举了一些组件的使用示例，用到的组件为vant

移动端默认页面

Props， 插槽和官方文档一致

使用示例如下， 使用插槽和插画图搭配

页面不存在哦～

<script lang="ts" setup>
import "remote-components-lib/vant/base.css";
import { ReVantEmpty, RePlateIcon } from "remote-components-lib";
</script>

<template>
	<div>
		<ReVantEmpty description="页面不存在哦～">
			<template #image>
				<RePlateIcon icon="404" />
			</template>
			<template #default>
				<button>返回首页</button>
			</template>
		</ReVantEmpty>
	</div>
</template>

移动端状态栏

Props， 插槽和官方文档一致

Props	解释	默认值
bgColor	背景色	#fff
paddingTop	距离顶部状态栏的距离，在移动端中需要间隔状态栏高度	0px

Emits	解释	默认值
click-left	左侧点击	-
click-right	右侧点击	-

使用示例如下，

返回

历史记录

<script lang="ts" setup>
import "remote-components-lib/vant/base.css";
import { ReVantNavBar } from "remote-components-lib";
import { ref } from "vue";

const title = ref("");
const onClickLeft = () => {
	title.value = "left";
};

const onClickRight = () => {
	title.value = "right";
};
</script>

<template>
	<div>
		<ReVantNavBar
			bgColor="#eee"
			:title="title"
			@click-left="onClickLeft"
			@click-right="onClickRight"
		>
			<template #left>返回</template>
			<template #right>历史记录</template>
		</ReVantNavBar>
	</div>
</template>