wx-vue2-picker

A vue2.x based development, similar to the ios wheel style selection mobile plug-in, currently support time selection, single choice, multiple choice.

Based on the secondary packaging of the wan2land/vue-scroll-picker component, the PopPicker and DtPicker components of mui are implemented, and the usage is consistent with the mui component.

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

build lib

yarn build:lib

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Installation

yarn add wx-vue2-picker

or

npm i wx-vue2-picker

Usage

How to use as mui

1、import css and js in main.js

import 'wx-vue2-picker/lib/wx-vue2-picker.css';
import { PopPicker, DtPicker } from 'wx-vue2-picker';

2、Register the component globally in main.js

Vue.prototype.$PopPicker = PopPicker;
Vue.prototype.$DtPicker = DtPicker;

3、This is how it is used in the specific vue file

let value = [{ value: 3, text: "Jim" }]
let options = [
  { value: 1, text: "Tom" },
  { value: 2, text: "James" },
  { value: 3, text: "Jim" },
]

// Replace this.$PopPicker with mui.PopPicker
// Replace this.$DtPicker with mui.DtPicker

let picker = new this.$PopPicker({
  selectParam: value, // default value
});
picker.setData(options);
picker.show((data) => {
  console.log(data);
});

For other parameters, please check mui official documentation