前端 移动端select多选

在移动端，由于屏幕尺寸的限制，原生的 select 元素在多选时会比较难以使用。因此，我们可以考虑使用一些 UI 库或自定义组件来实现移动端的 select 多选。

以使用 Mint UI 为例，可以使用其提供的 mt-popup 和 mt-checklist 组件来实现多选功能。首先，我们需要在页面中引入 Mint UI：

<link rel="stylesheet" href="//cdn.bootcss.com/mint-ui/2.2.13/style.min.css">
<script src="//cdn.bootcss.com/mint-ui/2.2.13/index.min.js"></script>

然后，我们可以使用 mt-popup 和 mt-checklist 组件来实现多选功能。例如：

<mt-popup v-model="popupVisible" :style="{ height: 'auto' }">
  <mt-checklist v-model="selectedOptions">
    <mt-checklist-item v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></mt-checklist-item>
  </mt-checklist>
</mt-popup>

在 Vue 中，我们可以使用 v-model 指令来双向绑定弹出层的显示状态和多选结果。selectedOptions 数组包含了所有被选中的选项的值。

除了使用 UI 库，我们也可以自定义组件来实现移动端的 select 多选功能。具体实现方式可以参考上一个回答，并根据移动端的特点进行优化。例如，可以使用滑动选择的方式来实现多选。