wk-view

Appearance

On this page

wkv-bottom-select ​

底部弹窗的选择器，组件简介

用法 ​

html
<wkv-bottom-select v-model:show="show"></wkv-bottom-select>

Props ​

属性名类型默认值说明
showBooleanfalse是否显示底部弹窗
styleObject{ height: '40%' }底部弹窗自定义样式
roundBooleanfalse是否显示圆角
close-click-overlayBooleantrue是否可以通过点击遮罩层关闭弹窗
titleString请选择标题
cancelTextString取消取消按钮文案
confirmTextString确定确定按钮文案

Events ​

事件名事件说明函数签名参数说明
onOpen底部弹窗打开的回调() => void-
onClose底部弹窗关闭的回调() => void-
onCancel底部弹窗取消按钮的回调() => void-
onConfirm底部弹窗确定按钮的回调() => void-

Slots ​

插槽名插槽说明参数说明
body底部弹窗的内容-

示例 ​

vue
<template>
	<view class="wkv-bottom-select-example">
		<wk-section>空白容器：</wk-section>
		<wkv-button @click="handleBlank">空白容器</wkv-button>
		<wkv-bottom-select v-model:show="blankShow" />

		<wk-section>带插槽容器：</wk-section>
		<wkv-button @click="handleSlot">带插槽容器</wkv-button>
		<wkv-bottom-select v-model:show="slotShow" title="插槽" @onConfirm="handleSlotConfirm">
			<template #body>
				<picker-view
					:value="pickerVal"
					@change="handlePickerChange"
					indicator-style="height: 50px"
					class="picker-view"
				>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in array" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</template>
		</wkv-bottom-select>

		<wk-section>标题文案：</wk-section>
		<wkv-button @click="handleTitle">更改标题文案</wkv-button>
		<wkv-bottom-select v-model:show="titleShow" title="新的标题" />

		<wk-section>圆角显示：</wk-section>
		<wkv-button @click="handleRound">圆角显示</wkv-button>
		<wkv-bottom-select v-model:show="roundShow" title="圆角" round />

		<wk-section>打开&关闭事件：</wk-section>
		<wkv-button @click="handleEvent">事件</wkv-button>
		<wkv-bottom-select
			v-model:show="eventShow"
			title="事件"
			round
			@onClose="handleCloseEvent"
			@onOpen="handleOpenEvent"
			@onCancel="handleCloseEvent"
			@onConfirm="handleCloseEvent"
		/>

		<wk-section>按钮文案：</wk-section>
		<wkv-button @click="handleText">按钮文案</wkv-button>
		<wkv-bottom-select
			v-model:show="textShow"
			round
			title="按钮文案"
			cancelText="这是取消按钮"
			confirmText="这是确定按钮"
		/>

		<wk-section>不允许点击遮罩层关闭：</wk-section>
		<wkv-button @click="handleOverlay">不允许点击遮罩层关闭</wkv-button>
		<wkv-bottom-select
			v-model:show="overlayShow"
			round
			:close-click-overlay="false"
			title="不允许点击遮罩层关闭"
		/>
	</view>
</template>
vue
<script setup>
import { ref, reactive } from 'vue'

const array = ['中国', '美国', '巴西', '日本']
const blankShow = ref(false)
const slotShow = ref(false)
const roundShow = ref(false)
const titleShow = ref(false)
const eventShow = ref(false)
const textShow = ref(false)
const overlayShow = ref(false)
const pickerVal = ref([0])

/**
 * 空白容器事件
 */
const handleBlank = () => {
	blankShow.value = true
}

/**
 * 带插槽容器事件
 */
const handleSlot = () => {
	slotShow.value = true
}
const handlePickerChange = (e) => {
	console.log('picker发送选择改变，携带值为', e.detail.value)
	pickerVal.value = e.detail.value
}
const handleSlotConfirm = () => {
	uni.$wkv.showToast({
		title: `选择值为：${array[pickerVal.value[0]]}`,
	})
}

/**
 * 标题文案事件
 */
const handleTitle = () => {
	titleShow.value = true
}

/**
 * 圆角显示事件
 */
const handleRound = () => {
	roundShow.value = true
}

/**
 * 打开/关闭事件
 */
const handleEvent = () => {
	eventShow.value = true
}
const handleOpenEvent = () => {
	uni.$wkv.showToast({
		title: '弹窗已打开',
	})
}
const handleCloseEvent = () => {
	setTimeout(() => {
		uni.$wkv.showToast({
			title: '弹窗已关闭',
		})
	}, 300)
}

/**
 * 按钮文案事件
 */
const handleText = () => {
	textShow.value = true
}

/**
 * 遮罩层事件
 */
const handleOverlay = () => {
	overlayShow.value = true
}
</script>
scss
<style lang="scss">
.wkv-bottom-select-example {
    padding: 20px;
}

.picker-view {
    height: 100%;
}

.picker-item {
    line-height: 50px;
    text-align: center;
}
</style>