Usage_zh

中文使用文档

安装

npm

npm i -S vue-smooth-picker

或者 yarn

yarn add vue-smooth-picker

引入

import 'vue-smooth-picker/dist/css/style.css'
import SmoothPicker from 'vue-smooth-picker'
Vue.use(SmoothPicker)

使用

在你的 Vue 模板里

<template>
  ...
    <smooth-picker ref="smoothPicker" :data="data" :change="change" />
  ...
</template>

传入数据

  ...
    data () {
      return {
        data: [
          {
            currentIndex: 0,
            flex: 3,
            list: [
              'Plan A - free', 'Plan B - $50', 'Plan C - $100'
            ],
            onClick: this.clickOnPlan,
            textAlign: 'center',
            className: 'row-group'
          },
          {
            divider: true,
            flex: 1,
            text: 'product',
            textAlign: 'center',
            className: 'divider'
          },
          {
            currentIndex: 2,
            flex: 3,
            list: [
              '1 * A item', '2 * A items', '3 * A items', '4 * A items', '5 * A items'
            ],
            onClick: this.clickOnProduct,
            textAlign: 'center',
            className: 'item-group'
          }
        ]
      }
    },
  ...

监听数据变更

  ...
    methods: {
      change (gIndex, iIndex) {
        console.info('group:', gIndex, ' index:', iIndex)
      }
    }
  ...

属性

名	类型	默认值	解释
change	Function	(gIndex, iIndex) => {}	数据变更后的回调，传两参数，分别是 排索引 gIndex 和 排值索引 iIndex
data	Array	[]	初始数据
data[i].currentIndex	Number	0	排值的默认索引
data[i].flex	Number	1	排区域在整个组件宽度种的权重 1..12
data[i].list	Array	-	排的值数组
data[i].list[j]	String or Object	-	排的某个值，如果是对象可以用 value 键名
data[i].onClick	Function	-	排的中间层被按下时的回调, 传两参数, 分别是 排索引 gIndex 和 排值索引 iIndex
data[i].textAlign	String	-	在排内靠 左边 left、中间 center 或者 右边 right
data[i].className	String	-	排的自定义 css 类名
data[i].divider	Boolean	false	如果是它的值为 true，那么它就是分割排，并且它的 onClick list currentIndex 将不管用
data[i].text	String	-	只能在 divider 为 true 是使用

实例方法

名	类型	解释
setGroupData	Function	动态设置某排的数据 (gIndex, gData), 例如：list、currentIndex 等。 (见属性 data[i])
getCurrentIndexList	Function	返回一数组 Array 类型的所有排的索引数组 (包括分割排 divider 的排索引，分割排默认排索引为 0)
getGroupsRectList	Function	这个方法会重新收集触摸作用区域的信息，如果页面picker组件初始化的时候它的dom是不可见的状态，你可以在它可见时重新使用此方法来正常使用本组件。

在 Vue Component 中使用

<template>
  <div class="example-page">
    <!-- 3. 使用 -->
    <smooth-picker ref="smoothPicker" :data="data" :change="dataChange" />
    <button class="button" type="button" @click="confirm">Confirm</button>
  </div>
</template>

<script>
  // 1. 引入
  import 'vue-smooth-picker/dist/css/style.css'
  import { SmoothPicker } from 'vue-smooth-picker'

  export default {
    name: 'example-page',
    components: {
      SmoothPicker // 2. 注册组件
    },
    data () {
      return {
        data: [ // 4. 传入数据
          {
            currentIndex: 0,
            flex: 3,
            list: [
              'Plan A - free', 'Plan B - $50', 'Plan C - $100'
            ],
            onClick: this.clickOnPlan,
            textAlign: 'center',
            className: 'row-group'
          },
          {
            divider: true,
            flex: 1,
            text: 'product',
            textAlign: 'center',
            className: 'divider'
          },
          {
            currentIndex: 2,
            flex: 3,
            list: [
              '1 * A item', '2 * A items', '3 * A items', '4 * A items', '5 * A items'
            ],
            onClick: this.clickOnProduct,
            textAlign: 'center',
            className: 'item-group'
          }
        ]
      }
    },
    methods: {
      // 5. 监听变化
      dataChange (gIndex, iIndex) {
        console.info('list', gIndex, iIndex)
        if (gIndex === 0) {
          let currentIndex = 0
          let list = []
          switch (iIndex) {
            case 2:
              list = ['C item 1', 'C item 2', 'C item 3', 'C item 4', 'C item 5', 'C item 6', 'C item 7', 'C item 8', 'C item 9']
              currentIndex = 4
              break
            case 1:
              list = ['1 * B item', '2 * B items', '3 * B items', '4 * B items', '5 * B items', '6 * B items', '7 * B items']
              currentIndex = 3
              break
            default:
              list = ['1 * A item', '2 * A items', '3 * A items', '4 * A items', '5 * A items']
              currentIndex = 2
          }
          this.$refs.smoothPicker.setGroupData(2, Object.assign({}, this.data[2], { currentIndex, list }))
        }
      },
      // 6. 监听中间层点击
      clickOnPlan (gIndex, iIndex) {
        window.alert('Clicked plan: ' + this.data[gIndex].list[iIndex])
      },
      clickOnProduct (gIndex, iIndex) {
        window.alert('Clicked product: ' + this.data[gIndex].list[iIndex])
      },
      // 7. 拿到当前指定的数据索引
      confirm () {
        const ciList = this.$refs.smoothPicker.getCurrentIndexList()
        const planDetail = this.data[0].list[ciList[0]]
        const productDetail = this.data[2].list[ciList[2]]
        window.alert(
          'Confirmed index list: ' + ciList + '.\n' +
          'Confirmed plan: ' + planDetail + '.\n' +
          'Confirmed product: ' + productDetail
        )
      }
    }
  }
</script>

开发

npm run dev # 开发
npm run build # 生产

遇到问题了？

请让我知道

• 打开一个新的 issue
• 给我发邮件：[email protected]