基于 vue 的 picker 组件 vue-awesome-picker

Lsnsh 发布于2019-08-22 15:20 / 2901人阅读

摘要：本组件停止维护组件库请移步小程序组件库请移步有赞前端大量坑位，内推私信基于的移动端组件支持单列多列和联级数据内置时间日期数据滚轮效果颜色可配置已启用试试离线访问吧点击查看详细使用方法参照源码参数描述可选类型默认详细描述

⚠️ DEPRECATED 本组件停止维护
⚠️ Vue 组件库请移步 Vant
⚠️ 小程序组件库请移步 Vant Weapp
⚠️ 有赞前端大量坑位，内推私信

vue-awesome-picker

基于 Vue.js & Better-Scroll 的移动端 picker 组件

Features

支持单列、多列和联级数据

内置时间、日期数据

滚轮 3D 效果

颜色可配置

Demo

PS：Demo 已启用 Service Worker 试试离线访问吧

点击查看 >>

Installation

npm install vue-awesome-picker --save

Usage

/* main.js */
import AwesomePicker from "vue-awesome-picker";
Vue.use(AwesomePicker);

/* 详细使用方法参照源码 App.vue */

methods: {
  show() {
    this.$refs.picker.show();
  }
}

Props

参数	描述	可选	类型	默认
data	详细描述见下文		Array
anchor	详细描述见下文		Array
type	内置 picker 类型无需传入 data	date, time	String
textTitle	title 文案		String
textConfirm	confirm 文案		String	确定
textCancel	cancel 文案		String	取消
colorTitle	title 颜色		String	#000000
colorConfirm	confirm 颜色		String	#42b983
colorCancel	cancel 颜色		String	#999999
swipeTime	滚动速度(better-scroll swipeTime)		Number	1800

data

vue-awesome-picker 通过数据结构不同来区分是普通 picker 还是联级 picker, 所以请严格按照以下数据结构进行配置

单列、多列 picker 以双层数组的形式传入 data

[
  ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s","t", "u", "v", "w", "x", "y", "z"],
  ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S","T", "U", "V", "W", "X", "Y", "Z"]
]

联级 picker 通过 children 构造出具有层级关系的数据

[
  {
    value: "A",
    children: [
      { value: "A-a" },
      { value: "A-b" },
      { value: "A-c" }
    ]
  },
  {
    value: "B",
    children: [
      { value: "B-a" },
      { value: "B-b" }
    ]
  },
]

anchor

anchor 是 picker 展开时每一列默认滚动的锚点位置或值的数组, 兼容两种数据结构, 未匹配到默认选中第0项

[推荐]数组对象形式: 与事件 confirm 返回的参数数据结构相同, 对象里可以只存在 index 或 value, 当存在 index 时优先匹配 index

[
  { 
    index: 0,
    value: "A"
  },
  {
    index: 0,
    value: "A-a"
  } 
]

单层数组形式: index 组成的数组

[0, 0]

Methods

方法	描述
show	展开显示 picker

Events

事件	描述	参数
confirm	点击 confirm 按钮后触发	[{ index: xxx, value: xxx }...] index: 当前选中的 item 在当列的 index value: 当前选中 item 的 value
cancel	点击 cancel 按钮后触发

Development

git clone git@github.com:Fyerl/vue-awesome-picker.git
cd vue-awesome-picker
npm install
npm run dev

keywords for seo: js picker, 前端 picker, datepicker, timepicker, vue, picker, vue picker, vue awesome picker, service worker, pwa, vue pwa, npm, vue npm

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93387.html

基于vue的picker组件

摘要：概述基于选择器组件安装基础用法选项参数描述默认值为，控制显示和隐藏默认值为，显示的数组内容改变时执行的监听函数参数描述类型默认值默认选中的索引值赋值的数组显示的宽度，单位是显示数据的字段名，默认值是最大的滚动概述基于vue.js选择器组件 github: https://github.com/xiecg/vue-... DEMO vue-picker 安装 npm install ...

xiaowugui666 2019-08-22 10:40 评论0 收藏0
基于vue的picker组件

摘要：概述基于选择器组件安装基础用法选项参数描述默认值为，控制显示和隐藏默认值为，显示的数组内容改变时执行的监听函数参数描述类型默认值默认选中的索引值赋值的数组显示的宽度，单位是显示数据的字段名，默认值是最大的滚动概述基于vue.js选择器组件 github: https://github.com/xiecg/vue-... DEMO vue-picker 安装 npm install ...

andot 2019-08-01 15:51 评论0 收藏0
一个很好用的 vue-picker组件

摘要：走了一圈都没有找到自己想要的移动端的的组件，于是自己就下手，撸了一个出来，感受下效果图。 vue-picker a picker componemt for vue2.0 走了一圈 github 都没有找到自己想要的移动端的 vue-picker的组件，于是自己就下手，撸了一个出来，感受下效果图。showImg(https://segmentfault.com/img/remote/...

molyzzx 2019-08-20 19:01 评论0 收藏0
Vue.js前后端通用组件开发心得-菜鸟篇

摘要：最好能使用一套模板渲染前后端的数据，也就是模板和某些简单组件可以同构。开发组件因为需要让服务端也能使用，单文件的开发方式我目前是没有找到可以让读取的方式，所以就暂时放弃了。这种通用组件写法只适合比较简单的项目。项目情况我使用的是express做为服务器框架，只需要调用后台API接口获得数据，然后把数据渲染成html就可以了。最好能使用一套模板渲染前后端的数据，也就是模板和某些简单组...

weakish 2019-08-19 18:00 评论0 收藏0