vue-2-better-picker

This branch is for Vue 2 Only

If you want to use it with Vue 3, please check the vue3 branch.

vue-better-picker

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

Demo

Open Demo App or scan the QR code below with your mobile device. (The demo uses Vue 3.)

Install

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

Usage

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

<script>
import BetterPicker from "vue-2-better-picker";

export default {
  components: {
    BetterPicker,
  },
  data() {
    return {
      show: true,
    };
  },
  computed: {
    pickerData() {
      return [
        // 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" },
        ],
      ];
    },
  },
  methods: {
    onSelect(selectedValues) {
      console.log(selectedValues);
    },
  },
};
</script>

Props

name	type	description
value	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.