Vue bottom picker是一個非常實用的Vue組件，它提供了一個易于使用的底部選擇器，讓用戶能夠輕松地選擇需要的選項。該組件可以完美地適用于旅游、餐飲、購物等各種類型的App。

使用Vue bottom picker非常簡單。首先，您需要使用npm或yarn安裝組件：

npm install vue-bottom-pickeryarn add vue-bottom-picker

在您的Vue項目中，您需要引入Vue bottom picker組件：

import BottomPicker from 'vue-bottom-picker';

接下來，您需要使用組件來創建您的底部選擇器。以下是基本的模板代碼：

<template>
<bottom-picker
v-bind:items="options"
v-bind:default-index="defaultIndex"
v-on:item-change="onItemChange">
</bottom-picker>
</template>

代碼說明：

• items：選項數組，每個選項應該包含一個label和value屬性。
• defaultIndex：默認選項的索引值。
• item-change：選項更改時觸發的回調函數。

最后，您只需要在Vue實例中定義您的選項數組和回調函數即可。以下是完整的示例代碼：

<template>
<div>
<button v-on:click="showPicker">{{ value }}</button>
<bottom-picker 
v-bind:items="options"
v-bind:default-index="defaultIndex"
v-on:item-change="onItemChange">
</bottom-picker>
</div>
</template>
<script>
import BottomPicker from 'vue-bottom-picker';
export default {
components: {
BottomPicker,
},
data() {
return {
options: [
{ label: '選項一', value: 'option1' },
{ label: '選項二', value: 'option2' },
{ label: '選項三', value: 'option3' },
{ label: '選項四', value: 'option4' },
{ label: '選項五', value: 'option5' },
],
defaultIndex: 0,
value: '請選擇',
};
},
methods: {
showPicker() {
this.$refs.picker.show();
},
onItemChange(index) {
this.value = this.options[index].label;
},
},
};
</script>

使用Vue bottom picker可以幫助您輕松地添加底部選擇器到您的Vue應用程序中。該組件易于使用，具有高度的自定義性，非常適合各種類型的應用程序。