Skip to content

Latest commit

 

History

History
80 lines (62 loc) · 1.88 KB

README.md

File metadata and controls

80 lines (62 loc) · 1.88 KB

vue-better-picker

image

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.

QR_455628

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.