# vue-2-better-picker

> Mobile picker component for Vue 2

Latest version **2.0.3** (published 2022-03-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-2-better-picker
pnpm add vue-2-better-picker
yarn add vue-2-better-picker
bun add vue-2-better-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2022-03-07 |
| First published | 2022-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 910.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | shingo.sasaki |
| Maintainers | shingo.sasaki |
| Keywords | vue, picker |

## Links

- npm: https://www.npmjs.com/package/vue-2-better-picker
- Repository: https://github.com/s-sasaki-0529/vue-better-picker
- Homepage: https://github.com/s-sasaki-0529/vue-better-picker/blob/vue3/README.md
- Issues: https://github.com/s-sasaki-0529/vue-better-picker/issues
- npm.io page: https://npm.io/package/vue-2-better-picker

## Dependencies (2)

- [@better-scroll/core](https://npm.io/package/@better-scroll/core.md) ^2.0.0
- [@better-scroll/wheel](https://npm.io/package/@better-scroll/wheel.md) ^2.0.0

## Recent versions

- 2.0.3 (latest) — 2022-03-07
- 2.0.2 — 2022-03-04
- 2.0.1 — 2022-03-02
- 2.0.0 — 2022-03-02
- 0.0.3 — 2022-03-02
- 0.0.2 — 2022-03-02
- 0.0.1 — 2022-03-02

## README

# This branch is for Vue 2 Only

If you want to use it with Vue 3, please check the [vue3](https://github.com/s-sasaki-0529/vue-better-picker/tree/vue3) branch.

# vue-better-picker

![image](https://user-images.githubusercontent.com/16274215/150684460-256048c4-fce5-4550-88b8-ee0f1060e07d.png)

Mobile picker component for Vue 2 that forked from [openfe-openfe/vue-better-picker](https://github.com/openfe-openfe/vue-better-picker).

## Demo

Open [Demo App](https://vue-3-better-picker.netlify.app/) or scan the QR code below with your mobile device. (The demo uses Vue 3.)

![QR_455628](https://user-images.githubusercontent.com/16274215/151659196-03d134aa-6915-4694-bee9-f7a02c13e810.png)

## Install

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

## Usage

```vue
<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.

```bash
$ yarn dev
```

Please feel free to create a PR or Issue.

---
_Source: https://npm.io/package/vue-2-better-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._