[新功能需求] 骨架屏希望可以使用插槽的方式嵌入内容

[XiaoMo-Donald]

这个功能解决了什么问题？

如果是将内容通过插槽的方式嵌入到骨架屏，在请求数据完成后，感觉上比较平滑，当然啦这个目前是我个人的体验。

你期望的 API 是什么样子的？

骨架屏期望可以实现使用插槽的方式嵌入内容，通过开关控制是否显示骨架屏还是骨架屏内的内容，参考案例：https://www.uvui.cn/components/skeletons.html

<template>
	<view class="uv-page">
		<uv-skeletons :loading="loading" :skeleton="skeleton" :animate="animate">
			<view class="uv-skeletons__row uv-skeletons__row1">
				<view class="uv-skeletons__row1--left">
					<image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
				</view>
				<view class="uv-skeletons__row1--right">
					<uv-text text="破釜沉舟之兼容vue3+2、nvue、app、h5" color="#222" size="30rpx" lines="1"></uv-text>
					<uv-text text="在经过改进后全面支持vue3" color="#222" size="30rpx" lines="1" margin="6rpx 0 0"></uv-text>
					<uv-text text="欢迎大家使用" lines="1" color="#222" size="30rpx" margin="6rpx 0 0"></uv-text>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="uv-skeletons__row uv-skeletons__row2">
				<image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
				<image class="img" src="https://via.placeholder.com/200x200.png/f9ae3d"></image>
				<image class="img" src="https://via.placeholder.com/200x200.png/5ac725"></image>
				<image class="img" src="https://via.placeholder.com/200x200.png/f56c6c"></image>
				<image class="img" src="https://via.placeholder.com/200x200.png/909399"></image>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="uv-skeletons__row uv-skeletons__row3">
				<view class="uv-skeletons__row3--left">
					<uv-text text=" 多端小程序的uni-app生态框架" color="#222" size="30rpx" bold lines="1"></uv-text>
					<uv-text text="支持单独导入，方便开发者选择导入需要的组件。" lines="1" color="#222" size="30rpx" margin="8rpx 0 0"></uv-text>
					<uv-text text="来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，永久开源，永远免费。我们会在部分组件下载时配置广告抵消一部分成本，希望大家理解。" lines="1" color="#222" size="30rpx" margin="8rpx 0 0"></uv-text>
				</view>
				<view class="uv-skeletons__row3--right">
					<image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
				</view>
			</view>
		</uv-skeletons>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: true,
				animate: true,
				skeleton: [{
						type: 'flex',
						num: 1,
						children: [{
							type: 'custom',
							num: 1,
							style: 'width:136rpx;height:136rpx;marginRight: 30rpx;'
						}, {
							type: 'line',
							num: 3,
							style: [null, 'width:360rpx;', 'width:200rpx;']
						}]
					},
					30, {
						type: 'flex',
						children: [{
							type: 'custom',
							style: 'width:98rpx;height:160rpx;'
						}, {
							type: 'custom',
							style: 'width:98rpx;height:160rpx;marginLeft:50rpx;'
						}, {
							type: 'custom',
							style: 'width:98rpx;height:160rpx;marginLeft:50rpx;'
						}, {
							type: 'custom',
							style: 'width:98rpx;height:160rpx;marginLeft:50rpx;'
						}, {
							type: 'custom',
							style: 'width:98rpx;height:160rpx;marginLeft:50rpx;'
						}]
					},
					30, {
						type: 'flex',
						children: [{
							type: 'line',
							num: 3,
							gap: '30rpx'
						}, {
							type: 'custom',
							style: 'width:160rpx;height:160rpx;marginLeft: 30rpx;'
						}]
					}
				]
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uv-page {
		padding: 15px 30rpx 40px;
	}
	.uv-skeletons__row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.uv-skeletons__row1 {
		&--left {
			width: 136rpx;
			height: 136rpx;
			margin-right: 30rpx;
			.img {
				width: 136rpx;
				height: 136rpx;
			}
		}
		&--right {
			flex: 1;
		}
	}
	.uv-skeletons__row2 {
		justify-content: space-between;
		.img {
			width: 98rpx;
			height: 160rpx;
		}
	}
	.uv-skeletons__row3 {
		&--left {
			flex: 1;
		}
		&--right {
			.img {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
</style>