Question

import { PopupPicker } from 'feui';
components: {
  [PopupPicker.name]: PopupPicker,
},
data() {
  return {
  };
}
methods: {
}

代码演示

单列PopupPicker

<fe-group title="单列">
  <popup-picker :title="title1" :data="list1" v-model="value1" @on-show="onShow" 
    @on-hide="onHide" @on-change="onChange" placeholder="请选择">
  </popup-picker>
  <popup-picker :popup-title="请选择" :title="title1" :data="list1" v-model="value1_1" 
    @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择">
    <template slot="title" slot-scope="props"><!-- use scope="props" when vue < 2.5.0 -->
      <span :class="props.labelClass" :style="props.labelStyle" style="height:24px;">
        <span class="cell-icon iconfont feui-icon" 
          style="font-size:20px;vertical-align:middle;">
        </span>
        <span style="vertical-align:middle;">手机</span>
      </span>
    </template>
  </popup-picker>
</fe-group>

双列PopupPicker

 <fe-group title="两列">
  <popup-picker :title="title2" :data="list2" v-model="value2"></popup-picker>
</fe-group>

多列

<fe-group title="chained columns">
  <popup-picker :title="title3" :data="list3" :columns="3" 
  v-model="value3" ref="picker3"></popup-picker>
  <fe-cell title="获取值对应的文字" :value="$refs.picker3&&
  $refs.picker3.getNameValues()"></fe-cell>
  <popup-picker :title="title4" :data="list3" :columns="3" 
  v-model="value4" show-name></popup-picker>
</fe-group>

隐藏时不影响其他popup-picker的mask

<fe-group title="隐藏时不影响其他popup-picker的mask">
  <fe-switch title="隐藏popup" v-model="switch6"></fe-switch>
  <popup-picker v-if="!switch6" title="显示值" :data="['你猜猜我是谁啊'.split('')]"
   v-model="value6"></popup-picker>
</fe-group>

显示格式化

<fe-group title="显示格式化">
  <popup-picker title="时间" :inline-desc="`当前值[
#123;formatDemoValue}]`" 
    v-model="formatDemoValue" :data="[['01','02','03'],['11','12','13']]" 
    :display-format="format">
  </popup-picker>
</fe-group>

API

参数	说明	类型	默认值	可选值
title	标题	String	-	-
value	表单值，使用v-model绑定	Array	-	-
confirm-text	弹窗的确定文字	String	-	-
cancel-text	弹窗的取消文字	String	-	-
placeholder	提示文字	String	-	-
inline-desc	Cell的描述文字	String	-	-
show	显示 (支持.sync修饰 next)	Boolean	true	true,false
show-name	是否显示文字值而不是key	Boolean	true	true,false
value-text-align	value对齐方式(text-align)	String	right	left,right
popup-title	弹窗标题	String	-	-
popup-style	弹窗样式，可以用于强制指定z-index	Object	-	-
display-format	自定义在cell上的显示格式，参数为当前value， 使用该属性时，show-name属性将失效	Function	-	-
-	-	-	-	-

Slots

Slot名	说明	备注
title	标题插槽	使用scope.labelClass和scope.labelStyle继 承原有样式(实现样式受控于group label设置)
-	-	-

Events

事件名	参数	说明	备注
on-change	value	值变化时触发	-
on-show	-	弹窗出现时触发	-
on-hide	closeType	弹窗关闭时触发	true表示confirm(选择确认), false表示其他情况的关闭
on-shadow-change	Array ids, Array names	picker 值变化时触发，即滑动 picker 时触发	-
-	-	-	-