快捷導(dǎo)航

uniapp-vue3-彈出選擇組件wo-pop-selector使用示例

更新時(shí)間：2023年10月10日 09:33:01 作者：狼性書生

wo-pop-selector彈出選擇組件采用uniapp-vue3實(shí)現(xiàn), 支持H5、微信小程序,本文給大家介紹uniapp-vue3-彈出選擇組件wo-pop-selector及使用示例,感興趣的朋友一起看看吧

wo-pop-selector彈出選擇組件采用uniapp-vue3實(shí)現(xiàn), 支持H5、微信小程序（其他小程序未測(cè)試過，可自行嘗試）

可到插件市場(chǎng)下載嘗試： 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">
						狀態(tài)選擇：{{ 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">
						狀態(tài)選擇：{{ 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">
						狀態(tài)選擇：{{ 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">
						狀態(tài)選擇：{{ 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">
						狀態(tài)選擇：{{ state.options[state.value]?.label }}
					</view>
					<template v-slot:header>
						<view style="padding: 12rpx 20rpx; color: grey;">請(qǐng)選擇訂單狀態(tài)</view>
					</template>
				</pop-selector>
			</view>
		</view>
		<view class="card">
			<view class="header">插槽-自定義右邊圖標(biāo)：</view>
			<view class="content">
				<pop-selector :select-options="state.options" :default-value="state.value" @changeSelect="onChangeSelect">
					<view class="button">
						狀態(tài)選擇：{{ 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>

到此這篇關(guān)于uniapp-vue3-彈出選擇組件wo-pop-selector的文章就介紹到這了,更多相關(guān)uniapp-vue3彈出選擇組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: