Vue类似选择元素选择器组件 - vue-picker

Vue类似选择元素选择器组件 - vue-picker
插件名称 vue-picker
版本号 v2.0.2
发布时间 2020年11月13日
插件作者 invisiburu

一个用户友好的下拉选择器组件,其行为类似于本机的select元素。

安装和下载:

# NPM
$ npm i @invisiburu/vue-picker --save

如何使用它:

1.导入并注册选择器组件。

import { VuePicker, VuePickerOption } from '@invisiburu/vue-picker'
import '@invisiburu/vue-picker/dist/vue-picker.min.css'
Vue.component('VuePicker', VuePicker)
Vue.component('VuePickerOption', VuePickerOption)

2.将基本选择器组件添加到应用程序。

<vue-picker v-model="language" autofocus>
  <vue-picker-option value="">Empty</vue-picker-option>
  <vue-picker-option value="js">JavaScript</vue-picker-option>
  <vue-picker-option value="html">HTML</vue-picker-option>
  <vue-picker-option value="css">CSS</vue-picker-option>
</vue-picker>

3.VuePicker组件可能的道具和事件。

  • autofocus 自动对焦
  • disabled 禁用组件
  • value 在这里定义您的价值
  • placeholder 占位符文本
  • @input:选择一个选项时
  • @open:打开时
  • @close:关闭后

4.VuePickerOption组件可能的道具和事件。

  • disabled 禁用该选项
  • value 在这里定义您的价值
  • text 要显示的文字,而不是默认广告位的内容

变更日志:

v2.0.2 (06/07/2021)

  • 现在仅支持 Vue3 版本。
  • 更换 disabled 和 autofocus 使用属性 isDisabled 和 isAutofocus 布尔道具。
  • 重命名的 css 修饰符选择器。
  • 开场白的文字现在会在导航栏上立即更新,打开下拉菜单中带有向上和向下箭头。

v2.0.2 (06/08/2021)

  • 修正错误

v1.1.2(03/06/2021)

  • 修复了Deps的安全问题