mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 13:01:01 +08:00
docs(picker): add a simple picker example for Vue (#23818)
There was previously no example for a vue picker, this adds one. closes #2053
This commit is contained in:
53
core/src/components/picker/usage/vue.md
Normal file
53
core/src/components/picker/usage/vue.md
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ion-button @click="openPicker">SHOW PICKER</ion-button>
|
||||||
|
<p v-if="picked.animal">picked: {{ picked.animal.text }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { IonButton, pickerController } from "@ionic/vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
IonButton,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pickingOptions: {
|
||||||
|
name: "animal",
|
||||||
|
options: [
|
||||||
|
{ text: "Dog", value: "dog" },
|
||||||
|
{ text: "Cat", value: "cat" },
|
||||||
|
{ text: "Bird", value: "bird" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
picked: {
|
||||||
|
animal: "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async openPicker() {
|
||||||
|
const picker = await pickerController.create({
|
||||||
|
columns: [this.pickingOptions],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: "Cancel",
|
||||||
|
role: "cancel",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Confirm",
|
||||||
|
handler: (value) => {
|
||||||
|
this.picked = value;
|
||||||
|
console.log(`Got Value ${value}`);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
await picker.present();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
Reference in New Issue
Block a user