@cromarmot/v2-nut-picker NPM

v2-nut-picker

vue2 mobile picker components modified based on nutui.

Demo

codesandbox.io

Introduction

基于: https://github.com/jdf2e/nutui 修改

修改了一点 typo

index 下标从 1 开始改为从 0 开始

考虑到 vue 的$event 只能把 emit 的首个参数处理掉，因此所有 emit 改为单个 emit 参数

去掉了没有必要的把 index 向子组件传递再传回给父组件的动作

增加了 pc mouse 事件支持

修复了异步取值的一致性问题

Features

Removed the title confirmation and cancel button, so you can use this components anywhere you want.

Optimize the part of the code written and fix some typo.

Add warning message in development environment.

Support mouse event on PC

Install

yarn add @cromarmot/v2-nut-picker

Usage

<template>
  <v2-nut-picker
    :list-data="listData"
    :default-value-data="defaultValue"
    @choose="choose"
  />
</template>

<script>
import V2NutPicker from '@cromarmot/v2-nut-picker'
export default {
  components: { V2NutPicker },
  data() {
    return {
      listData: [
        ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07'],
        ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06']
      ],
      defaultValue: [
        '2020-01',
        '2020-02'
      ]
    }
  },
  methods: {
    choose({ self, index, value, changeValueData }) {
      console.log(index, value, changeValueData)
      if (index === 0) {
        if (value > changeValueData[1]) {
          self.updateChooseValue(self, 1, value)
        }
      } else if (index === 1) {
        if (value < changeValueData[0]) {
          self.updateChooseValue(self, 0, value)
        }
      }
    }
  }
}
</script>