vue-better-picker

Mobile picker component for Vue 3 that forked from openfe-openfe/vue-better-picker.

If you want to use it with Vue 2, please check the vue2 branch.

Demo

Open Demo App or scan the QR code below with your mobile device.

Install

$ yarn add vue-3-better-picker
# npm install vue-3-better-picker --save

Usage

<template>
  <div>
    <BetterPicker v-model="show" :data="pickerData" @select="onSelect" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import BetterPicker from "vue-3-better-picker";

const show = ref(true);
const pickerData = [
  // left slot
  [
    { value: "a", text: "A" },
    { value: "b", text: "B" },
    { value: "c", text: "C" },
  ],
  // center slot
  [
    { value: "a", text: "A" },
    { value: "b", text: "B" },
    { value: "c", text: "C" },
  ],
  // right slot
  [
    { value: "a", text: "A" },
    { value: "b", text: "B" },
    { value: "c", text: "C" },
  ],
];
const onSelect = (selectedValues) => {
  console.log(selectedValues);
};
</script>

Props

|name|type|description| |---|---|---| |modelValue|Array|Basic object for picker (Usually bound by v-model)| |title|String|Text displayed in the top center| |cancelText|String|Cancel button text| |confirmText|String|OK button text| |selectedIndex|Array|Initial values of the selected state|

Contribution

You can start developing immediately with the following command and open http://localhost:8080.

$ yarn dev

Please feel free to create a PR or Issue.