【UNI】底部梯形按钮组件

• 组件效果

• 组件代码

<template>
	<!-- 底部按钮 -->
	<view class="questionis-bottom">
		<view class="bottom-left" @click="clickLeft()">
			<view class="cent_1">
				{{prevText}}
			</view>
		</view>
		<view class="bottom-right" @click="clickRight()">
			<view class="cent_2">
				{{nextText}}
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 答题页面底部按钮组件
	 * @param {String} prevText 上一题按钮文本
	 * @param {String} nextText 下一题按钮文本
	 * @param {Boolean} isPrev 上一题按钮是否可用
	 * @param {Boolean} isNext 下一题按钮是否可用
	 * @emits no-prev 触发上一题失败
	 * @emits to-prev 触发上一题成功
	 * @emits no-next 触发下一题失败
	 * @emits to-next 触发下一题成功
	 */
	export default {
		props: {
			prevText: {
				type: String,
				default: '上一题'
			},
			nextText: {
				type: String,
				default: '下一题'
			},
			isPrev: {
				type: Boolean,
				default: true
			},
			isNext: {
				type: Boolean,
				default: true
			},
		},
		methods: {
			// 点击上一题
			clickLeft() {
				// 触发上一题不能点击效果
				if (!this.isPrev) {
					this.$emit('no-prev')
					return
				}
				// 触发上一题
				this.$emit('to-prev')
			},
			// 点击下一题
			clickRight() {
				// 触发下一题不能点击效果
				if (!this.isNext) {
					this.$emit('no-next')
					return
				}
				// 触发下一题
				this.$emit('to-next')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.questionis-bottom {
		width: calc(100% - 40rpx);
		height: 120rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		position: fixed;
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		background: #fff;

		.bottom-left {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;

			.cent_1 {
				width: 83%;
				height: 90rpx;
				position: relative;
				background: #f0fff6;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 33rpx;
				color: #27BE8F;
			}

			.cent_1:before {
				content: '';
				position: absolute;
				right: -89rpx;
				border: 45rpx solid;
				border-color: transparent transparent #f0fff6 #f0fff6;
			}

			.cent_1:active {
				opacity: 0.9
			}
		}

		.bottom-right {
			width: 100%;
			height: 90rpx;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;

			.cent_2 {
				width: 83%;
				height: 90rpx;
				position: relative;
				background: #27be8f;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 33rpx;
				color: #FFFFFF;
			}

			.cent_2:before {
				content: '';
				position: absolute;
				left: -89rpx;
				border: 45rpx solid;
				border-color: #27be8f #27be8f transparent transparent;
			}

			.cent_2:active {
				opacity: 0.9
			}
		}
	}
</style>

【UNI】底部梯形按钮组件 https://blog.csdn.net/yys190418/article/details/126058755