XtMobilePicker 移动端选项选择器

移动端选项选择面板，支持单选滚轮（替代 select / radio-group）和多选列表（替代 checkbox-group）。

组件本身为纯面板，不包含弹层遮罩。需配合 XtMobileSheet 使用底部弹出效果。

单选模式 - 替代 select / radio-group

当前值：shenzhen

基础单选用法

<template>
  <div>
    <el-input :value="displayText" placeholder="请选择" readonly style="width: 240px" @click.native="show = true">
      <el-button slot="append" icon="el-icon-arrow-down" @click="show = true"></el-button>
    </el-input>
    <p style="margin-top: 12px; color: #999; font-size: 13px;">当前值：{{ value }}</p>

    <xt-mobile-sheet :visible.sync="show">
      <xt-mobile-picker
        v-model="value"
        title="请选择城市"
        :options="options"
        @confirm="show = false"
        @cancel="show = false"
      />
    </xt-mobile-sheet>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: 'shenzhen',
      options: [
        { label: '北京', value: 'beijing' },
        { label: '上海', value: 'shanghai' },
        { label: '广州', value: 'guangzhou' },
        { label: '深圳', value: 'shenzhen' },
        { label: '杭州', value: 'hangzhou' },
        { label: '成都', value: 'chengdu' },
        { label: '武汉', value: 'wuhan' }
      ]
    }
  },
  computed: {
    displayText() {
      const item = this.options.find(o => o.value === this.value)
      return item ? item.label : ''
    }
  }
}
</script>

显示代码 复制代码 复制代码

多选模式 - 替代 checkbox-group

已选：2 项 - js, css

多选用法

<template>
  <div>
    <el-button type="primary" @click="show = true">选择标签</el-button>
    <p style="margin-top: 12px; color: #999; font-size: 13px;">已选：{{ value.length }} 项 - {{ value.join(', ') }}</p>

    <xt-mobile-sheet :visible.sync="show">
      <xt-mobile-picker
        v-model="value"
        title="请选择标签（多选）"
        mode="multiple"
        :options="options"
        @confirm="show = false"
        @cancel="show = false"
      />
    </xt-mobile-sheet>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: ['js', 'css'],
      options: [
        { label: 'JavaScript', value: 'js' },
        { label: 'TypeScript', value: 'ts' },
        { label: 'CSS', value: 'css' },
        { label: 'HTML', value: 'html' },
        { label: 'Vue', value: 'vue' },
        { label: 'React', value: 'react' },
        { label: 'Angular', value: 'angular' },
        { label: 'Node.js', value: 'node' }
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

禁用选项

当前值：wechat

部分选项禁用

<template>
  <div>
    <el-button @click="show = true">选择渠道</el-button>
    <p style="margin-top: 12px; color: #999; font-size: 13px;">当前值：{{ value }}</p>

    <xt-mobile-sheet :visible.sync="show">
      <xt-mobile-picker
        v-model="value"
        title="请选择渠道"
        :options="options"
        @confirm="show = false"
        @cancel="show = false"
      />
    </xt-mobile-sheet>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: 'wechat',
      options: [
        { label: '微信', value: 'wechat' },
        { label: '支付宝', value: 'alipay' },
        { label: '银行卡（维护中）', value: 'bank', disabled: true },
        { label: '余额', value: 'balance' }
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

自定义字段名

当前值：2

自定义 fieldKeys

<template>
  <div>
    <el-button @click="show = true">选择部门</el-button>
    <p style="margin-top: 12px; color: #999; font-size: 13px;">当前值：{{ value }}</p>

    <xt-mobile-sheet :visible.sync="show">
      <xt-mobile-picker
        v-model="value"
        title="请选择部门"
        :options="options"
        :field-keys="fieldKeys"
        @confirm="show = false"
        @cancel="show = false"
      />
    </xt-mobile-sheet>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: 2,
      options: [
        { name: '技术部', id: 1 },
        { name: '产品部', id: 2 },
        { name: '运营部', id: 3 },
        { name: '市场部', id: 4 }
      ],
      fieldKeys: { label: 'name', value: 'id', disabled: 'disabled' }
    }
  }
}
</script>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	可选值	默认值
v-model	选中值，单选为基本类型，多选为数组	String / Number / Array	—	—
mode	选择模式	String	single / multiple	single
options	选项数组	Array	—	[]
title	顶部标题	String	—	请选择
confirm-text	确认按钮文字	String	—	确定
cancel-text	取消按钮文字	String	—	取消
field-keys	自定义选项字段名	Object	—	{ label: 'label', value: 'value', disabled: 'disabled' }

Events

事件名	说明	回调参数
input	值变化，配合 v-model	单选为 String/Number，多选为 Array
change	值变化	同 input
confirm	点击确定按钮	同 input
cancel	点击取消按钮	—

选项数据结构

// 默认字段名
{
  label: '显示文字',   // fieldKeys.label
  value: '选项值',     // fieldKeys.value
  disabled: false       // fieldKeys.disabled，是否禁用
}

特性

• 纯面板组件：不含弹层遮罩，配合 XtMobileSheet 实现底部弹出
• 单选滚轮：触摸滑动 + 惯性滚动 + 吸附对齐，体验与原生 Picker 一致
• 多选列表：带勾选标记的列表，支持多选切换
• 禁用选项：支持单选和多选模式下禁用特定选项
• 自定义字段：通过 fieldKeys 灵活映射数据字段
• 安全区域：适配 iPhone 底部安全区域