vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮

Overview

npm

pd-select mobile wheel select

demo

browser       version      
IE >11
Edg >=16
Firefox >=57
chrome >=47
safari >=11
iOS Safari >=9.3
Chrome for Android >=62
Samsung Internet >=6.2

Build Setup

# install dependencies
npm install

# run dev
npm run dev

install

npm i pd-select -S

example

import pdSelect from 'pd-select'

Vue.use(pdSelect)

//other code

<template>
  <div id="app">
    <pd-select-box style="position: fixed;bottom: 0;width: 100%">
      <pd-select-item ref="month" :listData="listData" v-model="month"></pd-select-item>
      <pd-select-item ref="day" :listData="listData2" type="cycle" v-model="day"></pd-select-item>
    </pd-select-box>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        listData: Array.from({length: 12}, (value, index) => 1 + index),
        listData2: Array.from({length: 30}, (value, index) => 'customValue' + index),
        month: 100,
        day: 'customValue15'
      }
    },
    mounted(){
      setTimeout(()=>{
        //验证 model 联动
        this.after()
      },3000)
    },
    methods: {
      after () {
        this.day = 'customValue0'
        this.$refs.day.init()
      }
    }
  }
</script>

props

  @param value {String} current select value or init value
  @param data {Array} loop array value
  @param type {String} 'cycle' ,default 'line'

manual init itemData (update value change view)

use $refs to manual trigger component's init event to update view just like demo

Buy me a cup of coffee

buycoffee

how i build this

todo 2.0

支持 点击

touch 事件换hammerjs

webapack 构建

极限 缓动 支持手动初始化

You might also like...
Universal select/multiselect/tagging component for Vue.js
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

✅ Vue 2.x component for selecting image from list

✅ Vue Select Image Vue 2.x component for selecting image from list Demo https://mazipan.github.io/vue-select-image/ Installation # Yarn yarn add vue-s

A multi-select component with nested options support for Vue.js
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

a lovely component of cascade selector with vue.js
a lovely component of cascade selector with vue.js

v-cascade A lovely component of cascade selector with vue.js (Support both of PC and Mobile) 中文文档 Introduction Demo Screenshot basic-selector remote-s

Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

A vue version of bootstrap select

@alfsnd/vue-bootstrap-select A vue version of bootstrap select Demo Install npm install @alfsnd/vue-bootstrap-select --save Usage import VSelect from

A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

A component for Vue.js to select double-sided data.
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Comments
  • 用作获取时间的组件,对v-model值重新赋值,然后调用init()方法之后,显示选中的值不对

    用作获取时间的组件,对v-model值重新赋值,然后调用init()方法之后,显示选中的值不对

    我在点击按钮之后重新对绑定的值赋值,接着执行init()方法,希望能够将对应的值显示为选中效果 <pd-select-item ref="year" :listData="YearArr" v-model="year" type="cycle"> this.year = this.getDateYear(date) + '年'; this.$refs.year.init() 结果每次执行之后都会发现位置出错,@k186 希望能够解答一下

    bug 
    opened by hwyeeee 4
  • 事件绑定错误

    事件绑定错误

    mounted() { // 事件綁定 this.$el.addEventLister('touchstart',this.itemTouchStart) this.$el.addEventLister('touchmove',this.itemTouchMove) this.$el.addEventLister('touchend',this.itemTouchEnd) 这样写好像是不对的,获取不到dom,导致addEventLister undefined log了一下$el、el、this.$el都undefined

    opened by Gerogina6 1
Releases(2.0.4)
Owner
YPanda
web front & drones driver & photography ins:@y1_panda
YPanda
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
A native-like select field, but better

A native-like select field, but better

Maksym Nesterov 18 Jun 1, 2022
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

Terry Zeng 74 Aug 27, 2022
A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!

vue-dataset ?? HEADS UP! You're currently looking at vue-dataset branch for Vue.js 2. If you're looking for a Vue.js 3 compatible version of vue-datas

Giannis Koutsaftakis 170 Nov 21, 2022
An vue select components,vselect是基于vue编写的select组件

vselect An vue select components Demo Live Demo Installation: npm install --save-dev vselect-component How to use 1、To include this project you need t

web_harry 5 Jan 17, 2021
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 95 Apr 20, 2022
Select components using Bulma as CSS framework.

Vue Bulma Select Select components using Bulma as CSS framework Docs/Examples Could be found here TODO Push to NPM Unit testing Multi-select (tags) De

Gabriel Corado 13 Oct 19, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
VueForms-Mastery - Getting better at vue forms/ Intermediate - 02 VueMastery - Vue 3 Forms

advanced-forms Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints

Rickson Simões 0 Jan 4, 2022
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 18, 2022