Vue Picker 使用教程

Vue Picker 使用教程

vue-pickerA picker componemt for vue项目地址:https://gitcode.com/gh_mirrors/vu/vue-picker

项目介绍

Vue Picker 是一个为 Vue.js 设计的 picker 组件，支持普通选择、联动选择、中国地址选择等多种常见选择器。该组件兼容 PC 和移动端，通过简单的配置即可实现强大的选择功能。

项目快速启动

安装

你可以通过 npm 或 yarn 安装 Vue Picker：

npm install vue-pickers --save
# 或者
yarn add vue-pickers

使用

1. 直接引入文件： 如果你是普通网页开发，可以直接复制 lib/vue-picker.js 文件夹到你的项目中，然后直接使用：

   <template>
     <div>
       <button @click="show">show</button>
     </div>
   </template>
   <script>
   import Vue from 'vue';
   import VuePicker from './lib/vue-picker.js';
   
   Vue.use(VuePicker);
   
   export default {
     methods: {
       show() {
         // 显示 picker
       }
     }
   }
   </script>
   

2. 通过 npm 引入： 在你的项目中引入 Vue Picker：

   import { VuePicker, VuePickerOption } from 'vue-pickers';
   
   const app = Vue.createApp({});
   app.component('VuePicker', VuePicker);
   app.component('VuePickerOption', VuePickerOption);
   app.mount('#app');
   

示例代码

<template>
  <div>
    <VuePicker v-model="selectedColor" :isAutofocus="true">
      <VuePickerOption value="">Empty</VuePickerOption>
      <VuePickerOption value="red">Red</VuePickerOption>
      <VuePickerOption value="green">Green</VuePickerOption>
      <VuePickerOption value="blue">Blue</VuePickerOption>
      <VuePickerOption value="yellow" :isDisabled="true">Yellow</VuePickerOption>
      <VuePickerOption value="teal">Teal</VuePickerOption>
    </VuePicker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedColor: ''
    };
  }
}
</script>

应用案例和最佳实践

案例一：地址选择器

Vue Picker 支持中国地址选择，可以方便地集成到电商网站或物流系统中：

<template>
  <div>
    <VuePicker v-model="selectedAddress" :options="addressOptions"></VuePicker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedAddress: '',
      addressOptions: [
        { value: '110000', label: '北京市' },
        { value: '310000', label: '上海市' },
        // 更多地址选项
      ]
    };
  }
}
</script>

案例二：颜色选择器

在设计工具或配置页面中，可以使用 Vue Picker 作为颜色选择器：

<template>
  <div>
    <VuePicker v-model="selectedColor">
      <VuePickerOption value="red">Red</VuePickerOption>
      <VuePickerOption value="green">Green</VuePickerOption>
      <VuePickerOption value="blue">Blue</VuePickerOption>
      <VuePickerOption value="yellow">Yellow</VuePickerOption>
      <VuePickerOption value="teal">Teal</VuePickerOption>
    </VuePicker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedColor: ''
    };
  }
}
</script>

典型生态项目

Vue Picker 可以与其他 Vue.js 生态项目结合使用，例如：

• Vue Router：用于页面导航和状态管理。
• Vuex：用于全局状态管理。
• Vue CLI

vue-pickerA picker componemt for vue项目地址:https://gitcode.com/gh_mirrors/vu/vue-picker