Select 选择器

从底部弹出列表选择弹窗

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

提示

版本 v1.2.6 新增了keyDefaultValue属性，通过设置keyDefaultValue = true，可支持直接绑定keyField的值，比如'zhuhai'，直接绑定选择项，更方便使用

示例

基础用法

可通过v-model | value：设定是否显示选择器 可通过配置items：设定可选项，如果item对象配置disabled，则不可选

<template>
  <pi-form border>
    <pi-form-item label="地区" show-right-icon @click="baseUsed.show = true">
      <input
        :value="baseUsed.defaultValue.text"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
  <!-- 基础用法 -->
  <pi-select
    v-model="baseUsed.show"
    :items="baseUsed.items"
    :single-cancel="false"
    :default-value="baseUsed.defaultValue"
    :popup-select="{
      showTitle: true,
      title: '请选择地区'
    }"
    @confirm="baseUsed.defaultValue = $event"
  />
</template>

<script>
export default {
  data() {
    return {
      baseUsed: {
        show: false,
        items: [
          { id: 'beijing', text: '北京' },
          { id: 'shanghai', text: '上海', disabled: true },
          { id: 'zhuhai', text: '珠海' }
        ],
        defaultValue: { id: 'zhuhai', text: '珠海' }
      }
    }
  }
}
</script>

单选模式下，是否直接选中

可通过配置singleConfirm：单选模式下，是否直接选中，不需要点击确认按钮（需要设置singleCancel：false）

<template>
  <pi-form border>
    <pi-form-item label="地区" show-right-icon @click="singleConfirm.show = true">
      <input
        :value="singleConfirm.defaultValue.text"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
  <!-- 单选模式下，是否直接选中 -->
  <pi-select
      v-model="singleConfirm.show"
      :items="singleConfirm.items"
      :single-cancel="false"
      single-confirm
      :default-value="singleConfirm.defaultValue"
      :popup-select="{
        showTitle: true,
        title: '请选择地区'
      }"
      @confirm="singleConfirm.defaultValue = $event"
    />
</template>

<script>
export default {
  data() {
    return {
      singleConfirm: {
        show: false,
        items: [
          { id: 'beijing', text: '北京' },
          { id: 'shanghai', text: '上海', disabled: true },
          { id: 'zhuhai', text: '珠海' }
        ],
        defaultValue: { id: 'zhuhai', text: '珠海' }
      },
    }
  }
}
</script>

多选模式

可通过is-multi：设定是否多选

<template>
  <pi-form border>
    <pi-form-item label="地区" show-right-icon @click="multi.show = true">
      <input
        :value="multi.defaultValue.map(i => i.text).join('，')"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
  <!-- 多选模式 -->
  <pi-select
    v-model="multi.show"
    :items="multi.items"
    is-multi
    :default-value="multi.defaultValue"
    :popup-select="{
      showTitle: true,
      title: '请选择身份'
    }"
    @confirm="multi.defaultValue = $event"
  />
</template>

<script>
export default {
  data() {
    return {
      multi: {
        show: false,
        items: [
          { id: 'partyMember', text: '党员', disabled: true },
          { id: 'member', text: '团员' },
          { id: 'masses', text: '群众' },
          { id: 'renmin', text: '人民' },
          { id: 'guanyuan', text: '官员' },
          { id: 'dangyuan', text: '党员' }
        ],
        defaultValue: [
          { id: 'member', text: '团员' },
          { id: 'masses', text: '群众' }
        ]
      }
    }
  }
}
</script>

顶部工具栏

可通过popup-select：设定弹窗顶部工具栏

<template>
  <pi-form border>
    <pi-form-item label="地区" show-right-icon @click="topToolbar.show = true">
      <input
        :value="topToolbar.defaultValue.text"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
  <!-- 顶部工具栏 -->
  <pi-select
    v-model="topToolbar.show"
    :items="topToolbar.items"
    :default-value="topToolbar.defaultValue"
    :popup-select="{
      showTitle: false,
      toolbarPosition: 'top'
    }"
    @confirm="topToolbar.defaultValue = $event"
  />
</template>

<script>
export default {
  data() {
    return {
      topToolbar: {
        show: false,
        items: [
          { id: 'A', text: '工程A' },
          { id: 'B', text: '工程B' },
          { id: 'C', text: '工程C' }
        ],
        defaultValue: { id: 'C', text: '工程C' }
      }
    }
  }
}
</script>

复选框定制

可通过selected-checkbox：设定勾选框

<template>
  <pi-form border>
    <pi-form-item label="地区" show-right-icon @click="checkbox.show = true">
      <input
        :value="checkbox.defaultValue.text"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
  <!-- 复选框定制 -->
  <pi-select
    v-model="checkbox.show"
    :items="checkbox.items"
    :single-cancel="false"
    :default-value="checkbox.defaultValue"
    :popup-select="{
      showTitle: true,
      title: '请选择地区'
    }"
    :selected-checkbox="{
      border: 0,
      activeMode: 'line-circle',
      iconSize: 40
    }"
    @confirm="baseUsed.defaultValue = $event"
  />
</template>

