uniapp-vue3-弹出选择组件wo-pop-selector

wo-pop-selector弹出选择组件采用uniapp-vue3实现, 支持H5、微信小程序（其他小程序未测试过，可自行尝试）

可到插件市场下载尝试： https://ext.dcloud.net.cn/plugin?id=14879

• 使用示例
  

<template>
	<view>
		<view class="name">弹出选择器: pop-selector</view>
		<view class="card">
			<view class="header">属性-基本用法(disabled禁用)：</view>
			<view class="content">
				<pop-selector :select-options="state.options" :default-value="state.value" @changeSelect="onChangeSelect">
					<view class="button">
						状态选择：{{ state.options[state.value]?.label }}
					</view>
				</pop-selector>
			</view>
		</view>
		<view class="card">
			<view class="header">属性-自定义激活颜色：</view>
			<view class="content">
				<pop-selector :active-color="'#0086D1'" :select-options="state.options" :default-value="state.value" @changeSelect="onChangeSelect">
					<view class="button">
						状态选择：{{ state.options[state.value]?.label }}
					</view>
				</pop-selector>
			</view>
		</view>
		<view class="card">
			<view class="header">属性-自定义弹窗高度：</view>
			<view class="content">
				<pop-selector :max-height="'200rpx'" :select-options="state.options" :default-value="state.value" @changeSelect="onChangeSelect">
					<view class="button">
						状态选择：{{ state.options[state.value]?.label }}
					</view>
				</pop-selector>
			</view>
		</view>
		<view class="card">
			<view class="header">属性-自定义弹窗样式：</view>
			<view class="content">
				<pop-selector :card-style="state.darkStyle" :select-options="state.options" :default-value="state.value" @changeSelect="onChangeSelect">
					<view class="button">
						状态选择：{{ state.options[state.value]?.label }}
					</view>
				</pop-selector>
			</view>
		</view>
		<view class="card">
			<view class="header">插槽-自定义弹窗头部：</view>
			<view class="content">
				<pop-selector :active-color="'#0086D1'" :select-options="state.options" :default-value="state.value" @changeSelect="onChangeSelect">
					<view class="button">
						状态选择：{{ state.options[state.value]?.label }}
					</view>
					<template v-slot:header>
						<view style="padding: 12rpx 20rpx; color: grey;">请选择订单状态</view>
					</template>
				</pop-selector>
			</view>
		</view>
		<view class="card">
			<view class="header">插槽-自定义右边图标：</view>
			<view class="content">
				<pop-selector :select-options="state.options" :default-value="state.value" @changeSelect="onChangeSelect">
					<view class="button">
						状态选择：{{ state.options[state.value]?.label }}
					</view>
					<template v-slot:right>
						<view>✅</view>
					</template>
				</pop-selector>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import popSelector from './popSelector.vue'
import { reactive } from 'vue';

const state = reactive({
  options: [
		{
			label: '全部',
			value: 0,
		},
		{
			label: '成功',
			value: 1,
		},
		{
			label: '失败',
			value: 2,
		},
		{
			label: '禁用',
			disabled: true,
			value: 3,
		},
	],
	value: 0,
	darkStyle: {
		color: '#fff',
		background: '#000',
		border: '1px solid #ebeef5',
		borderRadius: '6px',
		boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
		padding: '4px 0',
		fontSize: '26rpx'
	}
});
const onChangeSelect = (e: any) => {
	console.log(e);
  state.value = e.value;
};
</script>

<style scoped>
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.name {
	font-weight: bold;
	padding: 40rpx 0 10rpx 20rpx;
}
.card {
	display: flex;
	justify-content: space-between;
	background: #f1f1f1;
	margin: 40rpx 10rpx;
	padding: 30rpx;
	border-radius: 12rpx;
}
.header {
	display: flex;
	align-items: center;
}
.button {
	background: #fff;
	padding: 16rpx 30rpx;
	border-radius: 10rpx;
}
</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