【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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150