assess-app/components/en-utils/en-button/en-button.vue

<template>
	<view :style="[{lineHeight:height}]">
		<view class="p-t20 p-lr30" :class="is_fixed?'fixed-button':''" v-if="is_both===0">
			<button class="en-button button-background sys-weight-500" type="default" hover-class="is-hover"
				:style="[{width},{borderRadius},{fontSize},{color}]" @click="onSubmit">{{text}}</button>
		</view>
		<view class="row-justify-sb center p-lr30 p-t20" :class="is_fixed?'fixed-button':''" v-else-if="is_both===1">
			<button class="en-button-left button-background button-color sys-weight-500 m-r30" type="default"
				hover-class="is-hover" :style="[{width:bothWidth},{borderRadius},{fontSize}]"
				@click="onLeftSubmit">{{leftText}}</button>
			<button class="en-button button-background sys-weight-500" type="default" hover-class="is-hover"
				:style="[{width:bothWidth},{borderRadius},{fontSize},{color}]" @click="onSubmit">{{rightText}}</button>
		</view>
    <view class="row-justify-sb center p-lr30 p-t20" :class="is_fixed?'fixed-button':''" v-else-if="is_both===2">
      <button class="en-button-left button-background button-color sys-weight-500 m-r30" type="default"
              hover-class="is-hover" :style="[{width:'33%'},{borderRadius},{fontSize}]"
              @click="onLeftSubmit">{{leftText}}</button>
      <button class="en-button-left button-background button-color sys-weight-500 m-r30" type="default"
              hover-class="is-hover" :style="[{width:'33%'},{borderRadius},{fontSize}]"
              @click="onCentreSubmit">{{centreText}}</button>
      <button class="en-button button-background sys-weight-500" type="default" hover-class="is-hover"
              :style="[{width:'33%'},{borderRadius},{fontSize},{color}]" @click="onSubmit">{{rightText}}</button>
    </view>
	</view>
</template>

<script>
	export default {
		props: {
			is_both: {
				default: 0
			},
			is_fixed: {
				type: Boolean,
				default: true
			},
			text: {
				type: String,
				default: '提交'
			},
			centreText: {
				type: String,
				default: '取消'
			},
			leftText: {
				type: String,
				default: '取消'
			},
			rightText: {
				type: String,
				default: '确认'
			},
			color: {
				type: String,
				default: '#fff'
			},
			fontSize: {
				type: String,
				default: '28rpx'
			},
			width: {
				type: String,
				default: `100%`
			},
			bothWidth: {
				type: String,
				default: `50%`
			},
			height: {
				type: String,
				default: `70rpx`
			},
			borderRadius: {
				type: String,
				default: '100rpx'
			},
		},
		data() {
			return {}
		},
		methods: {
			onSubmit() {
				console.log('----------------------')
				this.$emit('onSubmit')
			},
			onLeftSubmit() {
				this.$emit('onLeftSubmit')
			},
			onCentreSubmit() {
				this.$emit('onCentreSubmit')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.en-button {
		line-height: 80rpx;
		border: none;
	}

	.en-button-left {
		color: #0FB160;
		border: 1rpx solid #0FB160 !important;
		line-height: 80rpx;
		background-color: #fff;
	}

	button::after {
		border: none;
	}

	.fixed-button {
		position: fixed;
		bottom: 0;
		z-index: 4;
		background: #fff;
		width: calc(100% - 60rpx);
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}
</style>