Web_TracerMethodology/components/tm-simple-btn-group/tm-simple-btn-group.vue

<template>
	<view class="tm-simple-btn-group">
		<button v-for="(item, index) in options" 
			@click="changeStep(item.id)"
			:key="index">{{item.label}}</button>
	</view>
</template>

<script>
	/**
	 * 底部组件，只有两个按钮的简单组件（只有文字没图标），按钮内容需要自行传入数据
	 * props:{
		 * options: [{id:按钮的唯一id,会在点击后返回,label:显示的文本内容}]
		 * callback: 点击事件返回函数，返回参数是按钮id
		 * }
	 */
	export default {
		props: {
			options: {
				type: Array,
				default: [
					{id: 'pre', label: '上一步'},
					{id: 'next', label: '下一步'}
				]
			}
		},
		methods: {
			changeStep: function(type) {
				this.$emit('callback', type);
			}
		}
	}
</script>

<style lang="less">
	.tm-simple-btn-group {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		border-top: 0.62rpx solid #DADEE6;
		width: 100%;
		height: 75rpx;
		
		button {
			border-radius: 0;
			width: 50%;
			height: 100%;
			font-size: 22.5rpx;
			line-height: 75rpx;
			color: #3377FF;
			background-color: #fff;
			&:last-child {
				color: #fff;
				background-color: #3377FF;
			}
			&:after {
				border: 0;
			}
		}
	}
</style>