vue-picker-model
vue-picker-model
vue-picker-model is a dependency-free, lightweight vue component.
You only need to set the title and data description, the source data, it will automatically generate an efficient mobile-based selector.
How to use?
npm install vue-picker-model
Example
<template>
<picker v-model="picker_val"
:is_show.sync="is_show_picker"
:title="title"
:item_title="item_title"
:data="picker_data"
:selected_color="selected_color"
:width_ratio="width_ratio"></picker>
</template>
<script>
import picker from 'vue-picker-model';
export default {
components: { picker },
data () {
return {
is_show_picker: false,
is_show_picker: false,
title: "选择地区、车牌、车型",
item_title: ['地区', '车牌', '车型'],
selected_color: "#eabf50",
width_ratio: [1, 1, 3],
picker_data: [['京', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼', '渝', '川', '贵', '藏', '陕', '甘', '青', '宁', '新'],['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],['奥迪Q7', '本田CR-V', '兰博基尼第六元素']],
picker_val: ['粤', 'A', '本田CR-V']
}
}
}
</script>
demo:
Dependencies
babel-core: ^6.0.0babel-loader: ^6.0.0babel-plugin-transform-runtime: ^6.15.0babel-preset-es2015: ^6.14.0babel-preset-stage-2: ^6.13.0cross-env: ^3.0.0css-loader: ^0.25.0file-loader: ^0.9.0vue-loader: ^11.1.4vue-template-compiler: ^2.2.1webpack: ^2.2.0webpack-dev-server: ^2.2.0babel-eslint: 7.1.1eslint: 3.14.1eslint-friendly-formatter: 2.0.7eslint-loader: 1.6.1eslint-plugin-html: 2.0.0eslint-config-airbnb-base: 11.0.1eslint-import-resolver-webpack: 0.8.1eslint-plugin-import: 2.2.0