vue 类ios的时间组件_Vue选择组件，例如ios 3D选择器样式

vue 类ios的时间组件

pd选择 (pd-select)

A mobile UI component like IOS picker for Vue 2.x,can be wheel pick what ever you defined.

诸如Vue 2.x的IOS选择器之类的移动UI组件可以随心所欲定义。

View demo 查看演示 Download Source 下载源

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

浏览器	版
IE浏览器	> 11
埃德	> = 16
火狐浏览器	> = 57
Chrome	> = 47
苹果浏览器	> = 11
iOS Safari	> = 9.3
适用于Android的Chrome	> = 62
三星上网	> = 6.2

Build Setup

构建设置

# install dependencies
npm install

# build for production with minification
npm run compile

安装 (install)

npm i pd-select -S

例 (example)

import pdSelect from 'pd-select'

Vue.use(pdSelect)

//other code

<template>
  <div>
    <div>pickedValue: {{month}}</div>
    <div>pickedValue: {{day}}</div>
    <pd-select-box style="position: fixed;bottom: 0;width: 100%">
      <pd-select-item :listData="listData" v-model="month"></pd-select-item>
      <pd-select-item :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: 'customValue0'
      }
    }
  }
</script>

道具 (props)

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

翻译自: https://vuejsexamples.com/a-vue-select-components-like-ios-3d-picker-style/

vue 类ios的时间组件