jobsys-mpower/components/result/MpResult.jsx

Enhanced component based on Taro & NutUI

import { defineComponent } from "vue"
import { Checked, MaskClose, CheckDisabled, Issue } from "@nutui/icons-vue-taro"
import "./index.scss"

/**
 * MpResult 结果页
 */
export default defineComponent({
	name: "MpResult",
	props: {
		/**
		 * 结果类型
		 * @values 'success', 'error', 'info', 'warning'
		 */
		type: { type: String, default: "success" },

		/**
		 * 标题
		 */
		title: { type: String, default: "" },

		/**
		 * 描述
		 */
		description: { type: String, default: "" },
	},
	setup(props, { slots }) {
		const iconElem = () => {
			let elem = null

			if (slots.icon) {
				elem = slots.icon()
			} else {
				switch (props.type) {
					case "success":
						elem = <Checked class={"mpicon"} />
						break

					case "info":
						elem = <Issue class={"mpicon"} />
						break

					case "warning":
						elem = <CheckDisabled class={"mpicon"} />
						break

					case "error":
						elem = <MaskClose class={"mpicon"} />
						break
					default:
						break
				}
			}

			return elem
		}

		return () => (
			<view class={`mp-result mp-result__${props.type}`}>
				<view class={"mp-result-icon"}>{iconElem()}</view>
				<view class={"mp-result-title"}>{slots.title ? slots.title?.() : props.title}</view>
				<view class={"mp-result-description"}>{slots.description ? slots.description?.() : props.description}</view>
				<view class={"mp-result-extra"}>{slots.extra?.()}</view>
			</view>
		)
	},
})