jobsys-mpower/components/skeleton/MpSkeleton.jsx

Enhanced component based on Taro & NutUI

import { defineComponent } from "vue"
import "./index.scss"

/**
 * 主题组件
 * @version 1.0.0
 */
export default defineComponent({
	name: "MpSkeleton",
	props: {
		/**
		 * 每行宽度
		 */
		width: { type: String, default: "400px" },

		/**
		 * 设置段落行数
		 */
		row: { type: String, default: "25" },

		/**
		 * 标题/段落是否采用圆角风格
		 */
		round: { type: Boolean, default: true },

		/**
		 * 是否显示段落标题
		 */
		title: { type: Boolean, default: true },

		/**
		 * 是否开启骨架屏动画
		 */
		animated: { type: Boolean, default: true },

		/**
		 * [原生配置](https://nutui.jd.com/taro/vue/4x/#/zh-CN/component/skeleton)
		 */
		skeletonProps: {
			type: Object,
			default: () => ({}),
		},
	},

	setup(props) {
		return () => (
			<view class={"mp-skeleton-wrapper"}>
				<nut-skeleton
					width={props.width}
					row={props.row}
					round={props.round}
					title={props.title}
					animated={props.animated}
					{...props.skeletonProps}
				/>
			</view>
		)
	},
})