vue3-picker

Vue3 Picker component (DEMO)

Features

• Picker List
• Supports single-column and concatenated data
• Scroll wheel 3D effect
• Custom title, confirm and cancel text, class and color
• Custom wheel swipe Time
• Built-in date and time data
• Supports typescript

Getting started

Installation

First step is to install it using yarn、npm or pnpm:

npm install vue3-picker

# or use yarn
yarn add vue3-picker

# or use pnpm
pnpm install vue3-picker

Precautions

If you use Vite Tooling and report an error (TypeError: Cannot read properties of null (reading 'setupContext')):

defineConfig({
  ...
  resolve: {
    dedupe: ['vue'],
  },
});

Basic Using

<script setup>
import { ref, computed, reactive } from "vue";
import { Picker } from 'vue3-picker';

const currentSelect = ref({});
const anchor = ref([0, 1, 2]);
const currentSingle = ref<LangType>({});
const anchorSingle = ref(1);
const currentDate = ref([2022, 7, 7]);
const currentTime = ref([]);
const isShowPicker = ref(false);
const isShowDate = ref(false);
const isShowTime = ref(false);
const dataList = ref([
  [
    { langType: 2, code: "vi", original: "Tiếng Việt" },
    { langType: 0, code: "en", original: "English" },
    { langType: 1, code: "cn", original: "中文" }, 
  ],
  [
    { langType: 2, code: "vi", original: "Tiếng Việt" },
    { langType: 0, code: "en", original: "English" },
    { langType: 1, code: "cn", original: "中文" }, 
  ],
  [
    { langType: 2, code: "vi", original: "Tiếng Việt" },
    { langType: 0, code: "en", original: "English" },
    { langType: 1, code: "cn", original: "中文" }, 
  ],
]);

const singleData = [
  { langType: 2, code: "vi", original: "Tiếng Việt" },
  { langType: 0, code: "en", original: "English" },
  { langType: 1, code: "cn", original: "中文" },
];

const options = reactive({
  confirmColor: '#000',
  cancelClass: 'test',
  titleText: 'Title',
});

function confirm(value) {
  currentSelect.value = value;
}

function cancel() {
  console.log('cancel');
}

function toggle() {
  isShowPicker.value = true;
}

function openSingle() {
  isShowSingle.value = true;
}

function openDate() {
  isShowDate.value = true;
}

function openTime() {
  isShowTime.value = true;
}
</script>

<template>
  <picker 
    v-model:isShowPicker="isShowPicker"
    v-model:anchor="anchor"
    :data="dataList"
    :showKey="['original', 'original', 'original']"
    :options="options"
    :swipeTime="500"
    @confirm="confirm"
    @cancel="cancel"
  />

  <picker 
    v-model:isShowPicker="isShowSingle"
    v-model:anchor="anchorSingle"
    :data="singleData"
    showKey="original"
    :options="options"
    @confirm="confirmSingle"
  />

  <picker 
    v-model:isShowPicker="isShowDate"
    v-model:anchor="currentDate"
    type="date"
    :options="{ titleText: 'date selector' }"
  />

  <picker 
    v-model:isShowPicker="isShowTime"
    v-model:anchor="currentTime"
    type="time"
    :options="{ titleText: 'time selector' }"
  />

  <button @click="toggle">toggle</button>
  <button @click="openSingle">single</button>
  <button @click="openDate">date</button>
  <button @click="openTime">time</button>
</template>

Props

Name	Required	Type	Description	Default
v-model:isShowPicker	true	Boolean	Control picker show
v-model:anchor	true	Number or Number[]	Picker current select index (single column for Number、 multiple columns for Array)	date: [2022, 7, 12] time: [10, 13, 20]
data	false	Array	Picker list [1, 2, 3] or [[1, 2, 3], [1, 2, 3]]
type	false	String	Built-in picker type, no need to pass in data (date, time)	date: current date time: current time
showKey	false	String or String[]	Wheel options name (object key)
swipeTime	false	Number	Wheel swipe Time	500
options	false	Object	Custom text, color and class	See below for details

options

{
  cancelClass: '',
  confirmClass: '',
  titleClass: '',
  cancelColor: '#999',
  confirmColor: '#42b983',
  titleColor: '',
  cancelText: 'Cancel',
  confirmText: 'Confirm',
  titleText: '',
}

Events

Event	Description	Return Parameters
confirm	Triggered when the confirm button is clicked	Selected value
cancel	Triggered when the cancel button is clicked	None