vue-2-better-picker v2.0.3

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

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.