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.