TIP

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

金额组件的显示

Props	解释	默认值
cost	金额,支持数字和字符串，如：1000	-
format	小数位数，默认 2 位	2
color	颜色 默认橘色	rgba(255, 136, 0, 1)

使用示例如下

100.00

<script lang="ts" setup>
import "remote-components-lib/element/base.css";
import "remote-components-lib/element/AmountText/index.css";
import { EleAmountText } from "remote-components-lib";

import { ref } from "vue";

const cost = ref(100);
</script>

<template>
	<div>
		<EleAmountText :cost="cost" :format="2" color="red" />
	</div>
</template>

图片组展示

Props	解释	默认值
image	图片地址, 支持字符串数组 或 字符串	-
isLazy	是否启用懒加载	false
style	自定义样式	width: '60px', height: '60px'
limit	限制展示的数量	9
exceedType	超出数量展示类型;支持插槽'default' or 'number'	default
isPreview	是否开启预览	true

使用示例如下

+ 2

2

🀄️

<script lang="ts" setup>
import "remote-components-lib/element/base.css";
// 这里用到了视频，需要加载视频的样式，如果没有视频就不需要加载了
import "remote-components-lib/element/xgplayer.css";
import "remote-components-lib/element/LazyImage/index.css";
import { EleLazyImage } from "remote-components-lib";
const mockImageList = [
	"https://file.anbangke.com/2024/08/01/jpeg/6255c96b-f9c8-4064-97a0-6dbf2fba6012.png",
	"https://file.anbangke.com/b92cdd9e-6d42-4df1-a133-89ec33d0647a_video_1722494577568.mp4",
	"https://file.anbangke.com/2024/08/01/jpeg/6ffb40f0-a419-481c-b1b3-9dc323ddb254.png",
	"https://file.anbangke.com/2024/08/01/jpeg/26054c90-07d6-4903-9ee3-5b4f494fcfa9.png",
];
</script>

<template>
	<div>
		<!-- 默认 -->
		<EleLazyImage
			:image="mockImageList"
			:is-lazy="true"
			:style="{ width: '80px', height: '80px' }"
			:limit="2"
		/>
		<br />

		<!-- 展示数字 -->
		<EleLazyImage
			:image="mockImageList"
			:is-lazy="true"
			:style="{ width: '80px', height: '80px' }"
			:limit="2"
			:exceedType="'number'"
		/>
		<br />

		<!-- 自定义插槽 -->
		<EleLazyImage
			:image="mockImageList"
			:is-lazy="true"
			:style="{ width: '80px', height: '80px' }"
			:limit="2"
		>
			<template #exceedType>🀄️</template>
		</EleLazyImage>
	</div>
</template>

插画

Props	解释	默认值
type	插画类型，支持字符串，如：'404'	-
width	宽度	auto
height	高度	auto

插画图的type支持以下：

type TProps =
	| "404"
	| "502"
	| "add_address"
	| "bind_card"
	| "bind"
	| "loading"
	| "mapping"
	| "message_list"
	| "network_interruption"
	| "no_message"
	| "no_meeting"
	| "no_order"
	| "no_permission"
	| "no_products"
	| "no_task"
	| "pass"
	| "save_success"
	| "search"
	| "warning";

使用示例如下

<script lang="ts" setup>
import { RePlateIcon } from "remote-components-lib";
</script>

<template>
	<div class="demo-container">
		<RePlateIcon icon="404" width="100px" height="100px" />
		<RePlateIcon icon="502" width="100px" height="100px" />
		<RePlateIcon icon="add_address" width="100px" height="100px" />
		<RePlateIcon icon="bind_card" width="100px" height="100px" />
	</div>
</template>

<style scoped lang="scss">
.demo-container {
	display: flex;
}
</style>

图片预览

Event	解释	默认值
reviewImages	(visible: boolean, options: IReviewImage) => void	-

interface IReviewImage {
	/**
	 * @description 图片列表， 默认[]
	 */
	urlList: string[];
	/**
	 * @description 初始图片索引, 默认为0
	 */
	initIndex: number;
}

点击图片可以直接通过reviewImages方法预览 使用示例如下

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

const initImg = "https://file.wangzevw.com/images/default_top_img_5.jpeg";

const previewImageRef = ref<InstanceType<typeof ElePreviewImage>>();
const onPreview = () => {
	previewImageRef.value?.reviewImages(true, {
		urlList: [initImg],
		initIndex: 0,
	});
};
</script>

<template>
	<div>
		<img :src="initImg" width="100" height="100" alt="" @click="onPreview" />
		<ElePreviewImage ref="previewImageRef" />
	</div>
</template>

视频预览

Event	解释	默认值
setVisible	(val: boolean, playerConfig: IVideoPlayerProps) => void	-

/**
 * @description 具体参数详看西瓜播放器 https://h5player.bytedance.com/guide/#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8
 */
interface IReviewImage {
	url: string;
	id?: string;
	lang?: "zh";
	volume?: number;
	autoplay?: boolean;
	screenShot?: boolean;
	playbackRate?: number[];
	fluid?: boolean;
}

点击图片可以直接通过setVisible方法预览 使用示例如下

<script setup lang="ts">
import "remote-components-lib/element/xgplayer.css";
import { ElePreviewVideo } from "remote-components-lib";
import { ref } from "vue";

const videoRef = ref<InstanceType<typeof ElePreviewVideo>>();

const toVideo = () => {
	videoRef.value?.setVisible(true, {
		url: "https://file.anbangke.com/b92cdd9e-6d42-4df1-a133-89ec33d0647a_video_1722494577568.mp4",
	});
};
</script>

<template>
	<div>
		<button @click="toVideo">查看视频</button>
		<ElePreviewVideo ref="videoRef" width="640px" height="360px" />
	</div>
</template>

自定义视频播放器

Props	解释	默认值
config	自定义视频播放器配置, {}	id: 'video-player', url: ''

Emits	解释	默认值
player	播放事件	参数为：当前播放器的实例

用法和视频预览类似，只不过视频预览外层嵌套了一层弹框，里层用的正是自定义视频播放器组件。