warst/warst-h5/components/c-upload/index.vue

<template>
	<view :class="{ 'disabled-box': $attrs.disabled }">
		<imageUpload
			v-bind="__attrs"
			v-on="__listeners"
			v-if="accept === 'image'"
		>
			<template :slot="name" v-for="(_, name) in $scopedSlots">
				<slot :name="name"></slot>
			</template>
		</imageUpload>

		<!-- 视频上传   -->
		<videoUpload
			v-bind="__attrs"
			v-on="__listeners"
			v-if="accept === 'video'"
		>
			<template :slot="name" v-for="(_, name) in $scopedSlots">
				<slot :name="name"></slot>
			</template>
		</videoUpload>
	</view>
</template>

<script>
import imageUpload from './imageUpload.vue'; // 图片上传
import videoUpload from './videoUpload.vue'; // 视频上传
export default {
	name: 'c-upload',
	model: {
		prop: 'value',
		event: 'change',
	},
	computed: {
		__attrs() {
			return {
				...this.$attrs,
				...this.$props,
			};
		},
		__listeners() {
			return {
				...this.$listeners,
			};
		},
		accept() {
			// 接受的文件类型;
			return this.$attrs.accept || 'image'; //  image | video
		},
	},
	inheritAttrs: false,
	components: {
		imageUpload,
		videoUpload,
	},
};
</script>

<style scoped lang="scss">
.disabled-box {
	/deep/ .u-upload__button--disabled {
		display: none;
	}
}
</style>