<script>
export default {
  data() {
    return {
      checkbox: {
        show: false,
        items: [
          { id: 'beijing', text: '北京' },
          { id: 'shanghai', text: '上海', disabled: true },
          { id: 'zhuhai', text: '珠海' }
        ],
        defaultValue: { id: 'zhuhai', text: '珠海' }
      }
    }
  }
}
</script>

顶部工具栏slot定制

可通过slot header自定义顶部插槽

可通过selected-checkbox：设定勾选框

<template>
  <pi-form border>
    <pi-form-item label="地区" show-right-icon @click="topToolbarSlot.show = true">
      <input
        :value="topToolbarSlot.defaultValue.text"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
  <!-- 顶部工具栏slot定制 -->
  <pi-select
    ref="topToolbarSlot"
    v-model="topToolbarSlot.show"
    :items="topToolbarSlotItems"
    :default-value="topToolbarSlot.defaultValue"
    :popup-select="{
      showTitle: false,
      toolbarPosition: 'none'
    }"
    @confirm="topToolbarSlot.defaultValue = $event"
  >
    <view slot="header" class="pi-align-center pi-content">
      <view class="pi-pd-right-24" @tap="topToolbarSlot.show = false">取消</view>
      <pi-search v-model="topToolbarSlot.keywrod" class="pi-flex-sub" />
      <view class="pi-pd-left-24 pi-primary" @tap="handleConfirmToolbarSlot">确定</view>
    </view>
  </pi-select>
</template>

<script>
export default {
  data() {
    return {
      topToolbarSlot: {
        show: false,
        keywrod: '',
        items: [
          { id: 'A', text: '工程A' },
          { id: 'AB', text: '工程AB' },
          { id: 'ABC', text: '工程ABC' },
          { id: 'D', text: '工程D' },
          { id: 'E', text: '工程E' },
          { id: 'F', text: '工程F' },
          { id: 'G', text: '工程G' }
        ],
        defaultValue: { id: 'D', text: '工程D' }
      }
    }
  },
  computed: {
    topToolbarSlotItems() {
      return this.topToolbarSlot.items.filter(item =>
        item.text.includes(this.topToolbarSlot.keywrod)
      )
    }
  },
  methods: {
    handleConfirmToolbarSlot() {
      this.$refs.topToolbarSlot.handleConfirm()
    }
  }
}
</script>

API

Props

名称	描述	类型	必选	默认值
value	初始值	—	false	-
customStyle	自定义样式	Object	false	-
customClass	自定义样式类	String	false	-
items	选项列表	Array	false	-
keyField	列表选项的唯一标识	String	false	'id'
displayField	选项显示字段	String	false	'text'
defaultValue	默认值，单选是传Object，多选时传Array	Object | Array	false	null
keyDefaultValue v1.2.6	是否只绑定keyField的默认值，默认false	Boolean	false	true
isMulti	是否多选	Boolean	false	false
singleCancel	单选模式下，是否可取消选中	Boolean	false	true
singleConfirm v1.2.3	单选模式下，是否直接选中，不需要点击确认按钮（需要设置singleCancel：false）	Boolean	false	false
itemHeight	行高 值为数字，则单位默认rpx	String | Number	false	110
showItemBottomBorder	是否显示item下边框	Boolean	false	true
itemStyle	行样式	Object	false	-
selectedImg	选中图标的配置	Object	false	img配置项
selectedCheckbox	选中复选框配置	Object	false	selectedCheckbox配置项
popupSelect	选择弹窗的配置	Object	false	popupSelect配置项
popup	弹窗的配置	Object	false	popup配置项
confirmBtn	确认按钮的配置	Object	false	confirmBtn配置项
cancelBtn	取消按钮的配置	Object	false	cancelBtn配置项

SelectedCheckbox Props

提示

以下属性覆盖pi-checkbox配置，其余属性参考checkbox配置项

参数	说明	类型	必选	默认值
shape	形状	'square' 'round' 'dot' 'text'	false	round
activeMode	激活模式	'line'-线框模式 'line-circle' - 线环 'fill'-实底 'fill-circle 填充环'	false	fill-circle

ConfirmBtn Props

提示

以下属性覆盖pi-button配置，其余属性参考button配置项

名称	描述	类型	必选	默认值
show	是否显示确认按钮	Boolean	false	true
text	确认文案	String	false	'确认'
width	确认按钮宽度	String | Number	false	100%
type	确认按钮预置样式	'default' 'primary' 'warn' 'secondary' 'line'	false	'primary'

CancelBtn Props

提示

以下属性覆盖pi-button配置，其余属性参考button配置项

名称	描述	类型	必选	默认值
show	是否显示取消按钮	Boolean	false	false
text	取消文案	String	false	'取消'
width	取消按钮宽度	String | Number	false	100%
type	取消按钮预置样式	'default' 'primary' 'warn' 'secondary' 'line'	false	'secondary'

Events

事件名	描述	参数
close	关闭弹窗	-
confirm	点击确定按钮后触发	当前选中的值 单选为对象，多选模式为数组

Slots

名称	描述	插槽内容
title	定制选择器标题	-
header	顶部区域	-
footer	底部区域	-
item	定制选择器区域列表项	item selected

Methods

Method	Description	Parameters
toggleSelect	全选或全清选择值	selected=true 是否勾选 nodes=[] 需要改变的节点，不填默认全部
handleCancel	取消选择	-
handleConfirm	确认选择	-