vue3-picker
v0.4.3
Published
A simple picker with vue3
Downloads
31
Maintainers
Readme
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
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 |