pd select

PD-SECECT Mobile Wheel Select

데모

브라우저	버전
즉	> 11
EDG	> = 16
파이어 폭스	> = 57
크롬	> = 47
원정 여행	> = 11
iOS 사파리	> = 9.3
안드로이드 크롬	> = 62
삼성 인터넷	> = 6.2

설정 설정

 # install dependencies
npm install

# run dev
npm run dev

설치하다

 npm i pd-select -S

예

 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>

소품

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

수동 초기 INIT ITEMDATA (업데이트 값 변경보기)

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

커피 한 잔을 사세요

내가 이것을 만드는 방법

TODO 2.0

支持 支持

事件换 hammerjs를 터치합니다

Webapack 构建

极限 极限支持手动初始化