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.