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

<template>
	<view
		class="c-button c-button-txt"
		@click="$emit('click')"
		v-if="type === 'text'"
	>
		<!-- $slots获取不到#default -->
		<template v-for="(_, name) in $scopedSlots">
			<slot :name="name"></slot>
		</template>
	</view>

	<u-button
		class="c-button"
		v-else
		v-bind="newAttrs"
		v-on="$listeners"
	>
		<slot></slot>
	</u-button>
</template>

<script>
import uProps from 'uview-ui/components/u-button/props';

const customProps = {}; // 自定义的props
export default {
	name: 'cButton',
	props: {
		// 按钮的预置样式，info，primary，error，warning，success
		type: {
			type: String,
			default: uni.$u.props.button.type,
		},
		...uProps,
		...customProps,
	},
	computed: {
		newAttrs() {
			return {
				...this.$attrs,
				...this.$props,
			};
		},
	},
	methods: {},
};
</script>

<style scoped lang="scss">
.c-button-txt {
	font-size: 14px;
	color: #3c9cff;
}
.u-button--primary {
	color: #fff;
	background-color: #436ff6;
	border-color: #436ff6;
	border-width: 1px;
	border-style: solid;
}
.u-button--disabled {
	background-color: #969696 !important;
	color: #fff !important;
	border: 0;
	box-shadow: 0px 2px 6px 0px rgba(150, 150, 150, 0.42);
}
</style>