Picker 选择器

使用指南

组件介绍

选择器组件通常与弹出层组件配合使用

引入方式

import { Picker } from 'feart';
components:{
  'fe-picker':Picker
}

let years = [];
let months =[]
for (let i = 2015; i <= 2025; i++) {
  years.push({
    name: i + "年",
    value: i + ""
  });
}
for (let i = 1; i <= 12; i++) {
  months.push({
    name: i + "月",
    value: i + ""
  });
}
components: {
  'fe-picker': Picker,
},
data() {
  return {
    years: [years],
    date: [years, months],
  };
}
methods: {
  change(value) {
    // on change
  },
}

代码演示

默认

<fe-picker :data="years" v-model="yearValue" @on-change="change"></fe-picker>

双向绑定

<select v-model="yearValue">
  <option v-for="item in years[0]" :value="item.value" :key="item.index">{{item.name}}</option>
</select>
<fe-picker :data="year" v-model="yearValue" @on-change="change3"></fe-picker>

非联动多列

<fe-picker :data="date" v-model="dateValue" @on-change="change"></fe-picker>

联动多列

<fe-picker :data="area" :columns="3" v-model="areaValue" @on-change="change"></fe-picker>

//联动多列 data 基本格式
data() {
  return {
    area: [
      {
        name: '浙江省',
        value: 'zj',
        children: [
          {
            name: '杭州市',
            value: 'hz',
            children: [
              {
                name: '西湖区',
                value: 'xh',
              },
              ...
            ],
          },
          ...
        ],
      },
      ...
    ]
  }
}

自定义显示列

<fe-picker :data="area" :fixed-columns="2" :columns="3" v-model="areaValue" @on-change="change">
</fe-picker>

API

Events

Methods