PopupPicker 弹出选择

优质

小牛编辑

153浏览

2023-12-01

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 时触发	-
-	-	-	-