SegmentPicker 组件

1.7.0 新增

段选择器，用于实现多段的选择，比如选择时间段：2010年9月1日 - 2014年6月30日。

注： 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 create-api。

示例

• 基本用法

通过 data 属性定义每个节点选择器的类型和属性，is 代表该选择器是用哪种 Picker 组件，既可以是 Cube UI 的 Picker 类组件，也可以是你自己定义的 Picker 组件。比如下面是我们用两个 DatePicker 组件来做时间段选择。

<cube-button @click="showDateSegmentPicker">StartDate - EndDate</cube-button>

const dateSegmentData = [
  {
    is: 'cube-date-picker',
    title: '入学时间',
    min: new Date(2000, 0, 1),
    max: new Date(2030, 11, 31)
  },
  {
    is: 'cube-date-picker',
    title: '毕业时间',
    min: new Date(2000, 0, 1),
    max: new Date(2030, 11, 31)
  }
]
 
export default {
  mounted () {
    this.dateSegmentPicker = this.- createSegmentPicker({
      data: dateSegmentData,
      onSelect: (selectedDates, selectedVals, selectedTexts) => {
        this.- createDialog({
          type: 'warn',
          content: `Selected Items: 
 - 入学时间: - {selectedTexts[0].join('')} 
 - 毕业时间: - {selectedTexts[1].join('')}`,
          icon: 'cubeic-alert'
        }).show()
      },
      onNext: (i, selectedDate, selectedValue, selectedText) => {
        dateSegmentData[1].min = selectedDate
        if (i === 0) {
          this.dateSegmentPicker.- updateProps({
            data: dateSegmentData
          })
        }
      }
    })
  },
  methods: {
    showDateSegmentPicker() {
      this.dateSegmentPicker.show()
    }
  }
}

并且为了实现两个选择器之间的联动，我们可以在 next 下一步的事件处理函数中，根据第一个的选择，更新第二个选择器，比如这里是，将结束时间的最小值 = 所选的开始时间。

• 快递 - 寄件地址 - 收件地址

  <cube-button @click="showCitySegmentPicker">Express - From - To</cube-button>

import { provinceList, cityList, areaList } from 'example/data/area'
 
const cityData = provinceList
cityData.forEach(province => {
  province.children = cityList[province.value]
  province.children.forEach(city => {
    city.children = areaList[city.value]
  })
})
 
export default {
  mounted () {
    this.citySegmentPicker = this.- createSegmentPicker({
      data: [{
        title: '选择快递',
        data: [expressData],
        selectedIndex: [1]
      }, {
        is: 'cube-cascade-picker',
        title: '寄件地址',
        data: cityData,
        selectedIndex: [0, 0, 0],
        cancelTxt: '返回'
      }, {
        is: 'cube-cascade-picker',
        title: '收件地址',
        data: cityData,
        selectedIndex: [0, 0, 0]
      }],
      cancelTxt: 'Cancel',
      confirmTxt: 'Confirm',
      nextTxt: 'Next',
      prevTxt: 'Prev',
      onSelect: (selectedVals, selectedIndexs, selectedTexts) => {
        this.- createDialog({
          type: 'warn',
          content: `Selected Items: 
 - 所选快递:  - {selectedTexts[0].join('')} 
 - 寄件地址: - {selectedTexts[1].join('')} 
 - 收件地址: - {selectedTexts[2].join('')}`,
          icon: 'cubeic-alert'
        }).show()
      }
    })
  },
  methods: {
    showCitySegmentPicker() {
      this.citySegmentPicker.show()
    }
  }
}

Props 配置

• data 子配置项

事件

实例方法

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/segment-picker